【小工具】简单的倒计时（原生）

最新推荐文章于 2025-03-20 12:28:32 发布

邹大叔

最新推荐文章于 2025-03-20 12:28:32 发布

阅读量1k

点赞数

分类专栏：小工具

本文链接：https://blog.csdn.net/zuncle/article/details/54950765

版权

小工具专栏收录该内容

8 篇文章

订阅专栏

这里写图片描述

1、第一种

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>倒计时</title>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">

window.onload=clock;
function clock(){
var today=new Date(),//当前时间
        h=today.getHours(),
        m=today.getMinutes(),
        s=today.getSeconds();

    var stopTime=new Date("Feb 9 2017 00:00:00"),//结束时间
        stopH=stopTime.getHours(),
        stopM=stopTime.getMinutes(),
        stopS=stopTime.getSeconds();

    var shenyu=stopTime.getTime()-today.getTime(),//倒计时毫秒数
        shengyuD=parseInt(shenyu/(60*60*24*1000)),//转换为天
        D=parseInt(shenyu)-parseInt(shengyuD*60*60*24*1000),//除去天的毫秒数
        shengyuH=parseInt(D/(60*60*1000)),//除去天的毫秒数转换成小时
        H=D-shengyuH*60*60*1000,//除去天、小时的毫秒数
        shengyuM=parseInt(H/(60*1000)),//除去天的毫秒数转换成分钟
        M=H-shengyuM*60*1000;//除去天、小时、分的毫秒数
        S=parseInt((shenyu-shengyuD*60*60*24*1000-shengyuH*60*60*1000-shengyuM*60*1000)/1000)//除去天、小时、分的毫秒数转化为秒
        document.getElementById("div").innerHTML=(shengyuD+"天"+shengyuH+"小时"+shengyuM+"分"+S+"秒"+"<br>");
        // setTimeout("clock()",500);
        setTimeout(clock,500);
}   
</script>
</body>
</html>

2、第二种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js倒计时</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        p {
            font-size: 80px;
            text-align: center;
        }

        p span {
            color: red;
        }

        p span.time {
            color: black
        }
        body{padding-top:200px;}
    </style>
</head>
<body>
<p>距离2018年还有</p>
<p><span></span></p>
<script>
    var oSpan = document.getElementsByTagName('span')[0];
    function tow(n) {
        return n >= 0 && n < 10 ? '0' + n : '' + n;
    }
    function getDate() {
        var oDate = new Date();//获取日期对象
        var oldTime = oDate.getTime();//现在距离1970年的毫秒数
        var newDate = new Date('2018/1/1 00:00:00');
        var newTime = newDate.getTime();//2018年距离1970年的毫秒数
        var second = Math.floor((newTime - oldTime) / 1000);//未来时间距离现在的秒数
        var day = Math.floor(second / 86400);//整数部分代表的是天；一天有24*60*60=86400秒 ；
        second = second % 86400;//余数代表剩下的秒数；
        var hour = Math.floor(second / 3600);//整数部分代表小时；
        second %= 3600; //余数代表 剩下的秒数；
        var minute = Math.floor(second / 60);
        second %= 60;
        var str = tow(day) + '<span class="time">天</span>'
                + tow(hour) + '<span class="time">小时</span>'
                + tow(minute) + '<span class="time">分钟</span>'
                + tow(second) + '<span class="time">秒</span>';
        oSpan.innerHTML = str;
    }
    getDate();
    setInterval(getDate, 1000);
</script>
</body>
</html>