<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.luckyDraw{
width: 420px;
margin: 0 auto;
}
.prize{
font-size: 30px;
}
.lottery{
width: 240px;
margin: 30px auto;
position: relative;
}
.lottery li{
width: 80px;
height: 80px;
border: 1px solid #000;
box-sizing: border-box;
text-align: center;
line-height: 80px;
position: absolute;
}
.lottery li:nth-of-type(1){
left: 0;
top: 0;
}
.lottery li:nth-of-type(2){
left: 80px;
top: 0;
}
.lottery li:nth-of-type(3){
left: 160px;
top: 0;
}
.lottery li:nth-of-type(4){
left: 160px;
top: 80px;
}
.lottery li:nth-of-type(5){
left: 160px;
top: 160px;
}
.lottery li:nth-of-type(6){
left: 80px;
top: 160px;
}
.lottery li:nth-of-type(7){
left: 0;
top: 160px;
}
.lottery li:nth-of-type(8){
left: 0;
top: 80px;
}
.lottery li:nth-of-type(9){
left: 80px;
top: 80px;
cursor: pointer;
background: gold;
}
.active:after{
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 100%;
background: rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="luckyDraw">
<ul class="lottery">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>點擊抽獎</li>
</ul>
<span class="prize">獎品</span>
</div>
<script>
var arr = [1,2,3,4,5,6,7,8];
var lottery = document.querySelector('.lottery');
var prize = document.querySelector('.prize');
var ali = lottery.querySelectorAll('li');
var i=0;//轉(zhuǎn)到哪個位置
var count= 0;//轉(zhuǎn)圈初始值
var totalCount = 9;//轉(zhuǎn)動的總?cè)?shù)
var speed =500;//轉(zhuǎn)圈速度赶促,越大越慢
var minSpeed =500;
var timer;
var isClick = true;
var index = 3;//指定轉(zhuǎn)到哪個獎品
function roll(){
//速度衰減
speed -= 50;
if(speed<=10){
speed=10;
}
//每次調(diào)用都去掉全部active類名
for(var j=0;j<ali.length;j++){
ali[j].classList.remove('active');
}
i++;
//計算轉(zhuǎn)圈次數(shù)
if(i>=ali.length-1){
i=0;
count++;
}
prize.innerHTML=arr[i];//旁邊顯示當(dāng)前獎品
ali[i].classList.add('active');//添加變色類名
//滿足轉(zhuǎn)圈數(shù)和指定位置就停止
if(count>=totalCount&&(i+1)==index){
clearTimeout(timer);
isClick=true;
speed=minSpeed;
}else{
timer = setTimeout(roll,speed);//不滿足條件時調(diào)用定時器
//最后一圈減速
if(count>=totalCount-1||speed<=50){
speed+=100;
}
}
}
ali[ali.length-1].onclick = function(){
if(isClick){
count= 0;
//隨機產(chǎn)生中獎位置
// index = Math.floor(Math.random()*arr.length+1);
roll();
isClick=false;
}
}
</script>
</body>
</html>
原生JS實現(xiàn)九宮格抽獎
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門橘券,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事旁舰》婊” “怎么了?”我有些...
- 文/不壞的土叔 我叫張陵箭窜,是天一觀的道長毯焕。 經(jīng)常有香客問我,道長磺樱,這世上最難降的妖魔是什么芥丧? 我笑而不...
- 正文 為了忘掉前任,我火速辦了婚禮坊罢,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘擅耽。我一直安慰自己活孩,他們只是感情好,可當(dāng)我...
- 文/花漫 我一把揭開白布乖仇。 她就那樣靜靜地躺著憾儒,像睡著了一般。 火紅的嫁衣襯著肌膚如雪乃沙。 梳的紋絲不亂的頭發(fā)上起趾,一...
- 文/蒼蘭香墨 我猛地睜開眼记劝,長吁一口氣:“原來是場噩夢啊……” “哼变姨!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起厌丑,我...
- 正文 年R本政府宣布兢哭,位于F島的核電站,受9級特大地震影響夫嗓,放射性物質(zhì)發(fā)生泄漏迟螺。R本人自食惡果不足惜,卻給世界環(huán)境...
- 文/蒙蒙 一舍咖、第九天 我趴在偏房一處隱蔽的房頂上張望矩父。 院中可真熱鬧,春花似錦排霉、人聲如沸窍株。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽球订。三九已至,卻和暖如春瑰钮,著一層夾襖步出監(jiān)牢的瞬間冒滩,已是汗流浹背。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- 目錄 前言 如果有小伙伴想實現(xiàn)轉(zhuǎn)盤抽獎效果的話請看我的另一篇文章《Android超簡單實現(xiàn)自定義抽獎轉(zhuǎn)盤效果》 效...
- 目標(biāo) 希望實現(xiàn)一個九宮格跑馬燈效果的抽獎功能婚度,但希望不止局限于固定的樣式或效果」倏ǎ考慮做成一個n*n的可自定義某些參...
- 讓人恐懼的不是憂郁癥本身 而是自己對自己已經(jīng)放棄了寻咒,放棄了自己的尊嚴(yán)哮翘, 見不得別人對他們態(tài)度稍微有一點不好, 最后...
- 身上沒屎阻课,林上沒紙2013-11-2 06:41 前天王一夢可骯臟了。我午休片刻補覺艰匙,她拉屎限煞,奶奶處理干凈,可她還...