JavaScript例子——倒计时功能实现

最新推荐文章于 2022-12-04 00:31:30 发布

yufanhui

最新推荐文章于 2022-12-04 00:31:30 发布

阅读量305

点赞数

分类专栏： javascript DOM BOM 文章标签： countdown 截止

本文链接：https://blog.csdn.net/yufanhui/article/details/81021109

版权

javascript 同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

DOM

21 篇文章 0 订阅

订阅专栏

BOM

16 篇文章 0 订阅

订阅专栏

思路解析：

想要实现倒计时功能，就要知道时间对象的一个方法getTime();这个方法返回的是getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。

示意图：在nowTime 和endTime 之间的就是剩余的总时间，只要把这个时间转化成“时分秒”这样的格式就行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>countdown</title>
</head>
<body>
    距离2018/07/13 12:00:00 还有：
    <div id="timer"></div>
    <script type="text/javascript">
        //截至时间2018/07/13 12:00:00

    //现在-1970 的时间 - 截至-1970的时间  得到的是毫秒数,再把毫秒数转化成数字。
    function getTime(){
        var endTime = new Date("2018/07/13 12:00:00");//截至时间
        var nowTime = new Date();//现在时间
        // console.log(nowTime);
        // console.log(date);
        endTime.getTime();//截至时间-1970 的毫秒数,是数字。
        nowTime.getTime();//现在时间-1970 的毫秒数，数字。
        // console.log(endTime.getTime());
        // console.log(nowTime.getTime());
        var timeInterval = endTime.getTime() - nowTime.getTime();//截止时间到现在时间的毫秒数
        // console.log(timeInterval);
        timeInterval = timeInterval / 1000;//把毫秒转化成秒。
        // console.log(timeInterval);
        var hours = parseInt(timeInterval/3600);//把秒转化成小时
        // console.log(hours);
        var minutes = parseInt(timeInterval/60)%60;//把秒转化成分钟
        // console.log(minutes);
        var seconds = parseInt(timeInterval % 60);//转化成秒
        // console.log(seconds);
        // document.write(hours + ":" + minutes + ":" + seconds);
        var time = document.getElementById("timer");
        // console.log(time);
        time.innerHTML = hours + ":" + minutes + ":" + seconds;
        setTimeout(getTime,1000);
    }
    getTime();
    
    </script>
</body>
</html>

yufanhui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript例子——倒计时功能实现

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫

专栏目录