抽獎遊戲

時間 2019-11-17

標籤抽獎遊戲欄目遊戲简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽獎遊戲</title>
<style type="text/css">
#box{
margin: 100px auto 0;
width: 366px;
height: 366px;
}
#box div{
margin: 0 20px 20px 0;
float: left;
border: 1px solid #000;
width: 100px;
height: 100px;
}
.start{
font-size: 36px;
font-weight: bold;
text-align: center;
line-height: 100px;
cursor: pointer;
}
.prize{
font-size: 30px;
line-height: 100px;
text-align: center;
}
#box div.prize_active{
border-color: red;
color: white;
font-weight: bold;
background-color: #ffaa00;javascript

}
</style>
<script type="text/javascript">
window.onload = function(){
var prizesData = '一等獎,二等獎,三等獎,四等獎,五等獎,六等獎,七等獎,八等獎'.split(',');
var prizes = document.querySelectorAll('.prize');
var start = document.querySelector('.start');css

var arr = [0,1,2,4,7,6,5,3];html

var n = 0;
var t =10;
var endPoint = 200;
for (var i = 0; i < prizes.length; i++) {
prizes[i].innerHTML = prizesData[i];
}
start.onclick = function(){
if(this.started){
return;
}
this.started = true;java

n = 0;
t = 10;
endPoint = Math.round(Math.random()*(300-200)+200);
move();
}dom

function move() {
setTimeout(function() {this

if (n == prizes.length) {
n = 0;
}htm

for ( var i=0; i<prizes.length; i++ ) {
prizes[i].className = 'prize';
}blog

prizes[ arr[n] ].className = 'prize prize_active';遊戲

n++;
t+=5;
//console.log(t);ip

if ( t < endPoint ) {
move();
} else {
alert('over');
start.started = false;
}

}, t);
}

}
</script>
</head>
<body>
<div id="box">
<div class="prize"></div>
<div class="prize"></div>
<div class="prize"></div>
<div class="prize"></div>
<div class="start">START</div>
<div class="prize"></div>
<div class="prize"></div>
<div class="prize"></div>
<div class="prize"></div>
</div>

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。