js--将一个固定时间改变为倒计时

最新推荐文章于 2022-10-30 15:59:02 发布

人生如初见_张默

最新推荐文章于 2022-10-30 15:59:02 发布

阅读量384

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_42176520/article/details/103682471

版权

JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript将一个固定时间转化为实时更新的倒计时。通过设置定时器和日期对象的操作，可以动态显示距离目标时间的剩余秒数。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jQuery/jquery-1.8.3.min.js"></script>
    <style type="text/css">
        input{
            background-color: #9fc5f1;
            width: 100px; 
            height: 30px; 
            line-height: 30px; 
            text-align: center; 
            color: #fff; 
            font-size:14px; 
            font-weight: bold;
        }
        #time p{
            color: #1f6dc2;
            font-size: 48px; 
            font-weight: bold;
            margin-left:90px;
            margin-bottom:0px;
        }
    </style>
    <script type="text/javascript">
            var shijian=3600;//可以将获取到的时间转换为时间戳
            var time;

            //为btn1绑定点击事件
            window.onload = function() {
                document.getElementById('btn1').addEventListener('click',function() {
                    setTimeout('start()',1000);
                },false);
            };

            function start() {
                time=setInterval('count()',1000);//返回值time只是为了需要暂停的时候                  clearInterval(time)清除时间间隔
            };
    
            function count() {
                if(shijian<0){
                    alert("time out");
                    pause();//一般情况下这个if条件是用来提交数据用的,这里只是测试一下。
                }else{
                    shijian--;
                    document.getElementById('time').innerHTML = (Math.floor(shijian/60)+":"+shijian%60);//这里用到将毫秒转换到时分格式
                    
                    console.info(time);
                }
            };

            function pause(){
            clearInterval(time);
            };

            function goOn(){
                time = setInterval('count()',1000);//重新设置时间间隔
            };
    </script>
</head>
<body>
<div>
    <p id='time'>00:00</p>
    <input id="btn1" type="button" value="开始"/>
    <input type="button" value="暂停" onclick="pause()"/>
    <input type="button" value="继续" onclick="goOn()"/>
</div>
</body>
</html>