js简单抽奖代码
2015-01-16 15:09
197 查看
年底了各个公司都有抽奖活动,我也写了一个超级简单的代码来实现抽奖效果,这里没有华丽的Css3效果,但却有短小精悍的js代码。核心:js的Math对象和Array对象
效果图:
![](data:image/png;base64,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)
code:
demo:http://2.liteng.sinaapp.com/javascript/award.html
github:github:https://github.com/litengdesign/award
效果图:
code:
<!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 之间的随机数。 * -floor():获取整数 * 数组操作: * - splice(x,y); x:起始位置, y:获取并删除个数 */ 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(){ //引用数组 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>
demo:http://2.liteng.sinaapp.com/javascript/award.html
github:github:https://github.com/litengdesign/award