js簡單抽獎(jiǎng)代碼
更新時(shí)間：2015年01月16日 17:42:56 投稿：mdxy-dxy
年底了各個(gè)公司都有抽獎(jiǎng)活動(dòng)，我也寫了一個(gè)超級簡單的代碼來實(shí)現(xiàn)抽獎(jiǎng)效果，這里沒有華麗的Css3效果，但卻有短小精悍的js代碼。
核心：js的Math對象和Array對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>random</title>
<style>
#awardListDom{width: 100%;}
</style>
</head>
<body>
<label for="awardListDom">獎(jiǎng)項(xiàng)列表</label><br>
<input type="text" value="" id="awardListDom"> <br>
<label for="num">抽到的獎(jiǎng)</label><br>
<input type="text" value="" id="num"> <br>
<button id="submit">開始抽獎(jiǎng)</button>
<script>
/*
* 思路：隨機(jī)抽獎(jiǎng)，抽一個(gè)獎(jiǎng)項(xiàng)便減少一個(gè)
* Math 對象方法：http://www.w3school.com.cn/jsref/jsref_obj_math.asp
* -random():返回 0 ~ 1 之間的隨機(jī)數(shù)。
* -floor():獲取整數(shù)
* 數(shù)組操作：
* - splice(x,y); x:起始位置， y:獲取并刪除個(gè)數(shù)
*/
function random(min,max){
return Math.floor(min+Math.random()*(max-min));
}
var awardListDom=document.getElementById("awardListDom"),
num=document.getElementById("num"),
submit=document.getElementById("submit");
var awardList=["一等獎(jiǎng)","二等獎(jiǎng)","二等獎(jiǎng)","三等獎(jiǎng)","三等獎(jiǎng)","三等獎(jiǎng)","鼓勵(lì)獎(jiǎng)","鼓勵(lì)獎(jiǎng)","鼓勵(lì)獎(jiǎng)","鼓勵(lì)獎(jiǎng)","謝謝參與","謝謝參與","謝謝參與","謝謝參與","謝謝參與","謝謝參與"];
awardListDom.value=awardList;
submit.onclick=function(){
//引用數(shù)組
var oldArray=awardList;
var rNum=random(0,oldArray.length);
if(oldArray.length<1){
awardListDom.value="活動(dòng)結(jié)束";
num.value="活動(dòng)結(jié)束";
}
else{
num.value=oldArray[rNum];
oldArray.splice(rNum,1);
awardListDom.value=oldArray;
}
}
</script>
</body>
</html>
相關(guān)文章
這篇文章主要介紹了判斷JS對象是否擁有某種屬性的兩種方式，有需要的朋友可以參考一下2013-12-12
這篇文章主要介紹了對JavaScript中this指針的新理解分享,本文講解了方法調(diào)用模式、函數(shù)調(diào)用模式、構(gòu)造函數(shù)調(diào)用模式、Apply調(diào)用模式中的this指針理解,需要的朋友可以參考下2015-01-01
JS實(shí)現(xiàn)頁面鼠標(biāo)點(diǎn)擊出現(xiàn)圖片特效
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)頁面鼠標(biāo)點(diǎn)擊出現(xiàn)圖片特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了JS監(jiān)聽事件的疊加和移除功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-11-11
JS實(shí)現(xiàn)的找零張數(shù)最小問題示例
這篇文章主要介紹了JS實(shí)現(xiàn)的找零張數(shù)最小問題,涉及javascript數(shù)學(xué)運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
JavaScript中定時(shí)器setTimeout()和setInterval()的用法
本文詳細(xì)講解了JavaScript中定時(shí)器setTimeout()和setInterval()的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
下面小編就為大家分享一篇js讀取本地文件的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了JavaScript數(shù)組和循環(huán)詳解,本文講解了循環(huán)遍歷數(shù)組、按順序存儲和訪問值、以相反的順序存儲和訪問值、在數(shù)組中搜索等內(nèi)容,需要的朋友可以參考下2015-04-04
JavaScript中instanceof運(yùn)算符的用法總結(jié)
這篇文章主要是對JavaScript中instanceof運(yùn)算符的用法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11![JavaScript switch case 的用法實(shí)例[范圍]](http://img.jbzj.com/images/xgimg/bcimg9.png)
JavaScript switch case 的用法實(shí)例[范圍]
JavaScript switch case 的用法實(shí)例，大家可以參考下。2009-09-09