JS實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)小功能
更新時(shí)間：2022年01月11日 09:07:21 作者：土豆切成絲
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JS實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)小功能的具體代碼，供大家參考，具體內(nèi)容如下
點(diǎn)擊開(kāi)始按鈕開(kāi)始抽獎(jiǎng)，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="開(kāi)始" 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é)果啦！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS基于面向?qū)ο髮?shí)現(xiàn)的選項(xiàng)卡效果示例
這篇文章主要介紹了JS基于面向?qū)ο髮?shí)現(xiàn)的選項(xiàng)卡效果,結(jié)合實(shí)例形式分析了javascript基于面向?qū)ο蠹夹g(shù)動(dòng)態(tài)操作頁(yè)面元素的流程與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-12-12
前端處理ASCII碼轉(zhuǎn)HEX碼及校驗(yàn)具體實(shí)現(xiàn)
這篇文章主要介紹了在JavaScript編程中將ASCII碼轉(zhuǎn)換為十六進(jìn)制（HEX）碼的需求和場(chǎng)景,包括Wi-Fi配置、數(shù)據(jù)加密和網(wǎng)絡(luò)協(xié)議傳輸?shù)?文章詳細(xì)描述了HEX編碼的原理和作用,并提供了具體實(shí)現(xiàn)的示例,需要的朋友可以參考下2025-03-03
代碼折疊起來(lái),使整段程序縮成一行,看起來(lái)清爽了許多。大家在使用Visual Studio環(huán)境進(jìn)行開(kāi)發(fā)時(shí)，可以把某個(gè)類或某個(gè)函數(shù)折疊起來(lái)，在很多網(wǎng)頁(yè)上也有類似的功能，那到底是如何實(shí)現(xiàn)的呢？其實(shí)很簡(jiǎn)單，只要通過(guò)JavaScript就可以實(shí)現(xiàn)。2016-08-08
webpack.DefinePlugin與cross-env區(qū)別詳解
這篇文章主要介紹了webpack.DefinePlugin與cross-env區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
JavaScript判斷FileUpload控件上傳文件類型
在CS后臺(tái)代碼中獲取FileUpload控件上傳文件的類型是比較容易的！那么，能否在客戶端通過(guò)JavaScript腳本判斷FileUpload上傳文件類型呢？答案是可以的，下面通過(guò)一個(gè)小例子為大家展示2015-09-09
這篇文章主要介紹了js限制input標(biāo)簽中只能輸入中文的的相關(guān)資料,需要的朋友可以參考下2015-06-06
Iceraven瀏覽器需要安裝Tampermonkey插件來(lái)安裝GF油猴腳本，本文給大家介紹手機(jī)安裝GreasyFork油猴js腳本的教程，安裝過(guò)程給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-12-12
JavaScript的各種常見(jiàn)函數(shù)定義方法
這篇文章主要介紹了JavaScript的各種常見(jiàn)函數(shù)定義方法,包含了一些技巧的測(cè)試與分析總結(jié),需要的朋友可以參考下2014-09-09
這篇文章主要介紹了javascript閉包，閉包（closure）是Javascript語(yǔ)言的一個(gè)難點(diǎn)，也是它的特色，很多高級(jí)應(yīng)用都要依靠閉包實(shí)現(xiàn)，感興趣的小伙伴們可以參考一下2016-01-01
uni-app設(shè)置緩存過(guò)期時(shí)間的操作方法
uni-app 是一個(gè)使用 Vue.js 開(kāi)發(fā)所有前端應(yīng)用的框架,開(kāi)發(fā)者編寫(xiě)一套代碼,可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序,本文給大家介紹了uni-app設(shè)置緩存過(guò)期時(shí)間的操作方法,需要的朋友可以參考下2024-12-12