日期对象实现计时

一、正计时

标签：

<div id="box"></div>

样式：

        #box {

            width: 800px;

            height: 100px;

            background: black;

            margin: 200px auto;

            color: white;

            font-size: 40px;

            text-align: center;

            line-height: 100px;

        }

JavaScript代码

        function showTime() {
            var date = new Date();
            console.log(date);//现在的时间
            var d = new Date('2024 1 11 12:00:00');//2024/1/11 12:00:00   2024-1-11 12:00:00  2024 1 11 12:00:00
            console.log(d);
            var d = new Date(2024, 1, 10, 15, 30, 50);
            console.log(d);

            //方法
            var date = new Date();
            var year = date.getFullYear();
            console.log(year);

            var month = date.getMonth() + 1;//0~11 —— +1变成1~12
            console.log(month);

            var day = date.getDate();//1~31
            console.log(day);

            var week = date.getDay();//0~6
            console.log(week);
            //数字转汉字
            var arr = ['日', '一', '二', '三', '四', '五', '六'];
            week = arr[week];

            var hours = date.getHours();//0~23
            console.log(hours);

            var minutes = date.getMinutes();//0~59
            console.log(minutes);

            var seconds = date.getSeconds();//0~59
            console.log(seconds);

            //一位转两位
            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;
            hours = hours < 10 ? '0' + hours : hours;
            minutes = minutes < 10 ? '0' + minutes : minutes;
            seconds = seconds < 10 ? '0' + seconds : seconds;

            //getTime()  返回1970年1月1日至今的毫秒数
            console.log(date.getTime());
            console.log(d.getTime());
            console.log(+date);
            console.log(+d);
            /* 一位转两位
               星期的数字转汉字
            */

            // 拼接时间字符串
            var time = `${year}年${month}月${day}日 星期${week} ${hours}时${minutes}分${seconds}秒`;
            // console.log(time);

            document.querySelector('#box').innerHTML = time;
        }
        showTime();//*****

        //怎么走起来？加定时器
        //周期调用 setInterval(回调函数，1000)  每一秒都启动定时函数，并调用回调函数，第一次执行也是间隔毫秒数之后执行，之后每间隔毫秒数就执行一次
        //延迟调用 setTimeout(回调函数，1000)  1秒后启动定时器函数，并调用回调函数，只执行一次

        setInterval(function(){
            showTime();
        },1000)

二、倒计时

标签

    <div id="box">

        <span></span>天<span></span>时<span></span>分<span></span>秒

    </div>

样式

        *{

            margin: 0;

            padding: 0;

        }

        #box{

            text-align: center;

            margin: 200px;

        }

        span{

            padding: 20px 25px;

            display: inline-block;

            background: black;

            color: white;

            font-size: 24px;

            margin: 0 10px;

        }

 JavaScript代码

        function daojishi(date) {
            var sDate=+new Date();
            var eDate=+new Date(date);
            var diff=parseInt((eDate-sDate)/1000);

            if(diff<=0){
                clearInterval(timer);
                var spans=document.querySelectorAll('#box span');
                spans[0].innerHTML='00';
                spans[1].innerHTML='00';
                spans[2].innerHTML='00';
                spans[3].innerHTML='00';
            }else{
                d=parseInt(diff/60/60/24);
                h=parseInt(diff/60/60)%24;
                m=parseInt(diff/60)%60;
                s=diff%60;

                d=d<10?'0'+d:d;
                h=h<10?'0'+h:h;
                m=m<10?'0'+m:m;
                s=s<10?'0'+s:s;

                var spans=document.querySelectorAll('#box span');
                spans[0].innerHTML=d;
                spans[1].innerHTML=h;
                spans[2].innerHTML=m;
                spans[3].innerHTML=s;
            }
        }
        daojishi('2024-2-19 12:00:00');
        var timer=setInterval(function(){
            daojishi('2024-2-19 12:00:00');
        },1000);