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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JS交換變量的方法,實例分析了javascript通過自定義函數(shù)實現(xiàn)變量交換的使用技巧,需要的朋友可以參考下2015-01-01
JavaScript中沒有類的概念，所以其在對象創(chuàng)建方面與面向對象語言有所不同。這篇文章主要介紹了JavaScript中利用構造器函數(shù)模擬類的方法，文中給出了詳細的示例代碼和介紹，需要的朋友可以參考下，下面一起看看吧。2017-02-02
本篇文章主要分享了微信小程序拖拽排序的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
getAsDataURL在Firefox7.0下無法預覽本地圖片的解決方法
本文是對getAsDataURL在Firefox7.0下無法預覽本地圖片的解決方法。進行了分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
本文主要介紹了tab欄切換的原理以及實現(xiàn)方法代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了微信小程序實現(xiàn)tab頁面切換功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
下面小編就為大家?guī)硪黄狫S倒計時實例_天時分秒。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了微信小程序實現(xiàn)watch監(jiān)聽，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
ES6中的迭代器、Generator函數(shù)及Generator函數(shù)的異步操作方法
這篇文章主要介紹了ES6中的迭代器、Generator函數(shù)以及Generator函數(shù)的異步操作方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
下面小編就為大家分享一篇JS刪除數(shù)組里的某個元素方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02