计时效果

难点:
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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值