开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第31天，点击查看活动详情

前言

前面我们讲解了JS跟CSS相关知识点，今天我们利用这些知识来简单做个案例——点名器，通过案例来巩固学习的知识点，最终效果图如下：

实现

点名器具体的效果：当我们点击开始点名的时候，页面中间的就会循环出现我们设置好的名字，点击停的时候就会出现选中被点到的名字。

布局

首先第一步肯定需要把我们的页面画出来，然后再去添加事件效果。根据效果图我们看到“开始”是在屏幕中间，下面按钮中的文字也是在中间，这个就需要用到垂直水平居中的方法；按钮是页面底部，我们可以利用定位去实现。

1.实现垂直水平居中。我们可以利用text-align,line-height这两个属性实现
text-align:center——文字水平居中；line-height:height(设置的高度)——实现垂直居中。

2.定位position。下面两个按钮我们固定在页面底部，这时候利用position:fixed去实现该效果。那么通过上面的思路再加上一些属性就能将我们的页面效果实现出来：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
     /* reset样式 */
      * {
        padding: 0px;
        margin: 0px;
      }
     /* 文字垂直水平居中 */
      .names {
        width: 100%;
        height: 500px;
        line-height: 500px;
        font-size: 70px;
        text-align: center;
        color: #ff9800;
      }
      /* 利用定位将按钮固定 */
      .btn {
        width: 100%;
        height: 50px;
        line-height: 50px;
        position: fixed;
        bottom: 0px;
      }
      .start,
      .stop {
        width: 50%;
        float: left;
        background-color: #ff9800;
        color: white;
        text-align: center;
	/* 鼠标移动上去出现'小手'' */
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="names" id="names">开始</div>
    <div class="btn">
      <div class="start">开始点名</div>
      <div class="stop">停</div>
    </div>
  </body>
</html>

事件

接下来我们就要添加事件，实现点名的效果，这里面有两个事件，一个点名事件，一个是停止事件：

点名事件：点名事件效果是在页面出现循环出现点名者名字。

首先需要设置好点名的名字，利用数组去设置名字，循环展示数组中的元素。
然后展示名字，那么就需要获取"开始"所在的dom元素，然后利用定时器setsetInterval将dom元素内容换成数组中的元素。
循环效果，为了实现循环效果，先设置一个下标，然后通过条件语句，如果下标等于数组最后一位元素的下标，就将下标赋值为0从头开始循环。

停止事件：因为我们是利用的定时器，所以清除定时器就能实现停止效果。

     var timer;//定时器
      var i = 0;//下标
      var names = [
        '大娃',
        '二娃',
        '三娃',
        '四娃',
        '五娃',
        '六娃',
        '七娃',
        '金刚葫芦娃'
      ];//名字
      //点名
      function showNames() {
        clearInterval(timer);
        timer = setInterval(function () {
          //开始点名
          document.getElementById('names').innerHTML = names[i];
          i++;
          if (i == names.length - 1) {
            i = 0;
          }
        }, 3);
      }
      //停止
      function stop() {
        clearInterval(timer);
      }

总结

以上就是点名器案例，要点就是定时器去实现点名这一个效果，CSS方面运用了垂直水平居中的方法，具体页面效果我们可以发挥自己的想象力去设置，点名函数我们也可以利用Math.random()方法做成随机出现名称。

JS案例——点名器

前言

实现

布局

事件

总结