JavaScript——计时器之倒计时

来源：互联网发布：淘宝开店培训视频编辑：程序博客网时间：2024/05/19 14:39
这是我们平时做游戏时候运用的游戏倒计时样式
JS倒计时
下面是代码部分作参考：
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            button:hover{                cursor: pointer;            }        </style>        <script>            //1.获取游戏的总时间 60秒            //2.游戏开始的时间   01            //3.游戏进行时   10            //4. 游戏进行时 - 游戏开始时间  =  玩家游戏时长            //5. 游戏总时间 - 玩家游戏时长 = 游戏倒计时            var game_time;//游戏总时长            var game_start;//游戏开始时间            var djs_span;//显示倒计时            var id;//计时器id            var game_djs;//游戏倒计时            var isZT = false;//判断是否为暂停，false表示未点击暂停            var zt_time;//暂停时的倒计时值            var jx_id;//继续游戏的倒计时id            var startBtn;//游戏开始按钮            window.onload = function(){                djs_span = document.getElementById("djs");                //暂停游戏                var zt = document.getElementById("zt");                //开始游戏                startBtn = document.getElementById("btn");                startBtn.onclick = function(){                    clearTimeout(jx_id);                    if(isZT){                        var reset = confirm("您的游戏正在进行中，确定要重新开始吗？");                        if(reset){                            zt.textContent = "暂停游戏";                            isZT = false;                        }else{                            return;                        }                    }                    //获取游戏总时长                    game_time = document.getElementById("time").value*60;                    //记录游戏开始时间                    game_start = new Date();                    //禁用开始按钮                    startBtn.disabled = true;                    djs();                }                //停止游戏                document.getElementById("stop").onclick = function(){                    game_stop();                    //还原开始按钮                    startBtn.disabled = false;                }                zt.onclick = function(){                    game_zt();                    if(isZT){                        //点击继续按钮                        zt.textContent = "暂停游戏";                        isZT = false;                        //禁用开始按钮                        startBtn.disabled = true;                        //记录继续游戏开始时间                        game_start = new Date();                        game_jx();                    }else{                        //点击暂停按钮                        zt.textContent = "继续游戏";                        isZT = true;                        //还原开始按钮                        startBtn.disabled = false;                        //记录暂停时间                        zt_time = game_djs;                        game_zt();                    }                }            }            //倒计时方法            function djs(){                //获取游戏进行时                var playing = new Date();                game_djs = game_time - parseInt((playing - game_start)/1000);                djs_span.innerHTML = game_djs;                id = setTimeout("djs()",1000);//步长                //游戏结束                if(game_djs<1){                    clearTimeout(id);                    alert("游戏结束");                }            }            //暂停游戏            function game_zt(){                clearTimeout(id);                clearTimeout(jx_id);            }            //继续游戏            function game_jx(){                //获取游戏进行时                var playing = new Date();                game_djs = zt_time - parseInt((playing - game_start)/1000);                djs_span.innerHTML = game_djs;                jx_id = setTimeout("game_jx()",1000);//步长                //游戏结束                if(game_djs<1){                    clearTimeout(jx_id);                    alert("游戏结束");                }            }            //游戏结束            function game_stop(){                clearTimeout(id);                clearTimeout(jx_id);                game_djs = 0;                djs_span.innerHTML = game_djs;            }        </script>    </head>    <body>        游戏时长：<input id="time" type="text" size="5px" value="1" />分钟<br />        游戏倒计时：<span id="djs"></span>秒<br />        <button id="btn">开始游戏</button>        <button id="zt" >暂停游戏</button>        <button id="stop">停止游戏</button>    </body></html>
阅读全文
0 0