前端笔记：

检测设备的宽度（html部分)

<meta name="viewport" content="width = device-width,initial-scale = 1.0">

及添加css文件，font文件

<link rel="stylesheet" href="font/iconfont.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" href="font/iconfont.css">

conmon.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@font-face {
    font-family: "youshe";
    src: url("../font/YSHaoShenTi.ttf");
}
.icon {
    width: 1.8em;
    height: 1.8em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

a,
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

li {
    list-style-type: none;
}

background属性

  background: url("../img/4.png")no-repeat 0em -1.2em/55px 55px;

input标签可改变本来的样式

<input type="text" name=""  placeholder="" v-model="doneList.content1" @keyup.enter="add" autofocus>

用css根据type属性获取

div input[type='text'] {
    width:100%;
}

<input type="checkbox" name="" v-model="">

更改type为checkbox的样式

input{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #000;
  -webkit-appearance: none;
    -moz-appearance: none;
}

filter属性

CSS 中实现滤镜效果需要通过 filter 属性并配合一些函数来实现，如下所示：

荧光效果

filter: drop-shadow(x, y, spread, color);

@keyframs

@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

@-moz-keyframes mymove /* Firefox */

@-webkit-keyframes mymove /* Safari 和 Chrome */

@-o-keyframes mymove /* Opera */

animation属性

div
{
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

animetion与transition结束事件

/*transtion*/
dom.addEventListener('transitionend', () =>{
    console.log("346476")
});

/*animetion*/
dom.addEventListener('animetionend', () =>{
    console.log("346476")
});

css计算属性

.box {
    --x: 2;
    --y: 2;
}

transform: translate(calc (6px * var(--x)), calc (6px * var(--x)))

点击添加属性

addEventListener('click')
document.classList.toggle("类名")

/*
css
.document.active {
    xxx: xxx;
}
*/

使用图标时(font)

引入js标签

<script src="./font/iconfont.js"></script>

css添加

.icon {
    width: 1.8em;
    height: 1.8em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

使用时

 <svg class="icon" aria-hidden="true">
         <!--图标名：#icon-xxx-->
       <use xlink:href="#icon-tianjiayonghu"></use>
 </svg>

选择li的第几个孩子时可用

ul li:nth-child(n){

}

span标签内地文字不好设置居中，可更改为div，然后设置

text-alien : center;

根据li的数量，更改li的长度

ul{
    height: auto;
      display: flex;        /*流动布局*/
      justify-content:space-around;
      flex-wrap: wrap;    /*设置换行*/
}
li{
  list-style-type:none;  /*去除li前的小点*/
}
ui li{
    flex-grow: 2;   /*重点部分，使li在有空间的地方”生长“*/
}

切割元素

clip-path: polygon(0% 0%, 50% 0%, 50% 50%, 100% 50%, 100% 100%, 0% 100%);
/*每个逗号分割一个坐标*/

单个字体居中对齐

 display: flex;
 justify-content: center;
 align-items: center;

引入外部字体

@font-face {
    font-family: "xsu";
    src:  url("../font/quan.ttf");
}

图片实现渐变

.bgimg {
    width: 100%;
    height: 260px;
    position: absolute;
    top: 0px;
    background: var(--bg) no-repeat 0em -19em/100% 42em;
    left: 0;
    z-index: -1;
}
/*覆盖一层渐变遮罩*/
.bgimg:after {
    content: "";
    width: 100%;
    height: 260px;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(248, 252, 255, 0) 35%, rgba(255, 255, 255, 1) 85%);
    z-index: 1;
}

亮暗主题切换

css部分

/*设置css变量*/ 
--bg-color-1: #eee;

[color-theme="dark"] {
      --bg-color-1: #fff;
} 
[color-theme="light"] {
      --bg-color-1: #000;
}

js

document.documentElement.setAttribute("color-theme", "dark");
//or
document.documentElement.setAttribute("color-theme", "light");

隐藏滚动条

scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */

.HWcontrol::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

js部分：

存储函数：

(function (w) {
        var isSupportLocalStorage = !!window.localStorage, isSupportBehavior = false;
        if (!isSupportLocalStorage) {
            var dataObj = document.createElement('input');
            dataObj.type = 'hidden';
            document.body.appendChild(dataObj);
            isSupportBehavior = !!dataObj.addBehavior;
            isSupportBehavior && dataObj.addBehavior('#default#userData');
        }
        var configs = { storeName: 'editorContent' };
        w.storage = {
            retrieve: function (name) {
                if (!isSupportLocalStorage && isSupportBehavior) {
                    dataObj.load(configs.storeName);
                    return dataObj.getAttribute(name);
                } else {
                    return w.localStorage.getItem(name);
                }
                return null;
            },
            save: function (name, value) {
                if (!isSupportLocalStorage && isSupportBehavior) {
                    dataObj.setAttribute(name, value);
                    dataObj.save(configs.storeName);
                    return true;
                } else {
                    w.localStorage.setItem(name, value);
                    return true;
                }
                return false;
            }
        };
    })(window);

调用时

storage.save("变量名",变量);//储存函数

storage.retrieve("变量名")//读取函数

储存一些特殊数据时，需要用JSON转换数据

JSON.stringify(this.doneList));        //将目标转化为json字符

JSON.parse(storage.retrieve("data.doneList"))    //将json字符转化为数组

检测页面传回的参数

var current_user = getUrlQueryString('user');
    $('.ch_n').html(current_user);

    //检测跳转页面传回来的参数
    function getUrlQueryString(names, urls) {
        urls = urls || window.location.href;
        urls && urls.indexOf("?") > -1 ? urls = urls
            .substring(urls.indexOf("?") + 1) : "";
        var reg = new RegExp("(^|&)" + names + "=([^&]*)(&|$)", "i");
        var r = urls ? urls.match(reg) : window.location.search.substr(1)
            .match(reg);
        if (r != null && r[2] != "")
            return unescape(r[2]);
        return null;
    }

浏览器宽度监测

 window.onresize = function() {}

简单文章目录

let h2 = document.querySelectorAll('h2');
let h3 = document.querySelectorAll('h3');
let h4 = document.querySelectorAll('h4');
let bgn = document.querySelector(".post-md").children[0];
let nav = document.querySelector('.nav>ul');
navSet(bgn, nav);

console.log(bgn)
while ((bgn = bgn.nextElementSibling) != null) {
    navSet(bgn, nav);
}
function navSet(bgn, nav) {
    if (bgn.tagName == "H2") {
        let nli = document.createElement("li");
        nli.innerHTML = `<span class="h2T">${bgn.innerHTML}</span>`;
        nav.appendChild(nli);
    } else if (bgn.tagName == "H3") {
        let nli = document.createElement("li");
        nli.innerHTML = `<span class="h3T">->${bgn.innerHTML}</span>`;
        nav.appendChild(nli);
        // break;
    } else if (bgn.tagName == "H4") {
        let nli = document.createElement("li");
        nli.innerHTML = `<span class="h4T">-->${bgn.innerHTML}</span>`;
        nav.appendChild(nli);
    } else {
       return;
    }
}
let h2T = document.querySelectorAll('.nav>ul>li>.h2T');
let h3T = document.querySelectorAll('.h3T');
let h4T = document.querySelectorAll('.h4T');
let shu = [h2T, h3T, h4T];
let zu = [h2, h3, h4];
console.log(shu)
for (let j = 0; j < shu.length; j++) {
    for (let i = 0; i < shu[j].length; i++) {
        shu[j][i].onclick = function() {
            console.log(zu[j][i])
            let position = zu[j][i].offsetTop;
            window.scrollTo(0, position);
        }
    }
}

页面滚动

 // var json = {left: 10, right: 10} 变异
    //json.left json.top
    function scroll() {
        if(window.pageYOffset != null) // ie9+ 和其他浏览器
        {
            return {
                left: window.pageXOffset,
                top: window.pageYOffset
            }
        }
        else if(document.compatMode == "CSS1Compat") // 声明的了 DTD
          // 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>
        {
            return {
                left: document.documentElement.scrollLeft,
                top: document.documentElement.scrollTop
            }
        }
        return { // 剩下的肯定是怪异模式的
            left: document.body.scrollLeft,
            top: document.body.scrollTop
        }
    }
    window.onscroll = function() {
        console.log(scroll().top);
    }

获取元素页面位置

function getTop(aa) {
    let offset = aa.offsetTop;
    if (aa.offsetParent != null) offset += getTop(aa.offsetParent);
    return offset;
}

显示当前目录

function showCurrent() {
    let hs = document.querySelectorAll('h2, h3, h4');
    for (let i = 0; i < hs.length; i++) {
        if (hs[i].offsetTop < scroll().top) {
            if (scroll().top - hs[i].offsetTop < 60 && shuzu[0] == shuzu[1]) {
                shuzu[set] = 1;
                let menuli = document.querySelectorAll('.menu>ul>li>span');
                for (let j = 0; j < menuli.length; j++) {
                    menuli[j].style.color = "#000";
                }
                menuli[i].style.color = "rgba(158, 215, 236, 0.9)";
                document.querySelector('.menu>ul').scrollTo(0, menuli[i].offsetTop - 100);
                set++;
            } else {
                shuzu[set] = 0;
                set++;
            }
            if (set > 1) set = 0;

        }
    }
}

AES对称加密

//加密
function AESEncode(pw) {
    pw = CryptoJS.enc.Utf8.parse(pw);
    //密钥
    let key = CryptoJS.enc.Utf8.parse("mishi137");
    //偏移向量
    let iv = CryptoJS.enc.Utf8.parse("pianyi137");
    return CryptoJS.AES.encrypt(pw, key, {
        mode: CryptoJS.mode.CBC, // 加密模式
        padding: CryptoJS.pad.Pkcs7, // 填充方式
        iv: iv // 偏移向量
    }).toString();
}
//解密
function AESDecode(pw) {
    //密钥
    let key = CryptoJS.enc.Utf8.parse("mishi137");
    //偏移向量
    let iv = CryptoJS.enc.Utf8.parse("pianyi137");
    let code = CryptoJS.AES.decrypt(pw, key, {
        mode: CryptoJS.mode.CBC, // 加密模式
        padding: CryptoJS.pad.Pkcs7, // 填充方式
        iv: iv // 偏移向量
    }).toString(CryptoJS.enc.Utf8);
    console.log(code)
    return code;
}

页面加载

<style>
        /*页面加载开始*/
        .load {
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 35em;
            z-index: 999;
        }

        .loader {
            --path: #323641;
            --dot: #6a95bd;
            --duration: 1.5s;
            width: 55px;
            height: 55px;
            align-items: center;
            justify-items: center;
            position: relative;
        }
        .h-mes {
            width: 100%;
            height: 20%;
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-evenly;
            align-items: center;
        }
        .h-mes span {
            width: 100%;
            height: 10%;
            text-align: center;
        }
        .loader:before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            position: absolute;
            display: block;
            background: var(--dot);
            top: 37px;
            left: 19px;
            transform: translate(-18px, -18px);
        }

        .loader svg {
            display: block;
            width: 100%;
            height: 100%;
        }

        .loader svg polygon {
            fill: none;
            stroke: var(--path);
            stroke-width: 10px;
            stroke-linejoin: round;
            stroke-linecap: round;
        }

        .loader svg polygon {
            stroke-dasharray: 145 76 145 76;
            stroke-dashoffset: 0;
            animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
        }

        .loader.triangle {
            width: 48px;
        }

        .loader.triangle:before {
            left: 21px;
            transform: translate(-10px, -18px);
            animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
        }
        #noWait {
            color: rgba(51,51,51, 0.4);
            margin-top: 3em;
            cursor: pointer;
            display: none;
        }
        @keyframes pathTriangle {
            33% {
                stroke-dashoffset: 74;
            }

            66% {
                stroke-dashoffset: 147;
            }

            100% {
                stroke-dashoffset: 221;
            }
        }

        @keyframes dotTriangle {
            33% {
                transform: translate(0, 0);
            }

            66% {
                transform: translate(10px, -18px);
            }

            100% {
                transform: translate(-10px, -18px);
            }

        }
    </style>

    <body>
        <!-- 页面加载效果 -->
        <div class="load">
            <div class="loader triangle">
                <svg viewBox="0 0 86 80">
                    <polygon points="43 8 79 72 7 72"></polygon>
                </svg>
            </div>
            <div class="h-mes">
                <span id="chs">" 请稍等一会... "</span>
                <span>Please wait for a long time</span>
                <span id="noWait"><我不等啦！></span>
            </div>
        </div>
   </body>
   <script>
            const loader = document.querySelector('.load');
            const paper = document.querySelector('.paper');
            const ch_span = document.querySelector('.load .h-mes>#chs');
            const no_wait = document.querySelector('.load #noWait');
    
            const ch_array = ['" 或许再等一会.. "', '" 等待是为了更好的阅读体验 "', '" 就快加载完了 "', '" 还差一点... "', '" 感谢你的坚持 ! "']
            let i = 0, j = 0;
            let timer = setInterval(() => {
                ch_span.innerHTML = ch_array[i];
                i > 3 ? i = 0 : i ++;
                j > 5 ? no_wait.style.display = 'block' : j ++;
            }, 1800);
            window.addEventListener('load',showMain);
            no_wait.addEventListener('click', showMain);
    
            function showMain() {
                loader.style.display = 'none';
                paper.style.display = 'block';
                timer = null;
                // clearInterval();
            }
    </script>

ES6

function(){} --> () =>{}

fangfa:function(){} --> fangfa(){}

this 指向正在调用的函数

字符串拼接 --> `字符串${变量}`

定时函数计时的应用

var xh = setInterval(()=>{
            time++;
            $('').html(TimeFormat(time));
            },1000);
    var time = 0; //变量提升
    function TimeFormat(number){
            var minute = parseInt(number / 60);
            var second = parseInt(number % 60);
            var hour = parseInt(number / 3600);
            minute = minute >= 10 ? minute : '0' + minute;
            if(minute > 59){
                minute = parseInt(minute % 60);
            }
            second = second >= 10 ? second : '0' + second;
            hour = hour >= 10 ? hour : '0' + hour;
            if(hour > 23){
                hour = parseInt(hour % 24);
            }
            return hour + ":"+ minute + ":" + second;
        }

//定时器（适用于，时间在UI上分开的）
var second = 58;
    var minute = 58;
    var hour = 23;
    var time = setInterval(() => {
        second += 1;

        if (timeCycle(second) == 0) {
            second = 0;
            minute += 1;
            if (timeCycle(minute) == 0) {
                minute = 0;
                hour += 1;
                if (timeCycle(hour, 1) == 0) {
                    hour = 0;
                }
                $('.shi').html(timeCycle(hour, 1));
            }
            $('.fen').html(timeCycle(minute));
        }
        $('.miaoshu').html(timeCycle(second));
    }, 1);

    function timeCycle(n, a = 0) {
        if (n < 10) {
            return '0' + n;
        } else if (n > 9 && n < 60 && a == 0) {
            return n;
        } else if (n > 59 && a == 0) {
            return 0;
        }else if (n > 9 && n < 24 && a == 1) {
            return n;
        }else if (n > 23 && a == 1) {
            return 0;
        }
    };

vue真的很方便

转换utf-8

function toUtf8(str) {
    var out, i, len, c;
    out = "";
    len = str.length;
    for(i = 0; i < len; i++) {
        c = str.charCodeAt(i);
        if ((c >= 0x0001) && (c <= 0x007F)){
            out += str.charAt(i);
        } else if (c > 0x07FF) {
            out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
            out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));
            out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
        } else{
            out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));
            out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
        }
    }
    return out;
}
以下示例：

var str = toUtf8("啦啦啦德玛西亚！");

js文本转二维码

js文本转语音

函数其一:
function transText(text){
            var url = "http://tts.youdao.com/fanyivoice?le=zh&keyfrom=speaker-target&word='" +encodeURI(text);
            new Audio(url).play();
        }


函数其二:
        // getVoice(text);
            // setTimeout(()=>{
            //     bgm.play();
            // },300);
        function getVoice(text){
            $.ajax({
                method: 'GET',
                url: 'http://www.liulongbin.top:3006/api/synthesize',
                data: {
                    text: text
                },
                success:function(res){
                    console.log(res)
                    if(res.status === 200) {
                        $('#voice').attr('src',res.voiceUrl);
                    }else{
                        alert('请求失败');
                    }
                }
            })
        }

获取设备宽度及高度

let clientW = document.documentElement.clientWidth;
let clientH = document.documentElement.clientHeight;

gsap动画插件

CDN导入

<script src="./js/gsap.min.js"></script>
<script src="./js/ScrollTrigger.min.js"></script>

scrollTrigger插件

//创建时间线，时间线后的动画会依次播放
let t6 = gsap.timeline({
    //scrollTrigger 配置
    scrollTrigger: {
        //触发元素
        trigger: ".pageList",
        //开始执行动画，滚动条的位置
        start: "4200px",
        //动画的结束位置，与 scrub 有关，倒回滚动时会逆向播放。
        end: "4320px",
        // 触发时的动作
        toggleActions: "restart",
        //是否跟随鼠标滚动条的滚动，以及执行时间
        scrub: 1,
    }
});
//时间线的下一个动画，传递元素以及动画效果
//to 表示目标样式 / from 表示从何种样式变换
t6.to(".hw-1 img:nth-child(1)", {
    // xPercent: 50,
    opacity: 0,
    duration: 3,
    // x: -850
    scale: 0.6,
});
// 表示同时执行
gsap.from(".hw-1 img:nth-child(2)", {
    scrollTrigger: {
        trigger: ".pageList",
        start: "4200px",
        end: "4320px",
        toggleActions: "restart",
        scrub: 1,
    },
    opacity: 0,
    duration: 0.3,
    scale: 0.7,
});

Ajax

get

var xhr = new XMLHttpRequest();

xhr.open('GET','url');

xhr.send();

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.responseText)
    }
}

get加参数

xhr.open('GET','url?id=1&name=l');

post

var xhr = XMLHttpRequest();

xhr.open('POST','url');

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xhr.send('id=1&name=l');

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.responseText)
    }

}

jQuery Ajax

$.get(url,{data},function(res){
    console.log(res)
})

$.post(url,{data},function(res){
    console.log(res)
})

$.ajax({
    type: 'GET/POST',
    url:'',
    dataType:"jsonp",    //包含可解决跨域问题
    data:{
        text:text,
    },
    success: function(res){
        console.log(res)
    },
    error: function(res){
         console.log(res)
    }
})

百度翻译API

        var n = 'hello';
        var sui = Math.ceil(Math.random()*100000000000);  //产生随机数
        var si = '20220412001169490'+ n + sui + '6MVmVLtp9Hh7Hb2bKY2x'; //百度接口id及密匙

        var xx = md5(si);  //MD5编码后生成sign

        $.ajax({
            method: 'GET',
            url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
            data:{
                q:n,
                from:'auto',
                to:'auto',
                appid:'20220412001169490',
                salt:sui,
                sign:xx,
            },
            success:function(res){
                console.log(res.trans_result[0].src)
                console.log(res.trans_result[0].dst)
            },
        })

MD5编码

32 位小写
md5("test md5 加密")
//098f6bcd4621d373cade4e832627b4f6

32 位大写
md5("test md5 加密").toUpperCase()
//098F6BCD4621D373CADE4E832627B4F6

16 位小写
md5("test md5 加密").substring(8,24)
//4621d373cade4e83

16 位大写
md5("test md5 加密").substring(8,24).toUpperCase()
//4621D373CADE4E83


代码
function md5(string) {
    function md5_RotateLeft(lValue, iShiftBits) {
        return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits));
    }

    function md5_AddUnsigned(lX, lY) {
        var lX4, lY4, lX8, lY8, lResult;
        lX8 = (lX & 0x80000000);
        lY8 = (lY & 0x80000000);
        lX4 = (lX & 0x40000000);
        lY4 = (lY & 0x40000000);
        lResult = (lX & 0x3FFFFFFF) + (lY & 0x3FFFFFFF);
        if (lX4 & lY4) {
            return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
        }
        if (lX4 | lY4) {
            if (lResult & 0x40000000) {
                return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);
            } else {
                return (lResult ^ 0x40000000 ^ lX8 ^ lY8);
            }
        } else {
            return (lResult ^ lX8 ^ lY8);
        }
    }

    function md5_F(x, y, z) {
        return (x & y) | ((~x) & z);
    }

    function md5_G(x, y, z) {
        return (x & z) | (y & (~z));
    }

    function md5_H(x, y, z) {
        return (x ^ y ^ z);
    }

    function md5_I(x, y, z) {
        return (y ^ (x | (~z)));
    }

    function md5_FF(a, b, c, d, x, s, ac) {
        a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_F(b, c, d), x), ac));
        return md5_AddUnsigned(md5_RotateLeft(a, s), b);
    };

    function md5_GG(a, b, c, d, x, s, ac) {
        a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_G(b, c, d), x), ac));
        return md5_AddUnsigned(md5_RotateLeft(a, s), b);
    };

    function md5_HH(a, b, c, d, x, s, ac) {
        a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_H(b, c, d), x), ac));
        return md5_AddUnsigned(md5_RotateLeft(a, s), b);
    };

    function md5_II(a, b, c, d, x, s, ac) {
        a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_I(b, c, d), x), ac));
        return md5_AddUnsigned(md5_RotateLeft(a, s), b);
    };

    function md5_ConvertToWordArray(string) {
        var lWordCount;
        var lMessageLength = string.length;
        var lNumberOfWords_temp1 = lMessageLength + 8;
        var lNumberOfWords_temp2 = (lNumberOfWords_temp1 - (lNumberOfWords_temp1 % 64)) / 64;
        var lNumberOfWords = (lNumberOfWords_temp2 + 1) * 16;
        var lWordArray = Array(lNumberOfWords - 1);
        var lBytePosition = 0;
        var lByteCount = 0;
        while (lByteCount < lMessageLength) {
            lWordCount = (lByteCount - (lByteCount % 4)) / 4;
            lBytePosition = (lByteCount % 4) * 8;
            lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition));
            lByteCount++;
        }
        lWordCount = (lByteCount - (lByteCount % 4)) / 4;
        lBytePosition = (lByteCount % 4) * 8;
        lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition);
        lWordArray[lNumberOfWords - 2] = lMessageLength << 3;
        lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29;
        return lWordArray;
    };

    function md5_WordToHex(lValue) {
        var WordToHexValue = "", WordToHexValue_temp = "", lByte, lCount;
        for (lCount = 0; lCount <= 3; lCount++) {
            lByte = (lValue >>> (lCount * 8)) & 255;
            WordToHexValue_temp = "0" + lByte.toString(16);
            WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length - 2, 2);
        }
        return WordToHexValue;
    };

    function md5_Utf8Encode(string) {
        string = string.replace(/\r\n/g, "\n");
        var utftext = "";
        for (var n = 0; n < string.length; n++) {
            var c = string.charCodeAt(n);
            if (c < 128) {
                utftext += String.fromCharCode(c);
            } else if ((c > 127) && (c < 2048)) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            } else {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }
        }
        return utftext;
    };
    var x = Array();
    var k, AA, BB, CC, DD, a, b, c, d;
    var S11 = 7, S12 = 12, S13 = 17, S14 = 22;
    var S21 = 5, S22 = 9, S23 = 14, S24 = 20;
    var S31 = 4, S32 = 11, S33 = 16, S34 = 23;
    var S41 = 6, S42 = 10, S43 = 15, S44 = 21;
    string = md5_Utf8Encode(string);
    x = md5_ConvertToWordArray(string);
    a = 0x67452301;
    b = 0xEFCDAB89;
    c = 0x98BADCFE;
    d = 0x10325476;
    for (k = 0; k < x.length; k += 16) {
        AA = a;
        BB = b;
        CC = c;
        DD = d;
        a = md5_FF(a, b, c, d, x[k + 0], S11, 0xD76AA478);
        d = md5_FF(d, a, b, c, x[k + 1], S12, 0xE8C7B756);
        c = md5_FF(c, d, a, b, x[k + 2], S13, 0x242070DB);
        b = md5_FF(b, c, d, a, x[k + 3], S14, 0xC1BDCEEE);
        a = md5_FF(a, b, c, d, x[k + 4], S11, 0xF57C0FAF);
        d = md5_FF(d, a, b, c, x[k + 5], S12, 0x4787C62A);
        c = md5_FF(c, d, a, b, x[k + 6], S13, 0xA8304613);
        b = md5_FF(b, c, d, a, x[k + 7], S14, 0xFD469501);
        a = md5_FF(a, b, c, d, x[k + 8], S11, 0x698098D8);
        d = md5_FF(d, a, b, c, x[k + 9], S12, 0x8B44F7AF);
        c = md5_FF(c, d, a, b, x[k + 10], S13, 0xFFFF5BB1);
        b = md5_FF(b, c, d, a, x[k + 11], S14, 0x895CD7BE);
        a = md5_FF(a, b, c, d, x[k + 12], S11, 0x6B901122);
        d = md5_FF(d, a, b, c, x[k + 13], S12, 0xFD987193);
        c = md5_FF(c, d, a, b, x[k + 14], S13, 0xA679438E);
        b = md5_FF(b, c, d, a, x[k + 15], S14, 0x49B40821);
        a = md5_GG(a, b, c, d, x[k + 1], S21, 0xF61E2562);
        d = md5_GG(d, a, b, c, x[k + 6], S22, 0xC040B340);
        c = md5_GG(c, d, a, b, x[k + 11], S23, 0x265E5A51);
        b = md5_GG(b, c, d, a, x[k + 0], S24, 0xE9B6C7AA);
        a = md5_GG(a, b, c, d, x[k + 5], S21, 0xD62F105D);
        d = md5_GG(d, a, b, c, x[k + 10], S22, 0x2441453);
        c = md5_GG(c, d, a, b, x[k + 15], S23, 0xD8A1E681);
        b = md5_GG(b, c, d, a, x[k + 4], S24, 0xE7D3FBC8);
        a = md5_GG(a, b, c, d, x[k + 9], S21, 0x21E1CDE6);
        d = md5_GG(d, a, b, c, x[k + 14], S22, 0xC33707D6);
        c = md5_GG(c, d, a, b, x[k + 3], S23, 0xF4D50D87);
        b = md5_GG(b, c, d, a, x[k + 8], S24, 0x455A14ED);
        a = md5_GG(a, b, c, d, x[k + 13], S21, 0xA9E3E905);
        d = md5_GG(d, a, b, c, x[k + 2], S22, 0xFCEFA3F8);
        c = md5_GG(c, d, a, b, x[k + 7], S23, 0x676F02D9);
        b = md5_GG(b, c, d, a, x[k + 12], S24, 0x8D2A4C8A);
        a = md5_HH(a, b, c, d, x[k + 5], S31, 0xFFFA3942);
        d = md5_HH(d, a, b, c, x[k + 8], S32, 0x8771F681);
        c = md5_HH(c, d, a, b, x[k + 11], S33, 0x6D9D6122);
        b = md5_HH(b, c, d, a, x[k + 14], S34, 0xFDE5380C);
        a = md5_HH(a, b, c, d, x[k + 1], S31, 0xA4BEEA44);
        d = md5_HH(d, a, b, c, x[k + 4], S32, 0x4BDECFA9);
        c = md5_HH(c, d, a, b, x[k + 7], S33, 0xF6BB4B60);
        b = md5_HH(b, c, d, a, x[k + 10], S34, 0xBEBFBC70);
        a = md5_HH(a, b, c, d, x[k + 13], S31, 0x289B7EC6);
        d = md5_HH(d, a, b, c, x[k + 0], S32, 0xEAA127FA);
        c = md5_HH(c, d, a, b, x[k + 3], S33, 0xD4EF3085);
        b = md5_HH(b, c, d, a, x[k + 6], S34, 0x4881D05);
        a = md5_HH(a, b, c, d, x[k + 9], S31, 0xD9D4D039);
        d = md5_HH(d, a, b, c, x[k + 12], S32, 0xE6DB99E5);
        c = md5_HH(c, d, a, b, x[k + 15], S33, 0x1FA27CF8);
        b = md5_HH(b, c, d, a, x[k + 2], S34, 0xC4AC5665);
        a = md5_II(a, b, c, d, x[k + 0], S41, 0xF4292244);
        d = md5_II(d, a, b, c, x[k + 7], S42, 0x432AFF97);
        c = md5_II(c, d, a, b, x[k + 14], S43, 0xAB9423A7);
        b = md5_II(b, c, d, a, x[k + 5], S44, 0xFC93A039);
        a = md5_II(a, b, c, d, x[k + 12], S41, 0x655B59C3);
        d = md5_II(d, a, b, c, x[k + 3], S42, 0x8F0CCC92);
        c = md5_II(c, d, a, b, x[k + 10], S43, 0xFFEFF47D);
        b = md5_II(b, c, d, a, x[k + 1], S44, 0x85845DD1);
        a = md5_II(a, b, c, d, x[k + 8], S41, 0x6FA87E4F);
        d = md5_II(d, a, b, c, x[k + 15], S42, 0xFE2CE6E0);
        c = md5_II(c, d, a, b, x[k + 6], S43, 0xA3014314);
        b = md5_II(b, c, d, a, x[k + 13], S44, 0x4E0811A1);
        a = md5_II(a, b, c, d, x[k + 4], S41, 0xF7537E82);
        d = md5_II(d, a, b, c, x[k + 11], S42, 0xBD3AF235);
        c = md5_II(c, d, a, b, x[k + 2], S43, 0x2AD7D2BB);
        b = md5_II(b, c, d, a, x[k + 9], S44, 0xEB86D391);
        a = md5_AddUnsigned(a, AA);
        b = md5_AddUnsigned(b, BB);
        c = md5_AddUnsigned(c, CC);
        d = md5_AddUnsigned(d, DD);
    }
    return (md5_WordToHex(a) + md5_WordToHex(b) + md5_WordToHex(c) + md5_WordToHex(d)).toLowerCase();
}

复制内容

首先在HTML文件中包含

<textarea id="input" style="width: 0px; height: 0px;"></textarea>

在js中编写

 function copyText() {
          var text = dom.html();    //想要复制的内容
          var textarea = document.getElementById("input");
          textarea.value = text; // 修改文本框的内容
          textarea.select(); // 选中文本
          document.execCommand("copy"); // 执行浏览器复制命令
          alert("复制成功");
        };

连点键盘事件

let ot = 0;
    document.onkeydown = (e) => {        //键盘点击事件
        if(e.keyCode == 8){

            let nt = new Date().getTime();
            let ct = nt - ot;
            if (ct > 0 && ct < 150) {    //调整连点的时间端
                document.getElementsByTagName('textarea')[0].value = '';
            }
        
            ot = nt;   //记录第一次点击时间
        }
    }
    //常用keycode
    

数字以时间格式化

function TimeFormat(number){
            var minute = parseInt(number / 60);
            var second = parseInt(number % 60);
            var hour = parseInt(number / 3600);
            minute = minute >= 10 ? minute : '0' + minute;
            if(minute > 59){
                minute = parseInt(minute % 60);
                minute = minute >= 10 ? minute : '0' + minute;
            }
            second = second >= 10 ? second : '0' + second;
            hour = hour >= 10 ? hour : '0' + hour;
            if(hour > 23){
                hour = parseInt(hour % 24);
            }
            return hour + ":"+ minute + ":" + second;
        }