<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:#666;
}
table{
background:#666;
margin:30px auto;
}
table tr td{
width:110px;
height:110px;
}
#btn{
width:150px;
height:40px;
line-height:40px;
display:inline-block;
color:#fff;
font-family:"Microsoft Yahei";
background-color:rgb(106,38,19);
position:relative;
border-radius:3px;
cursor:pointer;
top:100px;
}
#btn:hover{
background-color:#481305;
}
.tar{
border:4px solid #660066;
width:108px;
height:108px;
position:absolute;
top:0;
left:0;
}
.Img{
width:120px;
height:160px;
position:absolute;
left:365px;
top:10px;
border:1px solid #666;
border-radius:5px;
background:url("images/mv.jpg");
background-size:cover;
margin-left:-150px;
}
</style>
</head>
<body>
//表格布局
<table border="0" cellpadding="0" cellspacing="1">
<tr>
<td id="td0" style="background:url(images/0.png);background-size:cover;"></td>
<td id="td1" style="background:url(images/1.png);background-size:cover;"></td>
<td id="td2" style="background:url(images/2.png);background-size:cover;"></td>
<td id="td3" style="background:url(images/3.png);background-size:cover;"></td>
<td id="td4" style="background:url(images/4.png);background-size:cover;"></td>
<td id="td5" style="background:url(images/5.png);background-size:cover;"></td>
<td id="td6" style="background:url(images/6.png);background-size:cover;"></td>
</tr>
<tr>
<td id="td19" style="background:url(images/19.png);background-size:cover;"></td>
<td colspan="5" rowspan="3" style="background:#66cc33;text-align:center;position:relative;">
<div id="btn" >開始抽獎(jiǎng)</div>
</td>
<td id="td7" style="background:url(images/7.png);background-size:cover;"></td>
</tr>
<tr>
<td id="td18" style="background:url(images/18.png);background-size:cover;"></td>
<td id="td8" style="background:url(images/8.png);background-size:cover;"></td>
</tr>
<tr>
<td id="td17" style="background:url(images/17.png);background-size:cover;"></td>
<td id="td9" style="background:url(images/9.png);background-size:cover;"></td>
</tr>
<tr>
<td id="td16" style="background:url(images/16.png);background-size:cover;"></td>
<td id="td15" style="background:url(images/15.png);background-size:cover;"></td>
<td id="td14" style="background:url(images/14.png);background-size:cover;"></td>
<td id="td13" style="background:url(images/13.png);background-size:cover;"></td>
<td id="td12" style="background:url(images/12.png);background-size:cover;"></td>
<td id="td11" style="background:url(images/11.png);background-size:cover;"></td>
<td id="td10" style="background:url(images/10.png);background-size:cover;"></td>
</tr>
</table>
<div class="tar"></div>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var n=0;
change(0,0); //初始化函數(shù)，讓tar處于第一個(gè)位置
function change(i,time){
var $tar = $('div.tar'); //獲取tar
var offset = $('#td'+(i%20)).offset(); //讓tar的位置跟表格中的某一個(gè)框相同
$tar.animate({top:offset.top-2,left:offset.left-2},time); //確定tar的位置
n = i; //儲(chǔ)存當(dāng)前的i
}
var num = 0;
function move(){
var randomNumber = Math.random(10)*20;//隨機(jī)生成0-20之間的數(shù)字
randomNumber = Math.ceil(randomNumber)+50;//加上一個(gè)50的基數(shù)，增加轉(zhuǎn)的圈數(shù)
num = randomNumber; //儲(chǔ)存當(dāng)前隨機(jī)數(shù)
var m = n; //把之前儲(chǔ)存的n給到m
for(var i=m;i<randomNumber+m;i++){ //i=m，下一次點(diǎn)擊開始按鈕，tar就不會(huì)又從第一個(gè)位置開始跑，同時(shí)隨機(jī)數(shù)也要加上m.
change(i,50); //調(diào)用
}
}
window.onload = function(){ //dom節(jié)點(diǎn)加載完成時(shí)給予開始按鈕點(diǎn)擊事件，
btn.onclick = function(){
move(); //調(diào)用
btn.onclick = ''; //取消點(diǎn)擊事件
}
}
var t = 0;
var btn = document.getElementById('btn'); //獲取開始按鈕
setInterval(function(){
t++;
if(t%(Math.ceil((num*50/1000)+1))==0){ // num*50/1000等于轉(zhuǎn)動(dòng)一次的時(shí)間，表示要每過這個(gè)時(shí)間才能點(diǎn)擊開始按鈕一次。
btn.onclick = function(){
move();
console.log('執(zhí)行');
btn.onclick = '';
console.log(Math.ceil((num*50/1000)+1))
}
t = 0;
}
},1000)
</script>
</body>
</html>```
h5轉(zhuǎn)盤游戲
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- 不管承不承認(rèn)，H5受到了關(guān)注。 在經(jīng)過《圍住神經(jīng)貓》、《打企鵝》、《找房祖名》等游戲類H5的刷屏后，我們對(duì)游戲類H...
- 近期新品除數(shù)據(jù)飆高的《武道至尊》、美術(shù)效果爆棚的《龍女傳奇》外，還有一款產(chǎn)品也十分引人關(guān)注，它的設(shè)計(jì)理念將引領(lǐng)H5...
- 微信推送工作上手后，開始著手H5游戲的簡(jiǎn)單策劃。說是策劃，也不過是把網(wǎng)上的游戲原型拿來改改。 對(duì)于不同的公眾號(hào)，任...
