计时效果

最新推荐文章于 2023-03-11 14:25:55 发布

明天早晨喝牛奶

最新推荐文章于 2023-03-11 14:25:55 发布

阅读量228

点赞数

分类专栏： js事件集中营效果片段集合

本文链接：https://blog.csdn.net/qq_40289292/article/details/78226536

版权

效果片段集合同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

js事件集中营

11 篇文章 0 订阅

订阅专栏

难点：
1、判断游戏是否暂停。
2、游戏暂停时需要达成的效果：游戏暂停时，开始按钮被启用；提取暂停时的倒计时值赋给暂停时的总时长；获得暂停时的及时时间，var i= new Date();判断暂停按钮是否被按下，更改iszt的布尔值；继续按钮被按下时，调用继续游戏的方法；
3、游戏继续方法和倒计时方法相同，只是需要重新获取一个及时时间和更改后的总时长。
4、注意获取的时间的数值类型。
5、注意在适合的方法内清除计时器。


<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script>
        var game_time; //游戏总时长
        var game_djs; //游戏倒计时
        var djs_span; //显示倒计时
        var startBtn;
        var game_start; //游戏开始时间
        var id; //计时器
        var zt_time; //暂停时的倒计时值
        var isZT = false;
        var jx_id; //继续游戏的倒计时id
        window.onload = function() {
             djs_span = document.getElementById("spa");
            var zt = document.getElementById("zt");
            startBtn = document.getElementById("btn");
            zt.disabled=true;
            document.getElementById("stop").disabled=true;
            startBtn.onclick = function() {
                clearTimeout(jx_id);
                if(isZT) {
                    var reset = confirm("您的游戏正在进行中，您确定重新开始吗？")
                    if(reset) {
                        zt.textContent="暂停游戏";
                        isZT = false;
                    } else {
                        return;
                    }

                }
                game_time = document.getElementById("a").value * 60;
                 game_start = new Date();
                startBtn.disabled = true;
                djs();
                zt.disabled=false;
            document.getElementById("stop").disabled=false;
            }

            document.getElementById("stop").onclick = function() {
                stopgame();
                startBtn.disabled = false;

                    var reset = confirm("您的游戏正在进行中，您确定结束游戏吗？")
                    if(reset) {
                        zt.textContent="暂停游戏";
                        isZT = false;
                        zt.disabled=true;
                        document.getElementById("stop").disabled=true;
                    } else {
                    return;
                    }


            }
            zt.onclick = function() {
                ztt(); 
                if(isZT) {
                    zt.textContent = "暂停游戏";
                    isZT = false;
                     game_start = new Date();
                     startBtn.disabled = true;
                    jx();
                } else {
                    zt.textContent = "继续游戏";
                    isZT = true;
                    startBtn.disabled = false;
                     zt_time = game_djs;
                    ztt();

                }
            }
        }

        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("游戏结束");
                zt.disabled=true;
            document.getElementById("stop").disabled=true;
            }

        }
    function ztt() {
            clearTimeout(id);
            clearTimeout(jx_id);
        }


        function jx() {
            var playing = new Date();
            game_djs =  zt_time - parseInt((playing -  game_start) / 1000);
            jx_id = setTimeout("jx()", 1000);
            djs_span.innerHTML =game_djs;
            if(game_djs < 1) {
                clearTimeout(jx_id);
                alert("游戏结束");
                zt.disabled=true;
            document.getElementById("stop").disabled=true;
            }
        }

        function stopgame() {
            clearTimeout(id);
            clearTimeout(jx_id);
            game_djs = 0;
            djs_span.innerHTML = game_djs;
        }
    </script>

    <body>
        游戏时间：<input type="text" id="a" value="2" />分钟<br/> 游戏倒计时：
        <span id="spa"></span>秒<br/>
        <button id="btn">开始游戏</button>
        <button id="zt">暂停游戏</button>
        <button id="stop">游戏结束</button>

    </body>

</html>

明天早晨喝牛奶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
计时效果

难点： 1、判断游戏是否暂停。 2、游戏暂停时需要达成的效果：游戏暂停时，开始按钮被启用；提取暂停时的倒计时值赋给暂停时的总时长；获得暂停时的及时时间，var i= new Date();判断暂停按钮是否被按下，更改iszt的布尔值；继续按钮被按下时，调用继续游戏的方法； 3、游戏继续方法和倒计时方法相同，只是需要重新获取一个及时时间和更改后的总时长。 4、注意获取的时间的数值类型。 5、
复制链接

扫一扫