游戏按钮
原生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);
}
}代码复制可直接查看效果
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。