快捷導(dǎo)航

js實(shí)現(xiàn)簡單抽獎功能

更新時(shí)間：2020年11月24日 13:25:45 作者：Alicesa

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡單抽獎功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)簡單抽獎功能的具體代碼，供大家參考，具體內(nèi)容如下

代碼

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title></title>
 <style>
 #box{
 border: 1px solid aqua;
 height: 100px;
 width: 200px;
 text-align: center;
 line-height: 100px;
 margin: auto;
 font-size: 22px;
 }
 .active{
 background: slateblue;
 }
 li{
 text-align: center;
 list-style:none ;
 width: 40px;
 height: 20px;
 line-height: 20px;
 border: 1px solid blue;
 margin-left: 40px;
 
 float: left;
 }
 ul,li
 {
 list-style: none;
 
 }
 #shu
 {
 margin: auto;
 }
 
 </style>
 </head>
 <body>
 <button id="stp">開始</button><button id="off">停止</button>
 
 <div id="box">恭喜<span>1</span>號 </div>
 <div id="shu">0</div><span>等獎</span>
 <ul>
 <li class="active">1號</li>
 <li>2號</li>
 <li>3號</li>
 <li>4號</li>
 <li>5號</li>
 <li>6號</li>
 <li>7號</li>
 </ul>
 <script>
 var t=null;
 var ostp=document.getElementById("stp");
 var ooff=document.getElementById("off");
 var ospan=document.getElementsByTagName("div")[0].getElementsByTagName("span");
 var oli=document.getElementsByTagName("ul")[0].getElementsByTagName("li");
 var oshu=document.getElementsByClassName("shu");
 function mytime(){
 var n=Math.floor(Math.random()*7+1);
 ospan[0].innerText=n;
 ospan[1].innerText=oli[n-1].innerText;
 for(let i=0;i<oli.length;i++)
 {
 oli[i].className="";
 }
 oli[n-1].className="active";
 }
 function mytime2()
 {
 var a=Math.floor(Math.random()*3+1);
 shu.innerText=a;
 
 
 }
 ostp.onclick=function(){
 clearInterval(t);
 t=setInterval(mytime,50);
 at=setInterval(mytime2,1000)
 }
 ooff.onclick=function(){
 clearInterval(t);
 clearInterval(at);
 }
 </script>
 </body>
</html>

效果

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
抽獎

相關(guān)文章

JavaScript實(shí)現(xiàn)圖片懶加載的兩種方式
現(xiàn)在的科技發(fā)達(dá),圖片的資源占比越來越大,對圖片在頁面的優(yōu)化已經(jīng)成為前端開發(fā)必備的技術(shù)之一,難的圖片懶加載方法咱們看著頭大,簡單,易懂的才適合我們程序員,所以本文給大家介紹了JavaScript實(shí)現(xiàn)圖片懶加載的兩種方式,需要的朋友可以參考下
2024-04-04
jscript之Read an Excel Spreadsheet
jscript之Read an Excel Spreadsheet...
2007-06-06
xmlHTTP返回值重編碼的優(yōu)化
xmlHTTP返回值重編碼的優(yōu)化...
2006-11-11
JavaScript實(shí)現(xiàn)日期格式化的方法匯總
日期是許多JavaScript應(yīng)用程序的基本組成部分，無論是在網(wǎng)頁上顯示當(dāng)前日期還是處理用戶輸入以安排事件，本文將探討在?JavaScript?中格式化日期的各種技術(shù)，希望對大家有所幫助
2023-06-06
css3元素簡單的閃爍效果實(shí)現(xiàn)(html5 jquery)
本篇文章主要介紹了css3元素簡單的閃爍效果實(shí)現(xiàn)(html5 jquery) 需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
HTML+CSS+JavaScript實(shí)現(xiàn)放大鏡效果
這篇文章主要為大家詳細(xì)介紹了HTML+CSS+JavaScript實(shí)現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
JavaScript實(shí)現(xiàn)日期格式化詳細(xì)實(shí)例
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)日期格式化的相關(guān)資料,JavaScript中的日期對象提供了許多方法和屬性,可以通過它們來進(jìn)行日期的格式化,需要的朋友可以參考下
2023-09-09
一個(gè)用js實(shí)現(xiàn)控制臺控件的代碼
一個(gè)用js實(shí)現(xiàn)控制臺控件的代碼...
2007-09-09
JS加密插件CryptoJS實(shí)現(xiàn)的Base64加密示例
這篇文章主要介紹了JS加密插件CryptoJS實(shí)現(xiàn)的Base64加密,結(jié)合實(shí)例形式分析了CryptoJS進(jìn)行base64加密的簡單實(shí)現(xiàn)技巧,需要的朋友可以參考下
2018-08-08
javascript刪除數(shù)組元素并且數(shù)組長度減小的簡單實(shí)例
本篇文章主要是對javascript刪除數(shù)組元素并且數(shù)組長度減小的簡單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02