[JavaScript知识库]web前端必须功法之一：暂停取值

web前端必须功法之一：暂停取值

案例效果：

<style>
       #box{
             border: 1px solid #cccccc;
             width: 300px;
             height: 300px;
             text-align: center;
             line-height: 300px;
             font-size: 50px;
       }
</style>

      <div align = "center">
             <div id="box">
                   今天吃什么？
             </div>
             <br>
             <input type="button" value="开始" id="start" />
             <input type="button" value="停止" id="stop" />
      </div>

   <script>
        //定义数组，存放数据
        var  arr =  ["火锅","烧烤","快餐便当","特色小食","意面披萨","韩式料理","轻食沙拉","能量西餐","中国菜"];

        //获取元素
        var  box = document.getElementById("box");
        var  start = document.getElementById("start");
        var  stop = document.getElementById("stop");

        //索引值
        var index = 0;

        //定时任务ID
        var timerId;

        //默认不显示暂停按钮
        stop.style.display = "none";

        //绑定开始按钮的点击事件

        start.onclick = function(){
              timerId = setInterval(function(){
                    //获取当前数组中的值并赋值给我们的div
                    box.innerHTML = arr[index];
                    //更新索引
                    index++;
                    //判断索引是否超过
                    if(index > arr.length - 1){
                           index = 0;
                    }
              },50)
              //显示暂停按钮
              stop.style.display = "block";
              //隐藏开始按钮
              start.style.display = "none";
        }

        //绑定停止按钮的点击事件
        stop.onclick= function(){
                 //清除定时器
                 clearInterval(timerId);
                 //显示开始按钮
                 start.style.display = "block";
                 //隐藏停止按钮
                 stop.style.display = "none";
        }
 
   </script>

暂停取值总结

1.要给开始按钮绑定点击事件
2.获取当前数组中的值并赋值给我们的div，并更新索引
3.要判断索引是否超过