倒计时

最新推荐文章于 2022-03-27 20:51:10 发布

繁花落雨

最新推荐文章于 2022-03-27 20:51:10 发布

阅读量249

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/csdn2479993071/article/details/78192953

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这里写图片描述


<!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>

繁花落雨

关注

1
点赞
踩
0

收藏

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

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> button:hover{ cursor: pointer; } </style>
复制链接

扫一扫