js定时器函数的使用

 本篇文章实现了使用js中的setInterval定时器函数实现了对数组元素的一个随机显示，并且对按钮控件添加了事件监听，让他们实现了点击开始就开始随机循环数组的元素，当点击停止的时候，界面上显示的内容就停止。

setInterval的语法：

setInterval(fn,times)：是表示每间隔times毫秒后执行fn函数  

以及我们还使用了innerHTML属性：

innerHTML代表标签的html内容（代表起始标签和结束标签之间的内容），我们使用innerHTML将我们得到的数组随机出的元素显示在页面上，这样我们才可以看到效果。

<div>
        <span id="name">今天看什么？</span>
        <button id="start_btn">开始</button>
        <button id="end_btn">结束</button>
 </div>

<script>
    // 获取控件
    let start_btn = document.getElementById('start_btn');
    let end_btn = document.getElementById('end_btn');
    let name_span = document.getElementById('name');
    // 定义数组并添加元素
    var nameArr = ['猎罪图鉴','开端','一闪一闪亮星星','麻辣香锅','我在他乡挺好的','人世间','亲爱的小孩','唐朝诡事录','余生，请多指教','暗格里的秘密','神雕侠侣','月生沧海','民国奇探',];
    let timer;
    // 定义函数实现随机功能
    function sName(){
        // 创建随机数并赋值给i
        let i = Math.floor(Math.random() * (nameArr.length));
        // 将随机得到的元素添加到span标签内显示
         name_span.innerHTML = nameArr[i];
    }
    // 给控件添加事件监听
    start_btn.addEventListener('click',function(){
        window.clearInterval(timer);
        timer = window.setInterval(sName,200);
    });
    end_btn.addEventListener('click',function(){
         window.clearInterval(timer);
    });
</script>

<style>
    div:nth-of-type(1){
        margin: 0 auto;
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
    }
    div span{
        display: block;
        width: 200px;
        height: 100px;
        background-color: pink;
        position: absolute;
        top: 25%;
        left: 30%;
        text-align: center;
        line-height: 100px;
        font-size: 20px;
        color: #fff;
    }
    div button{
        width: 100px;
    }
    div button:nth-of-type(1){
        position: absolute;
        top: 60%;
         left: 30%;
    }
    div button:nth-of-type(2){
        position: absolute;
        top: 60%;
        left: 50%;
    }
</style>