javascript的setInterval()和setTimeout()学习

知识点

  • setInterval() 按照指定周期执行某个函数
  • clearInterval() 取消setInterval()的定时执行操作
  • setTimeout() 在指定毫秒数后执行某个函数
  • setInterval()会一直循环调用函数，直到clearInterval()被调用或窗口关闭。
  • clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值
  • 1秒 = 1000毫秒

知识点实例

  • 每秒输出一句："坚持才能学好编程"
setInterval(function(){
    console.log('坚持才能学好编程');
},1000)
  • 2s后弹出 "ok" 提示文本框
setTimeout(function(){
    alert('ok');
},2000)
  • 存在变量i，每500毫秒执行一次i++并输出i的值;
    5秒后停止上述操作
    var i = 0;
    var id = setInterval(function(){  // 获得setInterval()的id值
        i++;
        console.log(i);
    },1000);

    setTimeout(function(){
        clearInterval(id);  // 取消id对应的setInterval()操作
    },5000);

作业练习 - "点兵点将"-小游戏

游戏规则：一个开始按钮，一个停止按钮，一个名字挑选框，一个选中框

  1. 点击开始按钮，显示框每100毫秒换一个名字显示；
  2. 点击停止按钮，则显示框停止换名字，并将当前显示的名字写入选中框。

要求：选中过的名字不被再次选中

作业实现参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点名环节</title>
    <style>
        .pick-area {
            margin: 100px auto 20px;
            width: 400px;
            height: 600px;
            text-align: center;
            border: 1px solid #0a001f;
            background-color: #e3efff;
        }

        .picked-name {
            margin: 50px auto 0;
            padding: 5px 15px;
            width: 200px;
            height: 68px;
            line-height: 68px;
            font-size: 32px;
            font-weight: 600;
            background-color: #3b7b9a;
            color: #a5def1;
        }

        .pick-area button {
            margin: 20px 10px;
            padding: 5px 20px;
            background-color: #0b6694;
            color: #eee;
        }

        .picked-list>ul {
            padding: 10px 20px;
            text-align: left;
        }

        .picked-list>ul>li {
            display: inline-block;
            padding: 5px 15px;
            font-weight: 600;
            color: #cd7919;
        }


    </style>
</head>
<body>

<div class="pick-area">
    <h4>点兵点将</h4>
    <hr>
    <div class="picked-name" id="j-picked"></div>
    <button id="j-start">开始</button>
    <button id="j-stop">停</button>
    <hr>
    <div class="picked-list">
        <h4>选中名单</h4>
        <ul id="picked">

        </ul>
    </div>
</div>


</body>

<script>

    // 滚动数组
    var list = ['小明', '聪聪', '小美', '洋洋', '小p', '平平', '杨杨', '小乐', '米饭', '小七', '阿怪', '面团', '阿晓', '无双', '飞飞'];
    // 全局变量记录setInterval()返回值
    var id;
    // 存放被选中名字
    var picked = [];

    // 显示框给个初值
    document.getElementById('j-picked').innerText = list[0];

    // 在开始按钮上绑定点击事件
    document.getElementById('j-start').onclick = function () {
        id = start();
    }

    // 在停止按钮上绑定点击事件
    document.getElementById('j-stop').onclick = function () {
        stop();
    }

    // 开始按钮
    function start() {
        return id = setInterval(function () {
            var num = Math.floor(Math.random() * list.length);
            document.getElementById('j-picked').innerText = list[num];
        }, 100);
    }

    // 停止按钮
    function stop() {
        clearInterval(id);
        var p = document.getElementById('j-picked').innerText;
        picked.push(p);
        writePickedLi(p);
        removePicked(p);
    }

    // 将选中名单添加到选中列表
    function writePickedLi(p) {
        var li = document.createElement('li');
        var pickedName = document.createTextNode(p);
        li.appendChild(pickedName);
        document.getElementById('picked').append(li);
    }

    // 选中名字移除滚动数组
    function removePicked(v)
    {
        for (var i=0; i<list.length; i++) {
            if(list[i]==v) {
                list.splice(i,1);
            }
        }
    }

</script>
</html>

效果图

posted @ 2021-03-01 10:52  米饭！大米饭  阅读(122)  评论(0)  编辑  收藏  举报