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="活動結(jié)束";
num.value="活動結(jié)束";
}
else{
num.value=oldArray[rNum];
oldArray.splice(rNum,1);
awardListDom.value=oldArray;
}
}
</script>
</body>
</html>
相關(guān)文章
動態(tài)創(chuàng)建的表格單元格中的事件實現(xiàn)代碼
好久沒有搞網(wǎng)頁了，今天重新弄了一個 ，做個動態(tài)表格，具體的實現(xiàn)代碼，大家可以自己寫吧2008-12-12
這篇文章主要介紹了js簡單工廠模式用法,實例分析了javascript工廠模式的實現(xiàn)原理,需要的朋友可以參考下2015-06-06
JavaScript中清空數(shù)組的方法總結(jié)
本文給大家總結(jié)了三種js清空數(shù)組的方法，每種方法都與眾不同，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-12-12
微信小程序?qū)崿F(xiàn)圖片選擇并預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圖片選擇并預(yù)覽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
3種js實現(xiàn)string的substring方法
這篇文章主要介紹了3種javascript實現(xiàn)string的substring方法，需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細(xì)介紹了Vue指令的鉤子函數(shù)使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
JavaScript通過join函數(shù)連接數(shù)組里所有元素的方法
這篇文章主要介紹了JavaScript通過join函數(shù)連接數(shù)組里所有元素的方法,實例分析了javascript中join函數(shù)的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了手把手15分鐘搭一個企業(yè)級腳手架，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
drag-and-drop實現(xiàn)圖片瀏覽器預(yù)覽
chrome的drag and drop API，它能將本地的圖片放到瀏覽器中進(jìn)行預(yù)覽，猜想一下當(dāng)我們把圖片拖拽到瀏覽器里會發(fā)生什么事情，你的瀏覽器試圖打開一個新的頁面并加載這個圖片。這篇文章給我們介紹drag-and-drop實現(xiàn)圖片瀏覽器預(yù)覽，需要的朋友可以參考下2015-08-08
本文主要介紹了js判斷PC端與移動端跳轉(zhuǎn)的方法，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03