小技巧

CSS

1- 制作小三角

利用没有宽度和高度只有border的元素，当border-top-color是有颜色，其他边都是透明色就有三角。

image-20200523172114585 
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="con">123</div>

.con::before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 28px;
    left: 18px;
    border: 8px solid #000;
    border-style: solid dashed dashed;
    border-color: #fff transparent transparent;
}

如果三角是朝右的，只需修改边框颜色为border-color: transparent #fff transparent transparent;

2- 带有文字的圆形图标

因为图形内有文字，可以考虑使用border-radius 和 绝对定位

除了圆形图标之外，利用border-radius可以制作各种形状的小图标

image-20200526105632399

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.close {
    position: absolute;
    top: -20px;
    right: -20px;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: 1pX solid #ebebeb;
    background-color: #ffffff;
    line-height: 40px;
    font-size: 12px;
    text-align: center;
}

3 - 三角按钮

主要利用了 transform 的 rotate属性

image-20200807115015011 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.right span {
  position: relative;
  padding-right: 10px;
}
.right span::after {
  position: absolute;
  right: 0;
  top: 2px;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 1px solid #888;
  border-right: 1px solid #888;
  transform: rotate(45deg);
}

4 - 遮罩层

  1. 使用before等元素

  2. 使用固定定位

    当我们需要给某个盒子设置遮罩层的时候，可以在盒子内设置一个div 这个div是固定定位至盒子的最顶端，然后这个div是占满整个盒子，最后使用z-index把遮罩层设置到盒子的下面。

1
2
3
4
5
6
7
8
9
.bc {
    position: fixed; //这里是需要一个占满整个网页的遮罩层。
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .3);
}

JS

1- 奇数次点击打开，偶数次点击关闭

1
2
3
4
5
6
7
8
9
10
var flag = 0; //这个flag放在函数外部，只执行一次
open.addEventListener('click', function() {
    if (flag === 0) {
        bc.style.display = 'block';
        flag = 1;
    } else {
        bc.style.display = 'none';
        flag = 0; //这里需要再次设置flag
    }
})

2 - 双击某元素（带有文字），出现一个文本框，可以通过文本框修改某元素内的文字。

  • 双击文字的时候，在里面生成一个文本框,
  • 当失去焦点或者按下回车然后把文本框输入的值给原先元素即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$("ul , ol ").on("dblclick", "p", function() {
    var content = $(this).text();
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); ////双击选中会选中p元素的文字，禁用
    // console.log(content);
    // 在p里面添加一个文本框
    $(this).html("<input type='text'/>");
    var input = $(this).children("input");
    input.val(content);
    input.select(); //选中文本框的所有文字，方便统一修改
    input.on({
        blur: function() {
            // if ($(this).val == "") return;
            $(this).parent().text($(this).val()); //text()方法向p里面新添加了内容，因此input会消失。
        },
        keyup: function(e) {
            if (e.keyCode === 13) {
                $(this).blur(); //因为blur方法的结果和这个结果一样，所以手动调用
            }
        }
    });

})

3 - dom元素添加html标签

传统做法可以先创建元素，然后追加，但是当需要添加很多html标签时候就很麻烦。因此可以使用 element.insertAdjacentHTML()方法。

insertAdjacentHTML() 方法将指定的文本解析为 Element 元素，并将结果节点插入到DOM树中的指定位置。

1
element.insertAdjacentHTML(position, text);
  • position是插入的位置
  • text是插入的文本，String型

算法的优化

1） x && F(x)

x && F(x) 是当x本身就是false不存在的时候，就不会执行后面的F(x),这样显然提高了效率，比如下面这个

1
2
index--;
lis[index] && lis[index].onclick();//比如index是负数的时候，后面的代码不会执行，点击事件也不会触发
2) return 直接跳出当前函数 （在 if 的分支里面用效果比较好）

如下在某个函数里面，如果文档中没有这个‘active’类，那么就要执行很多代码，可是如果有这个类，就不需要执行了，此时一个return解决了我们的燃眉之急。

1
2
3
4
5
  function(){
  .....
    if (document.querySelector('.active')) return;
  ......
}

return 三元表达式代替仅有if … else … 的函数

1
2
3
yd: function(flag) {
    return flag ? total + 10 : total;
}
3 ) 手动调用事件

比如我们在函数A里，接下来的运行效果和已经写好的函数B相同，那么我们在A里面可以直接调用B函数，减少了代码量。

1
this.onclick()//手动调用我们的点击事件 不需要鼠标触发
4） some方法

首先some（）方法的效率非常高，尤其数据很多的时候，some的使用条件：当我们检索某个唯一值（需要遍历数组）的时候，可以使用some() 方法，因为some检索到检索值之后，就会终止循环。

some（）通常是 return value == 检测值;来结束循环条件，但是我们可以根据需求，自动设置返回值。比如下面这段代码，可以获取到检索值同时还能结束循环条件

1
2
3
4
5
6
data.some(function(value) {
    if (value.pname === product.value) {
        arrp.pop(value);
        return true;
    }
});

5）三元表达式

  • 用于切换一个变量的两个值
1
2
3
toggleLoginType: function() {
    return this.loginType = this.loginType === 'username' ? 'email' : 'username'
}

展开全文 >>

Js学习-js语法2

**七、函数

在JS里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。

虽然 for 循环语句也能实现-些简单的重复操作,但是比较具有局限性,此时我们就可以使用JS中的函数。

函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

more >>

展开全文 >>

JS学习-js基础

1 计算机基础

编程语言和标记语言区别

编程语言分为汇编语言和高级语言，汇编语言可以被计算机所识别，但是不易于我们理解。

高级语言易于理解，但是高级语言编制的程序不能直接被计算机识别，必须转换为机器语言，也就是二进制化。

more >>

展开全文 >>

Echarts学习

title: Echarts学习
date: 2020-05-12 19:18:37
tags: [css]

什么是数据可视化

数据可视化主要目的:借助于图形化手段，清晰有效地传达与沟通信息。

数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。

more >>

展开全文 >>

Untitled

去除默认样式

bootstrap input 样式去除

有时候边框的蓝色高亮并不是input的outline属性。

1
2
3
4
 input:focus {
    border: none !important; 
    box-shadow: none !important;
}

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家