频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
倒计时器的编译教程
2017-10-12 08:22:00      个评论    来源:代码小菜鸟  
收藏   我要投稿

倒计时器的编译教程

 <script>
        //游戏总时长
        //游戏开始时间
        //游戏进行时
        //玩家游戏时间=游戏进行-游戏开始时间
        //游戏倒计时=游戏总时长-玩家游戏时间


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



        window.onload = function(){
            dis_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);//毫秒后有小数点,所以进行装换
            dis_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);//毫秒后有小数点,所以进行装换
            dis_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;
            dis_span.innerHTML = game_djs;
        }
    </script>
</head>
<body>
    游戏总时长:<input  id="time" type="text"  value="1" size="5px"/>分钟<br />
    游戏倒计时:<span id="djs"></span>秒<br />
    <button id="btn">开始游戏</button>
    <button id="zt">暂停游戏</button>
    <button id="stop">停止游戏</button>
</body>

 

点击复制链接 与好友分享!回本站首页
上一篇:Bootstrap的Tooltip功能显示换行和左对齐代码
下一篇:计时器的开始与暂停的相关操作实现
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站