JS写一个图片抽奖机

1 首先把静态页面代码完成

 <div class="box">
      <div class="box01">
        <div class="box03"></div>
        <button>开始</button>
        <button>结束</button>
      </div>
    </div>

由于这个是学校老师的一个安排工作,需要短时间内看到效果,所以静态页面就没有去很好的做布局，但是功能已经能够实现了.

2 完成对应的css代码

这个时候就已经能够看到自己写的效果了,但是页面比较丑,希望大家看到这个博客的话不要太介意。如果大家想要布局好看一点的话,下方可以留言,我重新发一个

3 接下来就是就是今天的JS代码了

 var btn = document.getElementsByTagName("button");
      var box03 = document.querySelector(".box03");
      var img = document.createElement("img");
      box03.appendChild(img);
      var arr = [
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
        21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38,
        39, 40,
      ];
      var head = "./";
      var timer = null;
      btn[0].addEventListener("click", function () {
        if (timer == null) {
          timer = setInterval(function () {
            var ran = Math.round(Math.random() * arr.length);
            for (var i = 0; i < arr.length; i++) {
              arr[i].display = "none";
            }
            items = arr[ran];
            img.src = head + items + ".jpg";
          }, 1);
          btn[1].addEventListener("click", function () {
            clearInterval(timer);
            timer = null;
          });
        }
      });

1 在页面一上来首先获取到页面的四个元素(开始按钮,结束按钮,图片放置区域,图片)

2 页面加载完成之后,将图片放置到box03中

3 定义一个数组，你有多少张图片就在数组里面定义多少个数

4 定义了一个head是为了去寻找图片在文件夹内的区域

5定义一个null，这里就用到了,防抖知识,我的往期博客里面有具体介绍防抖和节流的作用

6 点击开始按钮抽奖,因为上方定义了一个null值,这里判断一下如果它等于null的时候才开始做随机抽奖抽奖

7 下来就是图片存放位置了

 

7 接下来的代码就是这个抽奖机的核心逻辑了

if (timer == null) {
           //这里定义了一个定时器,在点击结束按钮的时候清除定时器
          timer = setInterval(function () {
            //这里定义一个变量用来做切换时图片究竟是第几张
            //Math.round(Math.random)*arr.length这句话的意思是,因为图片有四十 
  //张,Math.random()*arr.length就是取一个1到数组最后一位的随机数,我们上方定义的数组是整数,所有 
  //Math.round将随机数取整,这样就能够每次取到一个随机数了 .
            var ran = Math.round(Math.random() * arr.length);
  //接下来就是黑马Pink老师经常讲的一句话了（干掉所有人,留下我自己）如果不知道这句话的话可以去看一下 
  // Pink老师讲的Tab栏案例
            for (var i = 0; i < arr.length; i++) {
              arr[i].display = "none";
            }
            items就是你所拿到数组对应的那个数,这里用了一下索引
            items = arr[ran];
            //下面就是一个字符串的拼接了将图片地址一直切换
            img.src = head + items + ".jpg";
          }, 1);
           //点击结束按钮清除定时器,再将上方定义的Timer设置为Null以便于下次点击
          btn[1].addEventListener("click", function () {
            clearInterval(timer);
            timer = null;
          });
        }
         //说到这里回顾一下以前写过的代码,希望对看到这篇文章的你们有所用处