代码段备忘录

 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.tbDatalet 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.resultconsole.log('base64', this.result); 
//需要的数据 这里的this指向FileReader（）对象的实例readerimage.setAttribute("src", base64) //预览}

13.汉字识别 正则

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