游戏按钮
原生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); } }代码复制可直接查看效果