快速转台
文字超出省略号
display: -webkit-box;
overflow: hidden;
white-space: normal !important;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 3; //行数
-webkit-box-orient: vertical
时间
let nowtime = new Date().toLocaleString();
this.time=nowtime.replace(///g, "-"); //生成-----2020-11-12 下午5:11:00
定时器加载到指定时间触发
let newTime = new Date('2020-11-25 10:50:10');
let oldTime = new Date('2020-11-25 10:50:15'); //5秒后
// oldTime.setMinutes(oldTime.getMinutes()+30)
let timer = setInterval(()=>{
newTime.setSeconds(newTime.getSeconds()+1);
console.log(`%c${newTime.getSeconds()}`,'color:red');
if(newTime.getTime()==oldTime.getTime()){
console.log('%c game-over','color:red');
clearInterval(timer);
}
},1000)
取消事件
pointer-events: none;
微信小程序隐藏滚动条
::-webkit-scrollbar {
0;
height: 0;
color: transparent;
}
a标签下载文件
const a = document.createElement('a');//创建a标签
a.setAttribute('download', '');// 名字
a.setAttribute('href', '');// href链接
a.click(); // 自执行点击事件
document.body.appendChild(a);//插入body里
document.body.removeChild(a);//从body删除
blob文件 转url
// 请求增加 responseType:"blob"
let blob=new Blob([res.data],{type:res.data.type});
let url=window.URL.createObjectURL(blob);
滚动条自定义样式
滚动条的设置
1. ::-webkit-scrollbar 滚动条整体部分，可以设置宽度等
2. ::-webkit-scrollbar-button 滚动条两端的按钮
3. ::-webkit-scrollbar-track 外层轨道
4. ::-webkit-scrollbar-track-piece 内层滚动槽
5. ::-webkit-scrollbar-thumb 滚动的滑块
6. ::-webkit-scrollbar-corner 边角
7. ::-webkit-resizer 定义右下角拖动块的样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>标题</title>
<style>
div {
100px;
height: 300px;
border: 2px solid red;
overflow-x: scroll;
overflow-y: scroll;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
12px;
background-color: aqua;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius:10px;
background:black;
}
</style>
</script>
</head>
<body>
<div id="div1">
请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,
JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的
实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。小天地，大世界是一个Web前端的技术博客。 主要是关于
HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
小天地，大世界是一个Web前端的技术博客。 主要是关于HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还包含一些PHP语言等的实用例子。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
小天地，大世界是一个Web前端的技术博客。 主要是关于请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。请选择Webkit内核的浏览器才可以正常的看到滚动条的变化。
小天地，大世界是一个Web前端的技术博客。 主要是关于
HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
包含一些PHP语言等的实用例子。
小天地，大世界是一个Web前端的技术博客。 主要是关于
HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
包含一些PHP语言等的实用例子。
HTML 5,CSS 3,JavaScript,JQuery等。除此之外，还
包含一些PHP语言等的实用例子。
</div>
</body>
</html>