共计 2182 个字符，预计需要花费 6 分钟才能阅读完成。
游戏按钮
原生 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);
}
}代码复制可直接查看效果
正文完
发表至： javascript
2019-06-05
