簡單的遊戲副本刷新倒計時製做

  主要就是利用js來實現的業務邏輯,實現結果javascript

代碼:html

<!DOCTYPE html>
<!-- <html lang="en"> -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        .start{
            color: red;
            font-size: 16px;
            margin: 10px 0 0;
        }
        .totalTime{
            width: 30px;
        }
    </style>
</head>

<body>
    <div>
        請輸入倒計多長時間:
        <input type="text" id="totalTime" class="totalTime">分鐘
        <!-- <input type="button" id="start" value="開始倒計時"> -->
        <div id="start1" class="start">開始倒計時</div>

        <hr>

        副本倒計多長時間:
        <input type="text" id="totalTime1" class="totalTime">分鐘
        <!-- <input type="button" id="start" value="開始倒計時"> -->
        <div id="start2" class="start">開始倒計時</div>
        <hr>

        副本倒計多長時間:
        <input type="text" id="totalTime3" class="totalTime">分鐘
        <!-- <input type="button" id="start" value="開始倒計時"> -->
        <div id="start3" class="start">開始倒計時</div>
    </div>

    <script type="text/javascript">
        window.onload = function () {
            // 第三個
            var odiv3 = document.getElementById("start3");
            var totalTime3 = 0;
            var time3 = 0;

            document.getElementById("start3").onclick = function () {
                clearInterval(time3)
                var number = parseInt($("#totalTime3").val() * 60 ) 
                totaltime3 = number
                start3();//調用函數
                var time = setInterval(start3, 1000);//設置定時器 每一秒執行一次
                time3 = time
                console.log(time)
            }
            function start3() {
                totaltime3--

                var hour = totwo(parseInt(totaltime3 / 3600)); //  取餘/60/60獲取時(取餘是獲取conS對應位置的小數位)
                var min = totwo(parseInt(totaltime3 % 3600 / 60));// 取餘/60獲取分
                var s = totwo(parseInt(totaltime3 % 60)); //取總秒數的餘數
                var html = hour + "時" + min + "分" + s + "秒";
                odiv3.innerHTML = html;//把字符串添加進div中
                if (totaltime3 < 0) {//倒計時完成 執行功能,這裏是播放MP3
                    alert("時間到。。。。。")
                    clearInterval(time3);//執行功能時要清除時間函數
                }
            }


            // 第二個
            var odiv2 = document.getElementById("start2");
            var totalTime2 = 0;
            var time2 = 0;

            document.getElementById("start2").onclick = function () {
                clearInterval(time2)
                var number = parseInt($("#totalTime1").val() * 60 ) 
                totaltime2 = number
                start2();//調用函數
                var time = setInterval(start2, 1000);//設置定時器 每一秒執行一次
                time2 = time
                console.log(time)
            }
            function start2() {
                totaltime2--

                var hour = totwo(parseInt(totaltime2 / 3600)); //  取餘/60/60獲取時(取餘是獲取conS對應位置的小數位)
                var min = totwo(parseInt(totaltime2 % 3600 / 60));// 取餘/60獲取分
                var s = totwo(parseInt(totaltime2 % 60)); //取總秒數的餘數
                var html = hour + "時" + min + "分" + s + "秒";
                odiv2.innerHTML = html;//把字符串添加進div中
                if (totaltime2 < 0) {//倒計時完成 執行功能,這裏是播放MP3
                    alert("時間到。。。。。")
                    clearInterval(time2);//執行功能時要清除時間函數
                }
            }


            // 第一個
            var odiv = document.getElementById("start1");
            var totalTime = 0;
            var time1 = 0;
            function totwo(e) {
                return e < 10 ? "0" + e : "" + e;//若是取得的數字爲個數則在其前面增添一個0
            }
            document.getElementById("start1").onclick = function () {
                clearInterval(time1)
                var number = parseInt($("#totalTime").val() * 60 ) 
                totaltime = number
                start1();//調用函數
                var time = setInterval(start1, 1000);//設置定時器 每一秒執行一次
                time1 = time
                console.log(time)
            }
            function start1() {
                totaltime--

                var hour = totwo(parseInt(totaltime / 3600)); //  取餘/60/60獲取時(取餘是獲取conS對應位置的小數位)
                var min = totwo(parseInt(totaltime % 3600 / 60));// 取餘/60獲取分
                var s = totwo(parseInt(totaltime % 60)); //取總秒數的餘數
                var html = hour + "時" + min + "分" + s + "秒";
                odiv.innerHTML = html;//把字符串添加進div中
                if (totaltime < 0) {//倒計時完成 執行功能,這裏是播放MP3
                    alert("時間到。。。。。")
                    clearInterval(time1);//執行功能時要清除時間函數
                }
            }

        }
    </script>
</body>

</html>
相關文章
相關標籤/搜索