代码段备忘录

 1.遮罩层

 <div class="mask" id="mask">
        <div class="choose unshow" id="choose">
          <div class="choosehd">
           
          </div>
          <div class="choosecon"></div>
        </div>
      </div>

.mask {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      display: none;
      background-color: rgba(0, 0, 0, 0.6);
      z-index: 10;
    }

var mask = document.getElementById("mask")
 mask.style.display = "block";
    //阻止冒泡
    event = event || window.event;
    if (event || event.stopPropagation()) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
    document.onclick = function (event) {
        event = event || window.event;
        //兼容获取触动事件时被传递过来的对象
        var aaa = event.target ? event.target : event.srcElement;
        if (aaa.id !== "choose") {
        mask.style.display = "none";
        }
  }

 2.列表数据生成点击表格数据事件

//动态生成新数据
var choosenamelist = []
    groupres.namelist.forEach((itm) => {
        choosenamelist.push('<tr>' + '<td>' + itm.devname + '</td>' + '<td>' + itm.sn + '</td>' + '<td>' + itm.org[0].orgname + '</td>' + '</tr>')
    })
    $('.choosecon').html(choosenamelist)

// 生成的表格 点击tr 触发事件
    $('.choose').on('click', 'tr', function () {
    var choosesn = ($(this)[0].cells[1].innerHTML)
     $('#keywords').val(choosesn)
    })

3.清除页面所有定时间延时器 

 let id = setTimeout(() => { }, 0);
      while (id > 0) {
        window.clearTimeout(id)
        id--;
      }

 4.节流

function throttle(fn, wait) {
        var pre = Date.now();
        return function () {
            var context = this;
            var args = arguments;
            var now = Date.now();
            if (now - pre >= wait) {
                fn.apply(context, args);
                pre = Date.now();
            }
        }
    }

$('#newgps').on('click', throttle(markerchose, 5000))

 5.数组去重排序

viewObj.tbData.sort((a, b) => a.Date.localeCompare(b.Date)) //排序

                  var arr3 = viewObj.tbData
                  let deWeightThree = () => {
                    let maps = new Map();
                    for (let item of arr3) {
                      if (!maps.has(item.dvname)) {
                        maps.set(item.dvname, item); //判断条件修改位置
                      }
                    }
                    return [...maps.values()];
                  }
                  viewObj.tbData = deWeightThree();

6.动态生成下拉框数据

 <div>
     <span>群组：</span>
     <select name="groupall" id="groupall" required>
    </select>
 </div>

function addListOption(selectId, listItems) {
        // 循环遍历数组
        for (var item in listItems) {
          // 获取下拉列表框对象
          var selectID = document.getElementById(selectId);
          // 创建option元素
          var option = document.createElement("option");
          // 添加节点
          option.appendChild(document.createTextNode(listItems[item]));
          // 设置value属性
          option.setAttribute("value", listItems[item]);
          // 将option添加到下拉列表框中
          selectID.appendChild(option);
        }
      }




addListOption("groupall", items); //调用

 7.设置滚动条在最底部

if (conntext.scrollHeight > conntext.clientHeight) {
    //设置滚动条到最底部
    conntext.scrollTop = conntext.scrollHeight
}

8.可移动的盒子

<div id="d-box1" class="d-box1 unshow ">
			<div id="drop1" class="hd">
				<button onclick="off1()">关闭</button>
				
			</div>
			<div class="context1">

            </div>
</div>

.d-box1 {
	width: 310px;
	border: 5px solid #eee;
	position: fixed;
	top: 110px;
	right: 20px;
	background-color: white;
	z-index: 10;
}

var box1 = document.getElementById('d-box1');
    var drop1 = document.getElementById('drop1');
    drop1.onmousedown = function (e) {
        e = e || window.event;
        var x = e.pageX || e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
        var y = e.pageY || e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
        var box1_x = box1.offsetLeft;
        var box1_y = box1.offsetTop;
        var mouse_in_box1_x = x - box1_x;
        var mouse_in_box1_y = y - box1_y;
        document.onmousemove = function (e) {
            e = e || window.event;
            x = e.pageX || e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
            y = e.pageY || e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
            var box1X = x - mouse_in_box1_x;
            var box1Y = y - mouse_in_box1_y;
            box1.style.left = box1X + 'px';
            box1.style.top = box1Y + 'px';
        }
    }
    drop1.onmouseup = function () {
        document.onmousemove = null;
    }

9.获取本地时间

let date = new Date(+new Date() + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');

console.log(date);   // 2018-03-26 15:41:10

let date = new Date();
let strDate = date.toLocaleString().replace(/[年月]/g, '-').replace(/[日上下午]/g, '');
console.log(strDate);  //  2018/3/26 3:42:25

10.C3过渡

.writealert_error{
    opacity: 0;
    transition: all .5s ease-in;
	-moz-transition: all .5s ease-in;
	-webkit-transition: all .5s ease-in;
	-o-transition: all .5s ease-in;
}

.myactive_error {
	opacity: 1;
}

function myalert_error(somemsg) {
		$('.writealert_error').addClass('myactive_error')
		$('.writealert_error').html(somemsg)
		setTimeout(() => {
			$('.writealert_error').removeClass('myactive_error')
		}, 3 * 1000);
	}

11.定义、调用关键帧动画

@keyframes music {
      0% {
        transform: scaleY(1);
      }

      50% {
        transform: scaleY(.15);
      }

      100% {
        transform: scaleY(1);
      }
    }

li {
      display: inline-block;
      width: 10px;
      margin: 0 5px;
      height: 100%;
      list-style: none;
      background-color: rgb(216, 157, 86);
      transform-origin: center center;
      animation: music 1.5s 0ms infinite ease-in-out; /*调用*/
    }
div>ul>li:nth-child(2) {
      animation-delay: .1s;
    }

简写
animation: name duration timing-function delay iteration-count direction;

	描述	值
animation-name	规定需要绑定到选择器的 keyframe 名称	自定义
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。	时间
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。	可选、时间
animation-iteration-count	规定动画应该播放的次数。	infinite 规定动画应该无限次播放
animation-direction	规定是否应该轮流反向播放动画。	normal（默认） alternate（反向播放）

animation-timing-function	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

12.文件读取上传

var fileData = this.files[0];
//获取到一个FileList对象中的第一个文件( File 对象),是我们上传的文件

    var pettern = /^image/;

    // console.info(fileData.type)

    if (!pettern.test(fileData.type)) {
      layer.alert("图片格式不正确");
      return;
    }
    var reader = new FileReader();

    reader.readAsDataURL(fileData);
//异步读取文件内容，结果用data:url的字符串形式表示

    /*当读取操作成功完成时调用*/
    reader.onload = function (e) {
      // console.log(e); //查看对象
      var base64 = this.result

      console.log('base64', this.result); 
//需要的数据 这里的this指向FileReader（）对象的实例reader

      image.setAttribute("src", base64) //预览
    }

13.汉字识别 正则

var han = /^[\u4e00-\u9fa5]{1,9}$/
han.test(testMessage)