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)