随机点名函数

最新推荐文章于 2024-04-23 19:05:30 发布

fizz141242

最新推荐文章于 2024-04-23 19:05:30 发布

阅读量414

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/fizz141242/article/details/107869710

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍如何使用JavaScript编写一个随机点名的函数，通过生成随机数并结合数组操作，实现在名单中随机选取一个人的效果。这个函数可以应用于在线教学、会议等场景，增加互动性。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            display: flex;
            flex-wrap: wrap;
        }
        .li{
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            margin-left: 10px;
            list-style-type: none;
            text-align: center;
            line-height: 50px;
            margin-top: 30px;
        }
        h1{
            margin-left: 10px;
        }
        input{
            margin-left: 150px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <h1>随机函数点名</h1>
  <div id="box"></div>
  <input type="button" value="点名">
  <span></span>
    <script>
        var box=document.getElementById('box')
        var btn=document.querySelector('input')
        var span=document.querySelector('span')
        var arr=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
        for(var i=0;i<arr.length;i++){ //遍历数组
            arr[i].index=i //自定义下标
            var li = document.createElement("li"); //创建li标签
            li.innerText=arr[i]; //li的内容等于arr数组的内容
            li.className='li' //为li标签添加一个类名
            box.appendChild(li) //把li添加到box中
        }
        var timer=null //定义定时器
        btn.onclick=function(){ //点击事件
            var array=arr.length //arr的长度赋值给变量
            if(this.value==='点名'){ //if判断
                timer=setInterval(function(){ //定时器
                    for(var i=0;i<arr.length;i++){ // 遍历arr的长度
                        box.children[i].style.background='' //box下的子元素的背景色为空
                    };
                    var random=parseInt(Math.random()*array); //随机数函数
                    box.children[random].style.background='red' //选中的背景色变为红色
                    span.innerText=arr[random] //把random的值赋值给span标签
                   
                },100); //时间100ms
                this.value='停止' //随机过程中 button由点名变成停止
            }else{
                clearInterval(timer) //清除定时器 
                this.value='点名' //停止的时候button变成点名
            }
        }
    </script>
</body>
</html>