js随机点名_js实现随机抽选效果、随机抽选红色球效果实例代码

【www.bbyears.com--js教程】

  

  go

  stop

  <scripttype="text/javascript">

  var wrap = document.getElementById("wrap");

  var goBtn = document.getElementById("goBtn");

  var stopBtn = document.getElementById("stopBtn");

  function rnd(min, max) {

    return parseInt(Math.random()*(max - min + 1) + min);

  }

  function rndArray(min, max, length) {

    //先定义一个空数组

    var arr = [];

    //生成一个长度为7的数组

    while(arr.length

      //生成一个随机数

      varrand=rnd(min, max);

      //判断生成的随机数rand是否在数组arr里,果然不在，就将这个随机数插入到数组里，如果在，执行下一次循环

      if(arr.indexOf(rand) == -1) {

        arr.push(rand);

      }

    }

    arr.sort(function(a, b){return a - b;})

    return arr;

  }

    //rndArray(最小范围值,最大范围值,个数)

  wrap.innerHTML=rndArray(1,33,7);

  vartimer=0;

  goBtn.onclick=function() {

    clearInterval(timer);

    timer=setInterval(function() {

      wrap.innerHTML=rndArray(1,33,7);

    },100)

    console.log(timer);

  }

  stopBtn.onclick=function() {

    clearInterval(timer);

  }

  </script>

随机抽选

  

    * {

      margin:0;

      padding: 0;

    }

    #wrap {

      width:621px;

      margin:0 auto;

      padding:50px 0;

      background-color:rgb(255, 242, 242);

    }

    #inner {

      width:490px;

      margin:0 auto;

      overflow: hidden;

    }

    #inner span {

      float: left;

      width:30px;

      height: 30px;

      border-radius: 15px;

      border:1px solid #d9d9d9;

      line-height: 30px;

      text-align: center;

      color:#333;

      background-color: #f8f8f8;

      margin:18px 6px;

    }

    #inner span.active {

      background-color: red;

      color:#fff;

    }

    #wrap p {

      text-align: center;

    }

    button {

      border:none;

      outline: none;

      width:120px;

      height: 40px;

      line-height: 40px;

      font-size: 20px;

      border-radius: 4px;

    }

    #selectBtn {

      background-color: red;

      color:#fff;

    }

      01

      02

      03

      04

      05

      06

      07

      08

      09

      10

      11

      12

      13

      14

      15

      16

      17

      18

      19

      20

      21

      22

      23

      24

      25

      26

      27

      28

      29

      30

      31

      32

      33

      机选红球

      清空

  <scripttype="text/javascript">

  var wrap = document.getElementById("wrap");

  var selectBtn = document.getElementById("selectBtn");

  var clearBtn = document.getElementById("clearBtn");

  var ballList = document.getElementById("wrap").getElementsByTagName("span");

  function rnd(min, max) {

    return parseInt(Math.random()*(max - min + 1) + min);

  }

  function rndArray(min, max, length) {

    //先定义一个空数组

    var arr = [];

    //生成一个长度为7的数组

    while(arr.length

      //生成一个随机数

      varrand=rnd(min, max);

      //判断生成的随机数rand是否在数组arr里,果然不在，就将这个随机数插入到数组里，如果在，执行下一次循环

      if(arr.indexOf(rand) == -1) {

        arr.push(rand);

      }

    }

    arr.sort(function(a, b){return a - b;})

    return arr;

  }

  selectBtn.onclick=function() {

    for(varj=0; j < ballList.length; j++) {

      ballList[j].className=""; 

    }

    vararr=rndArray(1,33,7);

    console.log(arr);

    for(vari=0; i < arr.length; i++) {

      ballList[arr[i]-1].className="active";

    }

  }

  clearBtn.onclick=function() {

    for(varj=0; j < ballList.length; j++) {

      ballList[j].className=""; 

    }

  }

  </script>

要实现点击得到自动随机数还得在clearBtn.onclick前面添加个定时器

vartimer = 0;

  selectBtn.onclick =function() {

    clearTimeout(timer);

    timer = setInterval(selectBall,100);

    setTimeout(function() {

      clearTimeout(timer);

    },3000)

    // clearTimeout(timer);

  }

这样就实现了动态图的功能了(*^__^*) 嘻嘻！

本文来源：http://www.bbyears.com/wangyezhizuo/119328.html