用js实现一个随机点名

最新推荐文章于 2024-04-22 08:51:07 发布

原创最新推荐文章于 2024-04-22 08:51:07 发布 · 2.6k 阅读

5 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何使用JavaScript编写一个简单的随机点名程序。通过HTML创建用户列表，CSS进行样式设计，结合JavaScript实现随机选择功能。文中详细解释了js代码的逻辑和实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码

<h1>随机点名系统</h1>
<div id="time"></div>
<div id="box">
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>王磊</li>
        <li>张强</li>
        <li>张伟</li>
        <li>王伟</li>
        <li>李娜</li>
        <li>王静</li>
        <li>王丽</li>
        <li>李强</li>
        <li>王敏</li>
    </ul>
</div>
<input type="button" value="开始" id="inp">

css代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        h1{
            text-align: center;
            margin-top: 30px;
        }
        #time{
            position: absolute;
            top: 150px;
            right: 100px;
        }
        #box{
            width: 800px;
            position: absolute;
            left: 50%;
            margin-left: -400px;
            top: 200px;
        }
        li{
            width: 60px;
            height: 20px;
            float: left;
            background-color: palevioletred;
            list-style: none;
            padding: 20px;
            margin: 5px;
            text-align: center;
        }
        #inp{
            width: 100px;
            height: 50px;
            position: absolute;
            top: 400px;
            left: 50%;
            margin-left:-50px;
        }
    </style>

这里引用了一个公共js

// 通过id名获取的元素
function my$(id) {
    return document.getElementById(id);
}

//通过标签名获取的元素
function ele$(element) {
    return document.getElementsByTagName(element);
}

js代码

<script src="common.js"></script>
    <script>
         window.onload=function(){
             //获取时间
             function clock(){
                 var dt=new Date();
                 var year=dt.getFullYear();
                 var month=dt.getMonth()+1;
                 var day=dt.getDate();
                 var h=dt.getHours();
                 var m=dt.getMinutes();
                 var s=dt.getSeconds();
                 function bu(i){
                     return i<10? "0"+i:i;
                 }
                 my$("time").innerText=year+"-"+bu(month)+"-"+bu(day)+"     "+bu(h)+":"+bu(m)+":"+bu(s);
             }
             clock();//当页面加载完毕时,初始化一次
             setInterval(clock,1000);
             //给按钮绑定点击事件
             var lis=document.getElementsByTagName("li");//获取所有的li
             console.log(lis);
             var flag=true;//给一个开关
             var timeId;
             my$("inp").onclick=function(){
                 if (flag){
                     flag=false;
                     my$("inp").value="停止";
                     timeId=setInterval(function(){
                         var num=parseInt(Math.random()*lis.length);//获取li索引随机数
                         for (var i=0;i<lis.length;i++){//遍历
                             lis[i].style.backgroundColor="";//排他功能
                         }
                         lis[num].style.backgroundColor="red";//使每一个随机的li背景色为红色
                     },200)
                 }else{
                     flag=true;
                     my$("inp").value="开始";
                     clearInterval(timeId);
                 }


             }

         }

    </script>