前端开发

快速转台

文字超出省略号

    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>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/1748sb/p/13909995.html