7-16学习内容

最新推荐文章于 2023-11-16 23:59:17 发布

My0720

最新推荐文章于 2023-11-16 23:59:17 发布

阅读量120

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/My0720/article/details/125831654

版权

遗留问题：

1.random、math返回值是什么？

2.const?

3.数组的操作（.for)?

今日：

随机点名案例（注意局部变量与全局变量的问题）

数组长度

全选中“伪数组”问题

自增自减有隐式转换

比较运算符也有隐式转换

事件

事件是在编程时系统内发生的动作或者发生的事情（比如点击按钮）

事件监听

语法：

元素.addEventListener('事件', 要执行的函数)

三要素：事件源，事件，调用的函数

使用顺序：

1.获取元素

2.事件监听（注册事件）

随机点名案例

* {
            margin: 0;
            padding: 0;
        }

        h2 {
            text-align: center;
        }

        .box {
            width: 600px;
            margin: 50px auto;
            display: flex;
            font-size: 25px;
            line-height: 40px;
        }

        .qs {

            width: 450px;
            height: 40px;
            color: red;

        }

        .btns {
            text-align: center;
        }

        .btns button {
            width: 120px;
            height: 35px;
            margin: 0 50px;
        }

<h2>随机点名</h2>
    <div class="box">
        <span>名字是：</span>
        <div class="qs">这里显示姓名</div>
    </div>
    <div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>

// 数据数组
        let arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        // 1. 获取元素  两个按钮 + div
        // 一定不要忘记加点  因为里面写css类选择器
        let start = document.querySelector('.start')
        let end = document.querySelector('.end')
        let qs = document.querySelector('.qs')
        // timer 要是全局变量
        let timer = 0
        // random 要是全局变量
        let random = 0
        // 2. 给开始按钮注册事件
        start.addEventListener('click', function () {
            // 随机抽数据--- 快速不断的抽取 间歇函数定时器
            timer = setInterval(function () {
                random = getRandom(0, arr.length - 1)
                qs.innerHTML = arr[random]
            }, 25)
            // 如果到了最后一个，就禁用两个按钮
            if (arr.length === 1) {
                // console.log('没了')
                // start.disabled = true
                // end.disabled = true
                start.disabled = end.disabled = true
            }
        })
        // 3. 给结束按钮注册事件  本质是停止定时器
        end.addEventListener('click', function () {
            // 停止定时器
            clearInterval(timer)
            // 删除数组元素
            arr.splice(random, 1)
            // console.log(arr)
        })

注意：设置定时器和随机数时，应当先在函数外定义，否则后面调用会报错