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