本文章讲解一个JavaScript的小案例，九宫格抽奖，点击按钮开始抽奖，点击结束按钮确定抽到的奖项。当然也可以用于日常班级点名等用途。

为了方便大家使用，把全部代码放在最后。

效果如下

代码部分

效果如下

代码部分

dom结构

写的比较简单，就是一个大的div，里面套九个div，下面写两个按钮。大家可以根据具体需求扩充。

<h1>抽奖</h1>
    <div id="big">
        <div class="box">一等奖</div>
        <div class="box">二等奖</div>
        <div class="box">三等奖</div>
        <div class="box">参与奖</div>
        <div class="box">特等奖</div>
        <div class="box">参与奖</div>
        <div class="box">四等奖</div>
        <div class="box">谢谢惠顾</div>
        <div class="box">五等奖</div>
    </div>
<button id="kai">开始</button>
<button id="jie">结束</button>

样式

样式部分也很简单，简单的写了一下大小和边框。大家可以根据自己需求写样式。

 * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        #big {
            width: 300px;
            height: 300px;
            box-shadow: 0px 0px 1px 1px gray;
            display: flex;
            flex-wrap: wrap;
        }

        .box {
            width: 100px;
            height: 100px;
            border: 1px black solid;
        }

        h1 {
            color: red;
        }
        button{
            height: 30px;
            width: 60px;
        }

JavaScript代码

获取dom元素

根据html代码中，id和类名获取元素。

getElementsByClassName("box")会获取类名为box的所有元素组成一个伪数组。而id因为其唯一性，只会获取一个。

var kai = document.getElementById("kai");
var jie = document.getElementById("jie");
var box = document.getElementsByClassName("box");

随机数函数

我们首先写一个随机数的函数，参数为最小值和最大值，此函数会随机生成一个最大值和最小值之间的随机数。

先做判断，如果最大值和最小值写的反了，就调换二者的位置。

然后借助Math.random()，Math.random()是令系统随机选取大于等于 0.0 且小于 1.0 的伪随机 double 值，Math.random() * (max - min + 1) + min这个公式可以获取min到max的一个随机值，然后使用Math.floor()，Math.floor()函数总是返回小于等于一个给定数字的最大整数，这样返回的随机数就是个整数。

代码：

function random1(min, max) {//随机数函数
  if (min >= max) {//如果最大值和最小值写反了，就倒换它们俩
    var a;
    a = max;
    max = min;
    min = a;
  }
  return Math.floor(Math.random() * (max - min + 1) + min);//根据最大值和最小值区间，生成一个此区间的随机数
}

背景颜色改变函数

box.length是格子的数量，格子div的类名为 box，我们使用var box = document.getElementsByClassName("box");获取一个类名为“box”的div的伪数组，所以box.length为格子的数量。

我们使用两个for循环嵌套，将所有box的背景颜色置为null。

然后调用之前的随机数函数，在所有box背景颜色置为null的情况下，将box[随机数]的颜色置为红色。

代码：

function yanse() {
  // console.log(random1(0,8));

  for (var j = 0; j < box.length; j++) {
    for (var z = 0; z < box.length; z++) {
      box[z].style.cssText = "background-color:null";
    }
    var a = random1(0, 8);
    box[a].style.background = "red";
  }
}

点击事件

我们给开始按钮添加点击事件，点击后就生成一个间隔定时器，每200毫秒执行一次颜色变化函数。在点击开始后，将开始按钮更改为无法点击状态。每200毫秒9个div的背景颜色，就有一个随机变红。

点击结束按钮，就会清空定时器，开始按钮更改为可以点击状态，并且有一个div的背景颜色变成了红色，完成我们想要的效果。

代码：

kai.onclick = function () {
  var ding = setInterval(yanse, 200);//间隔定时器，每200毫秒执行一次颜色变化函数
  kai.disabled = "true"; //按钮无法点击
  jie.onclick = function () {//结束按钮点击事件
    clearInterval(ding);//清空定时器
    kai.disabled = ""; //按钮无法点击

  };
};

代码集合

JavaScript：

var kai = document.getElementById("kai");
var jie = document.getElementById("jie");
var box = document.getElementsByClassName("box");
// var str = [0, 1, 2, 3, 4, 5, 6, 7, 8];

kai.onclick = function () {
  var ding = setInterval(yanse, 200);
  kai.disabled = "true"; //按钮无法点击
  jie.onclick = function () {
    clearInterval(ding);
    kai.disabled = ""; //按钮无法点击

  };
};

function random1(min, max) {
  if (min >= max) {
    var a;
    a = max;
    max = min;
    min = a;
  }
  return Math.floor(Math.random() * (max - min + 1) + min);
}
function yanse() {
  // console.log(random1(0,8));
  // var i = 0;
  for (var j = 0; j < box.length; j++) {
    for (var z = 0; z < box.length; z++) {
      box[z].style.cssText = "background-color:null";
    }
    var a = random1(0, 8);
    box[a].style.background = "red";
  }
}

html：

<h1>抽奖</h1>
    <div id="big">
        <div class="box">一等奖</div>
        <div class="box">二等奖</div>
        <div class="box">三等奖</div>
        <div class="box">参与奖</div>
        <div class="box">特等奖</div>
        <div class="box">参与奖</div>
        <div class="box">四等奖</div>
        <div class="box">谢谢惠顾</div>
        <div class="box">五等奖</div>
    </div>
    <button id="kai">开始</button>
    <button id="jie">结束</button>

css样式：

        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        #big {
            width: 300px;
            height: 300px;
            box-shadow: 0px 0px 1px 1px gray;
            display: flex;
            flex-wrap: wrap;
        }

        .box {
            width: 100px;
            height: 100px;
            border: 1px black solid;
        }

        h1 {
            color: red;
        }
        button{
            height: 30px;
            width: 60px;
        }

感谢阅读。

JavaScript小案例-点击抽奖

效果如下

代码部分

dom结构

样式

JavaScript代码

获取dom元素

随机数函数

背景颜色改变函数

点击事件

代码集合

猜你喜欢