主页 / 网络编程 /

js简单抽奖代码

网络编程 2021-07-04 21:47www.168986.cn编程入门
年底了各个公司都有抽奖活动，我也写了一个超级简单的代码来实现抽奖效果，这里没有华丽的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://.w3school../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:

github:

上一篇：Javascript基础教程之JavaScript语法 下一篇：JS取得绝对路径的实现代码

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by