2023.12.10学习笔记

js 定时器有以下两个方法：

• setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
• setTimeout() ：在指定的毫秒数后调用函数或计算表达式。

下面是使用setInterval()轮播图

<script>
        let data = [
        {
            imgSrc:'/img/1.jpg',
            title: '懒羊羊'
        },
        {
            imgSrc:'/img/2.jpg',
            title:'沸羊羊'
        },
        {
            imgSrc:'/img/3.jpg',
            title:'美羊羊'
        },
        {
            imgSrc:'/img/4.jpg',
            title:'喜羊羊'
        },
        {
            imgSrc:'/img/5.jpg',
            title:'暖羊羊'
        },
    ]
    let pic = document.querySelector('.pic');
    let text = document.querySelector('.text');
    //记录图片的张数
    let i = 0;
    //开启定时器
    setInterval(function(){
        i++
        //修改图片的src属性
        pic.src = data[i].imgSrc ;
        //修改文字内容
        text.innerHTML = data[i].title;
        //无缝衔接
        if(i === data.length-1){
            i = -1;
        }
        //i === 8 ? i = -1 : i
    },3000);

    </script>

效果图如上，每3秒换一次图片。

阅读须知:

<script>
        let btn = document.querySelector('.btn')
        let i = 10
        let timer = setInterval(function(){
            i-- 
            btn.innerHTML = `我已阅读(${i})`
            if(i === 0){
                clearInterval(timer)
                btn.disabled = false
                btn.innerHTML = '我已阅读'
            }
        },1000)
    </script>

上为效果图

 addEventListener监听器，随机点名:

<script >
        let students = ['111','222','333','444','555']
        var btn = document.getElementById('btn'); 
        var result = document.getElementById('result');

        // 点名函数 
        function rollCall() {
        var randomIndex = Math.floor(Math.random() * students.length); // 随机生成一个学生下标 
        var student = students[randomIndex]; // 获取随机学生姓名 
        result.innerHTML = student + '，请回答问题！'; // 在页面上显示随机学生姓名 
        }

        // 点击按钮触发点名事件 
        btn.addEventListener('click', rollCall);
    </script>

上为效果图