原生js实现游戏按钮

最新推荐文章于 2022-07-04 10:26:33 发布

撒野女孩

最新推荐文章于 2022-07-04 10:26:33 发布

阅读量1k

点赞数 1

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

本文链接：https://blog.csdn.net/sinat_38426472/article/details/90914154

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

游戏按钮

原生js实现游戏的‘开始’‘暂停’‘结束’
情况：
使用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的动画

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);
   }
 }

代码复制可直接查看效果