二十一、JS日期对象方法实现倒计时效果

一、知识点：

Date 对象方法：

常用的获取日期对象方法：

getDate() 日，从 Date 对象返回一个月中的某一天 (1 ~ 31)。

getDay() 周，从 Date 对象返回一周中的某一天 (0 ~ 6)。

getFullYear() 年，从 Date 对象以四位数字返回年份。

getHours() 时，返回 Date 对象的小时 (0 ~ 23)。

getMonth() 月，从 Date 对象返回月份 (0 ~ 11)。

getSeconds() 秒，返回 Date 对象的秒数 (0 ~ 59)。

getTime() 距离毫秒数，返回 1970 年 1 月 1 日至今的毫秒数。

getYear() 已废弃。请使用 getFullYear() 方法代替。

常用的设置日期对象方法：

setDate() 日，设置 Date 对象中月的某一天 (1 ~ 31)。

setFullYear() 年，设置 Date 对象中的年份（四位数字）。

setHours() 时，设置 Date 对象中的小时 (0 ~ 23)。

setMinutes() 分钟，设置 Date 对象中的分钟 (0 ~ 59)。

setMonth() 月，设置 Date 对象中月份 (0 ~ 11)。

setSeconds() 秒，设置 Date 对象中的秒钟 (0 ~ 59)。

setTime() 毫秒，setTime() 方法以毫秒设置 Date 对象。

转换为字符串：

toString() 把 Date 对象转换为字符串。

toTimeString() 把 Date 对象的时间部分转换为字符串。

二、实现思路

使用getTime()获取目标时间和当前时间相对于1970的时间距离，求两者差值得当前时间距目标时间差，利用除法、取余转换出天，时，分，秒打印到html内容中即可；

注意：1.getTime(）获取的是毫秒，需要对其除以1000得到秒；

2.对转换好的时间要进行取整处理；

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <style>
        *{margin: 0;padding: 0;}
        .box{
            width: 100px;
            height: 150px;
            background-color: black;
            color: white;
            font-size: 30px;
            text-align: center;
            float: left;
            margin: 10px 5px;
            line-height: 150px;
        }
    </style>
    <script>
        window.onload=function(){
            var godate=new Date("2018-5-30 12:00");
            var box=document.getElementsByClassName("box");

            setInterval(Time,1000);

            //封装为方法
            function Time(){
                var nowdate=new Date();
                var time=parseInt((godate.getTime()-nowdate.getTime())/1000);
                if(time<=0){
                    box[0].innerHTML="计";
                    box[1].innerHTML="时";
                    box[2].innerHTML="结";
                    box[3].innerHTML="束";
                }
                var sec=parseInt(time%60);
                var min=parseInt(time/60%60);
                var hour=parseInt(time/3600%24);
                var day=parseInt(time/(3600*24));
                box[0].innerHTML=day+"天";
                box[1].innerHTML=hour+"时";
                box[2].innerHTML=min+"分";
                box[3].innerHTML=sec+"秒";
            }
        }
    </script>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>

二十一、JS日期对象方法实现倒计时效果

猜你喜欢