JavaScript實現抽獎器效果
阿新 • • 發佈：2021-10-27
本文例項為大家分享了實現抽獎器效果的具體程式碼，供大家參考，具體內容如下
這次實現的效果如下圖：
所實現的功能是：當每次點選中間的抽獎按鈕時，會隨機選擇一個盒子作為抽獎的結果。
那我們要tVdcWst如何實現抽獎的功能呢？
其實很簡單，首先用html和做出整體的框架，然後用在中間按鈕的onclick函式中設定定時器+隨機改變某一盒子的背景顏色就可以了。 下面我們來討論一下細節的方面：
1、設計整體框架時，我們需要為每個盒子設定邊框，這時會發現邊框會出現重疊問題，導致邊框變厚，解決的方法是：設定margin-right和margin-bottom為負值（值等於邊框值）。
2、.在js中設定抽獎功能時，我們可以通過設定一個定時器A
background-color代表選中。為使抽獎可以在某一時刻暫停，我們可以設定定時器B，在某一時刻將定時器A關閉。
3、隨機改變是怎麼做到的呢？ 首先呼叫document.getElementsByTagName獲取所有盒子，然後利用Math.random()*盒子的數目，獲取某一盒子下標，改變其背景顏色。
很顯然定時器A是setInterval，定時器B是setTimeout。
而且在A中改變某一盒子背景顏色時，要將上一個被改變顏色的盒子還原為原來的顏色，我們需要記錄上次被改變背景顏色的盒子。
具體見下面程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
.container{
width: 400px;
height: 400px;
margin:50px auto;
}
span,#main{
display: block;
width: 100px;
height: 100px;
border:2px pink solid;
float:left;
margin-left:-2px;
margin-bottom:-2px;
text-align: center;
line-height: 100px;
border-radius: 16px;
box-shadow: 2px 2px 3px rgba(226,86,109,0.459);
}
#main{
background-color: rgba(243,97,126,0.651);
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div>
<span>視覺化</span>
<span>圖形學</span>
<span></span>
</div>
<div>
<span>樂事</span>
<div id="main">抽獎</div>
tVdcWst 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。