班级点名器！

最新推荐文章于 2022-01-17 20:25:19 发布

小猫爱摸鱼

最新推荐文章于 2022-01-17 20:25:19 发布

阅读量1.1k

点赞数

分类专栏： html js

本文链接：https://blog.csdn.net/wsh20210301/article/details/115948778

版权

js 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

点名器：

1、题目

利用定时器的原理写出一个简单的班级点名器，样式自拟，实现功能即可！

思路与写法：

（1）、拿到一个案例，我们首先要写出html的页面结构来，将班级上所以名字写到 li 的文本节点里，便于用 js 来操作元素样式；

（2）、写好页面后，我们需要用到鼠标点击事件，控制点名器的开始与结束；

（3）、如何实现点名器每次只出现一个人呢，那我们就需要用到循环定时器；

（4）、将鼠标点击事件和定时器结合起来就可以啦，需要注意的是及时清理定时器，否则会出现bug;

（5）、利用排他思想，给随机位置的当前元素设置一个独有的背景颜色表示选中当前这个人，点名器的效果就达到了；

2、结果示意图：

（如图是随机抽取的四名同学上课回答问题）
在这里插入图片描述

3、参考代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
       
        ul{
            width: 906px;
            height: 522px;
            margin: 20px auto;
        }
        .user{
            list-style: none;
            width: 300px;
            height: 90px;
            list-style: none;
            border: 1px solid green;
            float: left;
            font-size: 30px;
            text-align: center;
            line-height: 90px;
            color: green;
        }

    </style>
</head>
<body>
    <ul>
        <li class="user">陈都</li>
        <li class="user">李嘉豪</li>
        <li class="user">饶榜</li>
        <li class="user">徐斌斌</li>
        <li class="user">苏杭</li>
        <li class="user">张翱翔</li>
        <li class="user">舒恩庆杰</li>
        <li class="user">陈龙</li>
        <li class="user">邹宇</li>
        <li class="user">汪仕豪</li>
        <li class="user">覃凡</li>
        <li class="user">杨武</li>
        <li class="user">严永恒</li>
        <li class="user">李升</li>
        <li class="user">谭春博</li>
        <li class="user">孙泽学</li>
        <li class="user">商晟晟</li>
        <li class="user">XXX</li>
        <li class="user">开始</li>
        <li class="user">结束</li>
    </ul>
    <script>
        // 封装一个随机数用来调用随即位置的
        function random(){
            return Math.floor(Math.random()*17)
        }
        
        // 封装一个随机6位16进制数和#号拼接成backgroundColor样式，用来调用随机颜色的
        function getRandom(){
            var col="#";
            for(var i=0;i<6;i++){
              col+=Math.round(Math.random()*16).toString(16)
            }
            return col
        }
        
        // 获取所以li元素形成的类数组对象
        var li_all=document.getElementsByTagName("li")
        // 定义一个i值作为计数器
        var i=0;
        var timer=null;
        // 鼠标点击开始
        li_all[18].onclick=function(){
        // 清楚多次点击定时器叠加造成的影响
            clearInterval(timer)
        timer=setInterval(function(){
            // 往返调用17次定时器不间断
            i++;
            if(i>17){
                i=0
            }
            // 遍历一遍所以li元素
            for(var j=0;j<li_all.length;j++){
            // 排他思想，清除每个li的背景颜色样式 
                li_all[j].style.backgroundColor=""
            }
            // 给出现的随机位置上的这一个li添加一个随机颜色
            // 消除其他li的颜色，只保留我自己
            li_all[random()].style.backgroundColor=getRandom();
        },100)
        }
        // 鼠标点击结束
        li_all[19].onclick=function(){
            clearInterval(timer)
        }


    </script>
</body>
</html>