js簡(jiǎn)單抽獎(jiǎng)代碼
更新時(shí)間:2015年01月16日 17:42:56 投稿:mdxy-dxy
年底了各個(gè)公司都有抽獎(jiǎng)活動(dòng),我也寫(xiě)了一個(gè)超級(jí)簡(jiǎn)單的代碼來(lái)實(shí)現(xiàn)抽獎(jiǎng)效果,這里沒(méi)有華麗的Css3效果,但卻有短小精悍的js代碼。
核心:js的Math對(duì)象和Array對(duì)象
<!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">開(kāi)始抽獎(jiǎng)</button> <script> /* * 思路:隨機(jī)抽獎(jiǎng),抽一個(gè)獎(jiǎng)項(xiàng)便減少一個(gè) * Math 對(duì)象方法: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)文章
動(dòng)態(tài)創(chuàng)建的表格單元格中的事件實(shí)現(xiàn)代碼
好久沒(méi)有搞網(wǎng)頁(yè)了,今天重新弄了一個(gè) ,做個(gè)動(dòng)態(tài)表格,具體的實(shí)現(xiàn)代碼,大家可以自己寫(xiě)吧2008-12-12JavaScript中清空數(shù)組的方法總結(jié)
本文給大家總結(jié)了三種js清空數(shù)組的方法,每種方法都與眾不同,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-12-12微信小程序?qū)崿F(xiàn)圖片選擇并預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圖片選擇并預(yù)覽,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-073種js實(shí)現(xiàn)string的substring方法
這篇文章主要介紹了3種javascript實(shí)現(xiàn)string的substring方法,需要的朋友可以參考下2015-11-11JavaScript通過(guò)join函數(shù)連接數(shù)組里所有元素的方法
這篇文章主要介紹了JavaScript通過(guò)join函數(shù)連接數(shù)組里所有元素的方法,實(shí)例分析了javascript中join函數(shù)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03drag-and-drop實(shí)現(xiàn)圖片瀏覽器預(yù)覽
chrome的drag and drop API,它能將本地的圖片放到瀏覽器中進(jìn)行預(yù)覽,猜想一下當(dāng)我們把圖片拖拽到瀏覽器里會(huì)發(fā)生什么事情,你的瀏覽器試圖打開(kāi)一個(gè)新的頁(yè)面并加載這個(gè)圖片。這篇文章給我們介紹drag-and-drop實(shí)現(xiàn)圖片瀏覽器預(yù)覽,需要的朋友可以參考下2015-08-08