倒计时

Posted 敢问

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了倒计时相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>北京时间</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
        color: red;
    }
    #time,#time2,#time3{
        width: 800px;
        height: 100px;
        line-height: 100px;
        font-size: 30px;
        font-family: "微软雅黑";
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.4);
        box-shadow: 0px 0px 10px #000;
        text-align: center;
    }
    #time{
        top: 0;
    }
    #time2{
        top: 30%;
    }
    #time3{
        top: -30%;
    }
</style>
<body>
    <div id="time"></div>
    <div id="time2"></div>
    <div id="time3"></div>
</body>
<script>
    window.onload = function(){
        times();
        function times(){
            showTime();    
            function minSecond(i){
                if(i<10){
                    i = "0" + i; 
                }
                return i;
            }
            function showTime(){
                var bjtime = new Date();
                var bjyear = bjtime.getFullYear();
                var bjmonth = bjtime.getMonth()+1;
                var bjday = bjtime.getDate();
                var week = bjtime.getDay();
                var hours = bjtime.getHours();
                var min = bjtime.getMinutes();
                var seconds = bjtime.getSeconds();
                min = minSecond(min);
                seconds = minSecond(seconds);
                var weekday = ["日","一","二","三","四","五"];
                
                document.getElementById("time").innerHTML ="现在是北京时间：" + bjyear +"年-"+ bjmonth +"月-"+ bjday +"日-" + "星期" + weekday[week] + "-" + hours +":" + min +":"+ seconds  ;
                setInterval(showTime,1000);
            }
        }

        var curtime = new Date();
        var endtime = new Date("2016,10,1");
        var lefttimeday = Math.floor((endtime.getTime() - curtime.getTime())/(24*60*60*1000));
        document.getElementById("time2").innerHTML = "距离国庆还有：" + lefttimeday + "天";




        showTime2();
        
        function showTime2(){
            var nowtime = new Date();
            var endtime2 = new Date("2017/1/1,00:00:00");
            var chatime = parseInt((endtime2.getTime() - nowtime.getTime())/1000);
            var d = parseInt(chatime/(24*60*60));
            var h = parseInt(chatime/(60*60)%24);
            var m = parseInt(chatime/60%60);
            var s = parseInt(chatime%60);
            document.getElementById("time3").innerHTML = "距离元旦还有：" + d + "天" + h + "小时" + m + "分钟" + s + "秒"; 
            if(chatime<=0){
                document.getElementById("time3").innerHTML = "身份证到期了";
            }else{
                setInterval(showTime2,1000);
            }
        }
    }
</script>
</html>

技术分享

以上是关于倒计时的主要内容，如果未能解决你的问题，请参考以下文章

如何在使用片段和计时器的选项卡式活动上更新 UI

如何实现React原生倒计时圈

自动刷新android片段，直到满足条件

如果用户没有使用浏览器，则jQuery计时器停止

颤振计时器仅更新秒小部件

#yyds干货盘点#愚公系列2023年02月 .NET/C#知识点-程序运行计时的总结