JS零碎知识记录

//使用setTimeout递归实现setInterval
    setTimeout和setInterval的区别：setInterval的执行机制是每到一
    定时间就固定地往队列里面推执行函数，而不会管之前的事件是否执行完，而
    一旦执行的某些事件如：比较耗时的DOM操作等事件，而时间间隔又特别短时，
    就会导致后面的事件不等前面的执行完就会再次去执行，长时间的执行，积累
    就会导致任务过多，卡顿，使用setTimeout的递归写法来模拟setInterval，
    可以在一定程度上解决掉这个长时间运行的卡顿问题，因为setTimeout的执行
    机制是等待上次的任务执行完才会去再次执行这个，但是这个方法可能也不够完
    善，长时间的运行可能会积累很多东西，
        var index = 0;
        var setTime= null;
        var setFun = function () {
            clearTimeout(setTime);
            setTime = setTimeout(function () {
                console.log(index);
                index ++;
                setFun();
            },200)
        };
        setFun();

//传入秒数返回时分秒
    function formatTime(s) {
        var hour = parseInt( s/3600 ),minute = parseInt((s % 3600) /60),second = parseInt( s%60 );
        return (hour < 10 ? "0" + hour : hour) + ":" + (minute < 10 ? "0" + minute : minute) + ":" + (second < 10 ? "0" + second : second);
    }
    console.log(formatTime(3666)); // 返回 01:01:06

//传入时间返回时分秒
    function time(start,end){  //默认结束时间大于开始时间，传空为当前时间
        var startTime, endTime;
        endTime = startTime = new Date().getTime();
        function formatTime(t) {
            var time = t;  //start时间格式如果如：2019-08-08 20:08:08这样的格式，在某些机型会报错，
            time = time.replace(/-/g, ':').replace(' ', ':');
            time = time.split(':');  //转换成[2019,8,8,20,8,8]
            return new Date(time[0], (Number(time[1]) - 1), time[2], time[3], time[4], time[5]).getTime();
        }
        if (start.length > 0)startTime = formatTime(start);
        if (end.length > 0) endTime = formatTime(end);

        var s = (endTime - startTime) / 1000;
        if (s <= 0) return '00:00:00';
        var hour = parseInt(s / 3600);
        var minute = parseInt((s % 3600) / 60);
        var second = parseInt(s % 60);
        return (hour < 10 ? "0" + hour : hour) + ":" + (minute < 10 ? "0" + minute : minute) + ":" + (second < 10 ? "0" + second : second);
    }
    console.log(time('','2019-3-29 12:00:00'));  //返回倒计时 10:10:10

//html和DOM的区别
    
    setInterval(function () {
        console.log(document.getElementById('input').getAttribute('value'));
        console.log(document.getElementById('input').value);
        console.log($('#input').val());
        //加入输入456，则打印出来为
        //123       //打印的html属性值，不能更改
        //123456    //打印的DOM值，可以更改
        //123456    //打印的DOM值，可以更改
    },2000)