JS實現隨機抽獎小功能
更新時間：2022年01月11日 09:07:21 作者：土豆切成絲
這篇文章主要為大家詳細介紹了JS實現隨機抽獎小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現隨機抽獎小功能的具體代碼，供大家參考，具體內容如下
點擊開始按鈕開始抽獎，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>
上面就是結果啦！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JavaScript中的this妙用,結合實例形式分析了JavaScript中的this基本功能、用法及操作注意事項,需要的朋友可以參考下2020-05-05
ES6中的Promise對象與async和await方法詳解
Promise是es6引入的異步編程薪解決方案，語法上promise就是一個構造函數，用來封裝異步操作病可以獲取其成功或失敗的結果，這篇文章主要介紹了ES6中的Promise對象與async和await方法,需要的朋友可以參考下2022-12-12
Echarts,作為一個使用廣泛的JavaScript圖表庫,提供了創(chuàng)建動態(tài)排序折線圖的強大功能,下面就跟隨小編一起學習一下如何使用Echarts繪制動態(tài)排序折線圖吧2023-12-12
這篇文章介紹了JavaScript中的事件處理程序，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細介紹了微信小程序實現錄音Record功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了微信小程序視頻彈幕位置隨機，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
select、radio表單回顯功能實現避免使用jquery載入賦值
select、radio表單回顯避免使用jquery載入賦值，最好的做法是：在jsp頁面進行邏輯判斷，具體實現如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-06-06
返回上一頁并刷新在此功能有利于用戶的體驗,是每一個web開發(fā)人員所必備的一項，長話短說，今天介紹實現此功能的一個方法，需要了解的朋友可以參考下2012-12-12
這篇文章主要介紹了原生javascript實現圖片無縫滾動效果的相關資料,需要的朋友可以參考下2016-02-02
由于誤操作比較多，有時沒有選中文本框，然后不小心按了退格之后，剛剛辛苦填好的表單就什么也后退的沒有了，針對這個問題，本文給出了詳細的解決方法，需要朋友不要錯過2013-11-11