JS實(shí)現(xiàn)隨機(jī)抽獎小功能
更新時間：2022年01月11日 09:07:21 作者：土豆切成絲
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)隨機(jī)抽獎小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JS實(shí)現(xiàn)隨機(jī)抽獎小功能的具體代碼，供大家參考，具體內(nèi)容如下
點(diǎn)擊開始按鈕開始抽獎，div依次變紅！下面是js代碼，需要的自取
<script>
? ? ? ? var but1 = document.getElementById("btn1")
? ? ? ? var but2 = document.getElementById("btn2")
? ? ? ? var alldiv = document.querySelectorAll(".father>div")
? ? ? ? console.log(alldiv);
? ? ? ? var index = 0;
? ? ? ? var flag = 0;
? ? ? ? but1.onclick=function(){
? ? ? ? ? ? if(flag == 0)
? ? ? ? ? ? {
? ? ? ? ? ? ? ? ?t = setInterval(()=>{
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ?index= index>=(alldiv.length-1)?0:++index;
? ? ? ? ? ? ? ? ?alldiv[index].style.backgroundColor = "gold";
? ? ? ? ? ? ? ? ?if(index !=0){
? ? ? ? ? ? ? ? ? ? alldiv[index-1].style.backgroundColor = "#fff";
? ? ? ? ? ? ? ? ?}else if(index==0){
? ? ? ? ? ? ? ? ? ? alldiv[19].style.backgroundColor = "#fff";
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? // ?alldiv[index].style.backgroundColor = "red";
? ? ? ? ? ? ? ? ?console.log(index)
? ? ? ? ? ? ? ? ?
? ? ? ? ? ? },1)
? ? ? ? ? ? flag = 1;
? ? ? ? ? ? }
?
? ? ? ? ? ? but2.onclick=function(){
? ? ? ? ? ? clearInterval(t);
? ? ? ? ? ? flag = 0;
? ? ? ? }
? ? ? ? }
? ? ??? ? ? ? ? ???
</script>下面是html，css代碼
<style>
? ? .father{
? ? ? ? width: 600px;
? ? ? ? height: 600px;
? ? ? ? /* border: 1px solid darkorchid; */
? ? ? ? position: relative;
? ? ? ? margin: 20px auto;
? ? }
? ?
? ? input{
? ? ? ? width: 100px;
? ? ? ? height: 100px;
? ? }
? ?.son1{
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?position: absolute;
? ? ? ?top: 0;
? ? ? ?left: 0;
? ? ? ?border: 1px solid brown;
? ? ? ?text-align: center;
? ? ? ?line-height: 100px;
? ?}
? ?.son2{
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?position: absolute;
? ? ? ?top: 0;
? ? ? ?left: 100px;
? ? ? ?border: 1px solid brown;
? ? ? ?text-align: center;
? ? ? ?line-height: 100px;
? ?}
? ?.son3{
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?position: absolute;
? ? ? ?top: 0;
? ? ? ?left: 200px;
? ? ? ?border: 1px solid brown;
? ? ? ?text-align: center;
? ? ? ?line-height: 100px;
? ?}
? ?.son4{
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?position: absolute;
? ? ? ?top: 0;
? ? ? ?left: 300px;
? ? ? ?border: 1px solid brown;
? ? ? ?text-align: center;
? ? ? ?line-height: 100px;
? ?}
? ?.son5{
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?position: absolute;
? ? ? ?top: 0;
? ? ? ?left: 400px;
? ? ? ?border: 1px solid brown;
? ? ? ?text-align: center;
? ? ? ?line-height: 100px;
? ?}
? ?.son6{
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?position: absolute;
? ? ? ?top: 0;
? ? ? ?left: 500px;
? ? ? ?border: 1px solid brown;
? ? ? ?text-align: center;
? ? ? ?line-height: 100px;
? ?}
? ?.son7{
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?position: absolute;
? ? ? ?top: 100px;
? ? ? ?right: -2px;
? ? ? ?border: 1px solid brown;
? ? ? ?text-align: center;
? ? ? ?line-height: 100px;
? ?}
? ?.son8{
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?position: absolute;
? ? ? ?top: 200px;
? ? ? ?right: -2px;
? ? ? ?border: 1px solid brown;
? ? ? ?text-align: center;
? ? ? ?line-height: 100px;
? ?}
? ?.son9{
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?position: absolute;
? ? ? ?top: 300px;
? ? ? ?right: -2px;
? ? ? ?border: 1px solid brown;
? ? ? ?text-align: center;
? ? ? ?line-height: 100px;
? ?}
? ?.son10{
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?position: absolute;
? ? ? ?top: 400px;
? ? ? ?right: -2px;
? ? ? ?border: 1px solid brown;
? ? ? ?text-align: center;
? ? ? ?line-height: 100px;
? ?}
? ?.son11{
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?position: absolute;
? ? ? ?top: 500px;
? ? ? ?right: -2px;
? ? ? ?border: 1px solid brown;
? ? ? ?text-align: center;
? ? ? ?line-height: 100px;
? ?}
? ?.son12{
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?position: absolute;
? ? ? ?bottom: -2px;
? ? ? ?right: 100px;
? ? ? ?border: 1px solid brown;
? ? ? ?text-align: center;
? ? ? ?line-height: 100px;
? ?}
? ?.son13{
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?position: absolute;
? ? ? ?bottom: -2px;
? ? ? ?right: 200px;
? ? ? ?border: 1px solid brown;
? ? ? ?text-align: center;
? ? ? ?line-height: 100px;
? ?}
? ?.son14{
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?position: absolute;
? ? ? ?bottom: -2px;
? ? ? ?right: 300px;
? ? ? ?border: 1px solid brown;
? ? ? ?text-align: center;
? ? ? ?line-height: 100px;
? ?}
? ?.son15{
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?position: absolute;
? ? ? ?bottom: -2px;
? ? ? ?right: 400px;
? ? ? ?border: 1px solid brown;
? ? ? ?text-align: center;
? ? ? ?line-height: 100px;
? ?}
? ?.son16{
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?position: absolute;
? ? ? ?bottom: -2px;
? ? ? ?right: 500px;
? ? ? ?border: 1px solid brown;
? ? ? ?text-align: center;
? ? ? ?line-height: 100px;
? ?}
? ?.son17{
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?position: absolute;
? ? ? ?bottom: 98px;
? ? ? ?right: 500px;
? ? ? ?border: 1px solid brown;
? ? ? ?text-align: center;
? ? ? ?line-height: 100px;
? ?}
? ?.son18{
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?position: absolute;
? ? ? ?bottom: 198px;
? ? ? ?right: 500px;
? ? ? ?border: 1px solid brown;
? ? ? ?text-align: center;
? ? ? ?line-height: 100px;
? ?}
? ?.son19{
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?position: absolute;
? ? ? ?bottom: 298px;
? ? ? ?right: 500px;
? ? ? ?border: 1px solid brown;
? ? ? ?text-align: center;
? ? ? ?line-height: 100px;
? ?}
? ?.son20{
? ? ? ?width: 100px;
? ? ? ?height: 100px;
? ? ? ?position: absolute;
? ? ? ?bottom: 398px;
? ? ? ?right: 500px;
? ? ? ?border: 1px solid brown;
? ? ? ?text-align: center;
? ? ? ?line-height: 100px;
? ?}
? ?
? ? #btn1{
? ? ? ? position:absolute;
? ? ? ? top: 250px;
? ? ? ? left: 200px;
? ? }
? ? #btn2{
? ? ? ? position:absolute;
? ? ? ? top: 250px;
? ? ? ? left: 300px;
? ? ? ??
? ? }
</style>
<body>
? ? <div class="father">
? ? ? ??
? ? ? ? <input type="button" value="開始" id="btn1">
? ? ? ? <input type="button" value="停止" id="btn2">
? ? ? ? <div class="son1">1</div>
? ? ? ? <div class="son2">2</div>
? ? ? ? <div class="son3">3</div>
? ? ? ? <div class="son4">4</div>
? ? ? ? <div class="son5">5</div>
? ? ? ? <div class="son6">6</div>
? ? ? ? <div class="son7">7</div>
? ? ? ? <div class="son8">8</div>
? ? ? ? <div class="son9">9</div>
? ? ? ? <div class="son10">10</div>
? ? ? ? <div class="son11">11</div>
? ? ? ? <div class="son12">12</div>
? ? ? ? <div class="son13">13</div>
? ? ? ? <div class="son14">14</div>
? ? ? ? <div class="son15">15</div>
? ? ? ? <div class="son16">16</div>
? ? ? ? <div class="son17">17</div>
? ? ? ? <div class="son18">18</div>
? ? ? ? <div class="son19">19</div>
? ? ? ? <div class="son20" >20</div>
? ? ? ??
</div>
上面就是結(jié)果啦！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS基于面向?qū)ο髮?shí)現(xiàn)的選項(xiàng)卡效果示例
這篇文章主要介紹了JS基于面向?qū)ο髮?shí)現(xiàn)的選項(xiàng)卡效果,結(jié)合實(shí)例形式分析了javascript基于面向?qū)ο蠹夹g(shù)動態(tài)操作頁面元素的流程與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-12-12
前端處理ASCII碼轉(zhuǎn)HEX碼及校驗(yàn)具體實(shí)現(xiàn)
這篇文章主要介紹了在JavaScript編程中將ASCII碼轉(zhuǎn)換為十六進(jìn)制（HEX）碼的需求和場景,包括Wi-Fi配置、數(shù)據(jù)加密和網(wǎng)絡(luò)協(xié)議傳輸?shù)?文章詳細(xì)描述了HEX編碼的原理和作用,并提供了具體實(shí)現(xiàn)的示例,需要的朋友可以參考下2025-03-03
代碼折疊起來,使整段程序縮成一行,看起來清爽了許多。大家在使用Visual Studio環(huán)境進(jìn)行開發(fā)時，可以把某個類或某個函數(shù)折疊起來，在很多網(wǎng)頁上也有類似的功能，那到底是如何實(shí)現(xiàn)的呢？其實(shí)很簡單，只要通過JavaScript就可以實(shí)現(xiàn)。2016-08-08
webpack.DefinePlugin與cross-env區(qū)別詳解
這篇文章主要介紹了webpack.DefinePlugin與cross-env區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
JavaScript判斷FileUpload控件上傳文件類型
在CS后臺代碼中獲取FileUpload控件上傳文件的類型是比較容易的！那么，能否在客戶端通過JavaScript腳本判斷FileUpload上傳文件類型呢？答案是可以的，下面通過一個小例子為大家展示2015-09-09
這篇文章主要介紹了js限制input標(biāo)簽中只能輸入中文的的相關(guān)資料,需要的朋友可以參考下2015-06-06
Iceraven瀏覽器需要安裝Tampermonkey插件來安裝GF油猴腳本，本文給大家介紹手機(jī)安裝GreasyFork油猴js腳本的教程，安裝過程給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-12-12
這篇文章主要介紹了JavaScript的各種常見函數(shù)定義方法,包含了一些技巧的測試與分析總結(jié),需要的朋友可以參考下2014-09-09
這篇文章主要介紹了javascript閉包，閉包（closure）是Javascript語言的一個難點(diǎn)，也是它的特色，很多高級應(yīng)用都要依靠閉包實(shí)現(xiàn)，感興趣的小伙伴們可以參考一下2016-01-01
uni-app 是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序,本文給大家介紹了uni-app設(shè)置緩存過期時間的操作方法,需要的朋友可以參考下2024-12-12