原生js實現遊戲按鈕

時間 2019-11-06

標籤原生實現遊戲按鈕欄目 JavaScript 简体版

原文原文鏈接

遊戲按鈕

原生js實現遊戲的‘開始’‘暫停’‘結束’html

實現：

使用setInterval實現動畫

js實現步驟：

獲取元素
開始事件
中止事件
暫停事件
定時器

效果演示：

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>按鈕</title>
    <style>
        .wrap{
            width: 30%;
            margin: 200px auto;
            padding: 30px;
            box-shadow: 0 0 20px #999;
            border-radius: 10px;
        }
        input{
            padding: 10px 15px;
            margin-right: 10px;
        }
        .btnGroup button{
            display: inline-block;
            padding: 10px 25px;
            background: #00A09D;
            border-radius: 5px;
            color: white;
            margin-right: 10px;
            outline: none;
            border: none;
        }
        /*動畫樣式*/
        .btnGroup button:hover {
            animation: shake .5s;
        }

        @keyframes shake {
            0% {
                transform: rotate(0deg);
            }

            25% {
                transform: rotate(5deg);
            }

            50% {
                transform: rotate(-10deg);
            }

            75% {
                transform: rotate(5deg);
            }

            100% {
                transform: rotate(0);
            }
        }

    </style>
</head>
<body>
    <div class="wrap">
        <input type="text" placeholder="輸入遊戲總時長">分鐘
        <p>倒計時：<span class="endTime"></span>秒</p>
        <div class="btnGroup">
            <button class="start">開始</button>
            <button class="pause">暫停</button>
            <button class="stop">結束</button>
        </div>
    </div>
</body>
</html>

有加入一丟丟c3的動畫ui

js代碼

window.onload = function(){
    //  1.獲取元素
    var endTimeStr = document.getElementsByClassName('endTime')[0];
    var timeVal = document.getElementsByTagName('input')[0];
    var startBtn = document.getElementsByClassName('start')[0];
    var pauseBtn = document.getElementsByClassName('pause')[0];
    var stopBtn = document.getElementsByClassName('stop')[0];
    var totalTime, //總時長
        showTime,//剩餘時長
        startTime, //點開始按鈕時間戳
        nowTime,//定時器開啓的時間戳
        timer;
    var timeType = 1; //1結束後開始 2暫停後開始


    // 2.開始事件
    startBtn.onclick = function(){
        if(timer) clearInterval(timer);
        if(timeType==1)totalTime = timeVal.value*60;  //初始化總時長
        startTime = new Date(); //點擊按鈕開始時間
        startBtn.disabled = true;
        start();
    }
    // 3.中止事件
    stopBtn.onclick = function(){
        clearInterval(timer)
        timeType = 1;
        showTime = timeVal.value*60;  //剩餘時長
        endTimeStr.innerHTML = showTime;
        startBtn.disabled = false;
    }
    // 4.暫停事件
    pauseBtn.onclick = function(){
        clearInterval(timer)
        timeType = 2;
        startBtn.disabled = false;
        totalTime = showTime;  //總時長==剩餘時長
    }
    /*
    定時器
    */ 
   function start(){
       nowTime = new Date();//定時器開始時間
       showTime = totalTime-parseInt((nowTime-startTime)/1000);
       endTimeStr.innerHTML = showTime;
       timer = setInterval(function(){
            showTime--;
            endTimeStr.innerHTML = showTime;
            if(showTime<1){
                clearInterval(timer)
                alert("遊戲結束");
            }
       },100);
   }
 }

代碼複製可直接查看效果spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。