javascript 简单时间倒计时。

Posted

tags:

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

给一个新人讲解时随手写的demo~

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>倒计时</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        function getTimeStr(time)
        {
            var d=Math.floor(time/86400);
            time=time-d*86400;
            var h=Math.floor(time/3600);
            time=time-h*3600;
            var m=Math.floor(time/60);
            time=time-m*60;
            var s=time
            if (h<10) h="0"+h;
            if (m<10) m="0"+m;
            if (s<10) s="0"+s;
            return d+"天"+h+":"+m+":"+s
        }
        var leftTime=0;
        var timer=null;
        function timeStep()
        {
            leftTime=leftTime-1;
            $("#leftTime").html(getTimeStr(leftTime));
            if (leftTime==0)
            {
                alert("时间到拉。")
                clearTimeout(timer)
                timer=null;
            }
            else
            {
                timer=setTimeout(timeStep,1000);
            }
        }
        $(function(){
            $(document).on("click","#beginBtn",function(){
                var beginTime=$("#time").val();
                if (beginTime==""){
                    beginTime=0;
                }
                leftTime=beginTime;
                $("#leftTime").html(getTimeStr(leftTime));

                if (timer||beginTime==0) return
                timer=setTimeout(timeStep,1000)
            });
        });
    </script>
</head>
<body>    
    <span id="leftTime" style="min-height: 50px;line-height:50px;display:block;">00:00:00</span>
    <input type="number" id="time" / >
    <button id="beginBtn">开始倒计时</button>
</body>
</html>

 

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

超级简单JS网页倒计时代码

简单的 Javascript http 请求片段但不起作用

javascript 简单时间倒计时。

初学JavaScript之利用计时器做出的简单时钟

如何在 html div 的代码中显示 javascript 计时器？

ASP网页上的倒计时代码，要求可以防刷新的