html5小游戏刷新按钮,原生js实现游戏按钮

游戏按钮

原生js实现游戏的‘开始’‘暂停’‘结束’

实现：

使用setInterval实现

js实现步骤：

获取元素

开始事件

停止事件

暂停事件

定时器

效果演示：

html代码

按钮

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

}

}

分钟

倒计时：秒

开始

暂停

结束

有加入一丢丢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);

}

}

代码复制可直接查看效果