JS實(shí)現(xiàn)隨機(jī)抽選獲獎(jiǎng)?wù)?/h1>
更新時(shí)間:2019年11月07日 08:34:08 作者:weixin20151212
這篇文章主要介紹了JS實(shí)現(xiàn)隨機(jī)抽選獲獎(jiǎng)?wù)撸闹惺纠a介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JS實(shí)現(xiàn)隨機(jī)抽選獲獎(jiǎng)?wù)叩木唧w代碼,供大家參考,具體內(nèi)容如下
<!--2018年9月12日——————幸運(yùn)抽獎(jiǎng)-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.select{
background: #3399FF;
color:white;
}
.button{
border-radius: 10px;
height: 100px;
font-size: 25px;
width: 100px;
background-color: #3399FF;
color: white;
}
.title{
font-family: cursive;
}
</style>
</head>
<body>
<div style="text-align:-webkit-center;font-size: 57px;color: #3399FF;" class="title">抽獎(jiǎng)人員名單</div>
<table style="border:1px solid #ccc; width:800px; height:400px; text-align: center; margin: auto;" background="C:\Users\Administrator\Desktop\%application%\360壁紙\50736.jpg" >
<tr>
<td id="student_1">謝林峰</td>
<td id="student_2">卿明珠</td>
<td id="student_3">袁龍</td>
<td id="student_4">周志明</td>
<td id="student_5">秦玉萍</td>
<td id="student_6">金暉</td>
<td id="student_7">陶靈峰</td>
<td id="student_8">廖楊明</td>
</tr>
<tr>
<td id="student_9">胡雄</td>
<td id="student_10">胡俊凡</td>
<td id="student_11">李欣</td>
<td id="student_12">易君</td>
<td id="student_13">湛威</td>
<td id="student_14">古海平</td>
<td id="student_15">潘杰杰</td>
<td id="student_16">伍光政</td>
</tr>
<tr>
<td id="student_17">譚談</td>
<td id="student_18">周強(qiáng)</td>
<td id="student_19">陳輝</td>
<td id="student_20">李庚云</td>
<td id="student_21">吳玉風(fēng)</td>
<td id="student_22">伍鵬</td>
<td id="student_23">蔡?hào)|龍</td>
<td id="student_24">胡俊飛</td>
</tr>
<tr>
<td id="student_25">文捷頻</td>
<td id="student_26">唐明</td>
<td id="student_27">吳鑫培</td>
<td id="student_28">唐翌</td>
<td id="student_29">鄒家歡</td>
<td id="student_30">劉朋</td>
<td id="student_31">周文才</td>
<td id="student_32">陽(yáng)小松</td>
</tr>
<tr>
<td id="student_33">張明博</td>
<td id="student_34">嚴(yán)偉</td>
<td id="student_"></td>
<td id="student_"></td>
<td id="student_"></td>
<td id="student_"></td>
<td id="student_"></td>
<td id="student_"></td>
</tr>
</table>
<sapn style="margin-left: 430px;">抽獎(jiǎng)倒計(jì)時(shí):</sapn><span id="Ten" style="color:red;font-size: 70px;">10</span>
<span style="color:red">s</span>
<span style="margin-left: 220px;">幸運(yùn)星:</span>
<span style="font-size: 70px; color: red;" id="Lucky" class="title"></span>
<div style="text-align: -webkit-center;"><button onclick="go()" class="button">走你</button></div>
</body>
<script type="text/javascript">
//鼠標(biāo)單擊事件
var stuInterval;
var flag = false;
//點(diǎn)擊開(kāi)始事件
function go(){
if(flag != false){
return;
}
flag = true;
setTimeout(function(){
flag = false;
},15000);
time();//調(diào)用時(shí)間倒計(jì)時(shí)方法
//循環(huán)選取學(xué)生
stuInterval=setInterval(function(){
var ran=Math.floor(Math.random()*34+1);
var id="student_"+ran;
//獲取到文本值并且賦屬性
var td=document.getElementById(id);
//刪除之前的樣式
var stuO = document.getElementsByClassName("select");
if(stuO.length != 0){
stuO[0].setAttribute("class","");
}if(stuO){
td.setAttribute("class","select");
var stuname = td.innerText;
document.getElementById("Lucky").innerText = stuname;
}
},200)
}
//時(shí)間倒計(jì)時(shí)
function time(){
var t=10;
var int=setInterval(function(){
--t;
var tspan=document.getElementById("Ten");
tspan.innerText=t;
if(t==0){
clearInterval(int);
clearInterval(stuInterval);//延時(shí)特殊情況
}
},1000);
}
</script>
</html>

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
-
微信小程序?qū)崿F(xiàn)彈出輸入框代碼實(shí)例
最近在寫(xiě)一個(gè)微信小程序,有一個(gè)需求是點(diǎn)擊一個(gè)按鈕后,出現(xiàn)一個(gè)輸入框,然后根據(jù)用戶的輸入再進(jìn)行操作,所以這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)彈出輸入框的相關(guān)資料,需要的朋友可以參考下 2023-09-09
-
防止動(dòng)態(tài)加載JavaScript引起的內(nèi)存泄漏問(wèn)題
利用Script標(biāo)簽可以跨域加載并運(yùn)行一段JavaScript腳本, 但Neil Fraser先前已指出,腳本運(yùn)行后資源并沒(méi)被釋放,即使是Script標(biāo)簽移除后。 2009-10-10
-
js通過(guò)iframe加載外部網(wǎng)頁(yè)的實(shí)現(xiàn)代碼
這篇文章主要介紹了js通過(guò)iframe加載外部網(wǎng)頁(yè)的實(shí)現(xiàn)代碼,需要的朋友可以參考下 2015-04-04
-
JS/HTML5游戲常用算法之碰撞檢測(cè) 包圍盒檢測(cè)算法詳解【凹多邊形的分離軸檢測(cè)算法】
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測(cè) 包圍盒檢測(cè)算法,結(jié)合實(shí)例形式詳細(xì)分析了javascript針對(duì)凹多邊形的分離軸檢測(cè)算法相關(guān)概念、原理、實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下 2018-12-12
-
表單提交前觸發(fā)函數(shù)返回true表單才會(huì)提交
這篇文章主要介紹了表單提交前觸發(fā)函數(shù)當(dāng)返回true表單才會(huì)提交的具體實(shí)現(xiàn),需要的朋友可以參考下 2014-03-03
-
Javascript設(shè)計(jì)模式之觀察者模式(推薦)
觀察者模式有時(shí)也稱為發(fā)布--訂閱模式,在觀察者模式中,有一個(gè)觀察者可以管理所有的目標(biāo),等到有狀態(tài)發(fā)生改變的時(shí)候發(fā)出通知 2016-03-03
-
JavaScript滑動(dòng)驗(yàn)證功能實(shí)現(xiàn)詳細(xì)代碼
這篇文章主要給大家介紹了關(guān)于JavaScript滑動(dòng)驗(yàn)證功能實(shí)現(xiàn)的相關(guān)資料,滑動(dòng)拼圖驗(yàn)證功能是一種常見(jiàn)的網(wǎng)站人機(jī)驗(yàn)證方法,旨在防止惡意機(jī)器人或自動(dòng)化程序?qū)W(wǎng)站進(jìn)行惡意攻擊,需要的朋友可以參考下 2024-06-06
最新評(píng)論
本文實(shí)例為大家分享了JS實(shí)現(xiàn)隨機(jī)抽選獲獎(jiǎng)?wù)叩木唧w代碼,供大家參考,具體內(nèi)容如下
<!--2018年9月12日——————幸運(yùn)抽獎(jiǎng)--> <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .select{ background: #3399FF; color:white; } .button{ border-radius: 10px; height: 100px; font-size: 25px; width: 100px; background-color: #3399FF; color: white; } .title{ font-family: cursive; } </style> </head> <body> <div style="text-align:-webkit-center;font-size: 57px;color: #3399FF;" class="title">抽獎(jiǎng)人員名單</div> <table style="border:1px solid #ccc; width:800px; height:400px; text-align: center; margin: auto;" background="C:\Users\Administrator\Desktop\%application%\360壁紙\50736.jpg" > <tr> <td id="student_1">謝林峰</td> <td id="student_2">卿明珠</td> <td id="student_3">袁龍</td> <td id="student_4">周志明</td> <td id="student_5">秦玉萍</td> <td id="student_6">金暉</td> <td id="student_7">陶靈峰</td> <td id="student_8">廖楊明</td> </tr> <tr> <td id="student_9">胡雄</td> <td id="student_10">胡俊凡</td> <td id="student_11">李欣</td> <td id="student_12">易君</td> <td id="student_13">湛威</td> <td id="student_14">古海平</td> <td id="student_15">潘杰杰</td> <td id="student_16">伍光政</td> </tr> <tr> <td id="student_17">譚談</td> <td id="student_18">周強(qiáng)</td> <td id="student_19">陳輝</td> <td id="student_20">李庚云</td> <td id="student_21">吳玉風(fēng)</td> <td id="student_22">伍鵬</td> <td id="student_23">蔡?hào)|龍</td> <td id="student_24">胡俊飛</td> </tr> <tr> <td id="student_25">文捷頻</td> <td id="student_26">唐明</td> <td id="student_27">吳鑫培</td> <td id="student_28">唐翌</td> <td id="student_29">鄒家歡</td> <td id="student_30">劉朋</td> <td id="student_31">周文才</td> <td id="student_32">陽(yáng)小松</td> </tr> <tr> <td id="student_33">張明博</td> <td id="student_34">嚴(yán)偉</td> <td id="student_"></td> <td id="student_"></td> <td id="student_"></td> <td id="student_"></td> <td id="student_"></td> <td id="student_"></td> </tr> </table> <sapn style="margin-left: 430px;">抽獎(jiǎng)倒計(jì)時(shí):</sapn><span id="Ten" style="color:red;font-size: 70px;">10</span> <span style="color:red">s</span> <span style="margin-left: 220px;">幸運(yùn)星:</span> <span style="font-size: 70px; color: red;" id="Lucky" class="title"></span> <div style="text-align: -webkit-center;"><button onclick="go()" class="button">走你</button></div> </body> <script type="text/javascript"> //鼠標(biāo)單擊事件 var stuInterval; var flag = false; //點(diǎn)擊開(kāi)始事件 function go(){ if(flag != false){ return; } flag = true; setTimeout(function(){ flag = false; },15000); time();//調(diào)用時(shí)間倒計(jì)時(shí)方法 //循環(huán)選取學(xué)生 stuInterval=setInterval(function(){ var ran=Math.floor(Math.random()*34+1); var id="student_"+ran; //獲取到文本值并且賦屬性 var td=document.getElementById(id); //刪除之前的樣式 var stuO = document.getElementsByClassName("select"); if(stuO.length != 0){ stuO[0].setAttribute("class",""); }if(stuO){ td.setAttribute("class","select"); var stuname = td.innerText; document.getElementById("Lucky").innerText = stuname; } },200) } //時(shí)間倒計(jì)時(shí) function time(){ var t=10; var int=setInterval(function(){ --t; var tspan=document.getElementById("Ten"); tspan.innerText=t; if(t==0){ clearInterval(int); clearInterval(stuInterval);//延時(shí)特殊情況 } },1000); } </script> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崿F(xiàn)彈出輸入框代碼實(shí)例
最近在寫(xiě)一個(gè)微信小程序,有一個(gè)需求是點(diǎn)擊一個(gè)按鈕后,出現(xiàn)一個(gè)輸入框,然后根據(jù)用戶的輸入再進(jìn)行操作,所以這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)彈出輸入框的相關(guān)資料,需要的朋友可以參考下2023-09-09防止動(dòng)態(tài)加載JavaScript引起的內(nèi)存泄漏問(wèn)題
利用Script標(biāo)簽可以跨域加載并運(yùn)行一段JavaScript腳本, 但Neil Fraser先前已指出,腳本運(yùn)行后資源并沒(méi)被釋放,即使是Script標(biāo)簽移除后。2009-10-10js通過(guò)iframe加載外部網(wǎng)頁(yè)的實(shí)現(xiàn)代碼
這篇文章主要介紹了js通過(guò)iframe加載外部網(wǎng)頁(yè)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-04-04JS/HTML5游戲常用算法之碰撞檢測(cè) 包圍盒檢測(cè)算法詳解【凹多邊形的分離軸檢測(cè)算法】
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測(cè) 包圍盒檢測(cè)算法,結(jié)合實(shí)例形式詳細(xì)分析了javascript針對(duì)凹多邊形的分離軸檢測(cè)算法相關(guān)概念、原理、實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2018-12-12表單提交前觸發(fā)函數(shù)返回true表單才會(huì)提交
這篇文章主要介紹了表單提交前觸發(fā)函數(shù)當(dāng)返回true表單才會(huì)提交的具體實(shí)現(xiàn),需要的朋友可以參考下2014-03-03Javascript設(shè)計(jì)模式之觀察者模式(推薦)
觀察者模式有時(shí)也稱為發(fā)布--訂閱模式,在觀察者模式中,有一個(gè)觀察者可以管理所有的目標(biāo),等到有狀態(tài)發(fā)生改變的時(shí)候發(fā)出通知2016-03-03JavaScript滑動(dòng)驗(yàn)證功能實(shí)現(xiàn)詳細(xì)代碼
這篇文章主要給大家介紹了關(guān)于JavaScript滑動(dòng)驗(yàn)證功能實(shí)現(xiàn)的相關(guān)資料,滑動(dòng)拼圖驗(yàn)證功能是一種常見(jiàn)的網(wǎng)站人機(jī)驗(yàn)證方法,旨在防止惡意機(jī)器人或自動(dòng)化程序?qū)W(wǎng)站進(jìn)行惡意攻擊,需要的朋友可以參考下2024-06-06