原生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