用javaScript实现游戏倒计时

最新推荐文章于 2024-03-15 18:03:57 发布

Z_唐

最新推荐文章于 2024-03-15 18:03:57 发布

阅读量1k

点赞数

分类专栏：前端 javaScript 文章标签： javascript

本文链接：https://blog.csdn.net/xmz1996/article/details/78191946

版权

javaScript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

<html>

    <head>
        <meta charset="utf-8" />
        <title></title>

        <style>
            button:hover {
                cursor: pointer;
            }
        </style>

        <script>
            //1.获取游戏的总时间 
            //2.游戏开始的时间   
            //3.游戏进行时   
            //4. 游戏进行时 - 游戏开始时间  =  玩家游戏时长
            //5. 游戏总时间 - 玩家游戏时长 = 游戏倒计时

            var zt;
            var startBtn;       
            var djs_span;
            var game_time; //游戏总时长
            var game_start; //游戏开始时间
            var game_djs; //游戏倒计时
            var id; //计时器id
            var isZT = false; //判断是否为暂停，false表示未点击暂停
            var zt_time; //暂停时的倒计时值
            var jx_id; //继续游戏的倒计时id

            window.onload = function() {

                //开始游戏
                startBtn = document.getElementById("start");
                //暂停游戏
                 zt = document.getElementById("zt");
                //游戏倒计时
                djs_span = document.getElementById("djs");

                //开始游戏
                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>&nbsp;&nbsp;秒 </br>
        <button id="start">开始游戏</button>
        <button id="zt">暂停游戏</button>
        <button id="stop">停止游戏</button>
    </body>

</html>

Z_唐

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用javaScript实现游戏倒计时

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

扫一扫

专栏目录