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