随机点名效果

最新推荐文章于 2024-08-09 18:00:00 发布

self_correction

最新推荐文章于 2024-08-09 18:00:00 发布

阅读量388

点赞数

文章标签： javascript css 前端

本文链接：https://blog.youkuaiyun.com/self_correction/article/details/128724489

版权

该文章演示了一个随机点名系统的实现，包括HTML结构定义显示和控制区域，CSS样式设定滚动效果，以及JavaScript处理点击事件和动态改变内容。用户点击开始按钮，显示区域的内容滚动，结束时随机高亮一个成员。代码适用于网页互动和抽查场景。

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

一、Demo

<1>.要求

分为上下两个部分，上方为显示区域，下方为控制区域。
显示区域显示基地所有成员的工号和姓名，控制区域由开始和结束两个按钮组成。
点击开始按钮，显示区域里的内容开始滚动;
点击结束按钮，内容滚动停止，随机显示一位成员的工号和姓名。

<2>.功能

不确定性，适用抽查人

二、实现原理

先封存数据；
再进行遍历（将数组中每一个元素前后加上li标签）；
然后添加点击事件并设置定时器；
确认定时器的开和关后；
获取所有的数据（去掉旧样式，添加新的样式）。

三、代码

<1>.Html部分

<!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>随机点名效果</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="wrapper"> 
       <ul class="box"></ul>
       <div class="click">
        <button class="start">开始/停止</button>  
       </div>

       <script src="./index.js"></script>
</body>
</html>

<2>.Css部分

*{
    margin: 0;
    padding: 0;
}
.wrapper {
    margin: 100px auto;
    border: 1px solid #ddd;
    text-align: center;
    position: relative;
}

.box li {
    vertical-align: top;
    display: inline-block;
    width: 150px;
    height: 50px;
    border: 2px solid #ddd;
    border-radius: 15px;
    text-align: center;
    line-height: 50px;
    margin: 5px;
}

.wrapper button {
    border: none;
    width: 100px;
    height: 50px;
    border-radius: 10px;
    cursor: pointer;
    outline: none;
    margin-top: 20px;
    font-weight: bolder;
    color: #333;
    background: #eee;
    box-shadow: 0 15px 30px rgb(0 0 0 / 15%);
    transition: all .5s;
}

.wrapper button {
    display: inline-block;
}
.wrapper .click:hover button{
  color: #ff6700;
}  

body {
    background-color: #eee;
}

<3>.Js部分

//获取元素
var box = document.querySelector(".box");
//获取按钮
var start = document.querySelector(".start");
//准备数据
var nameString = new String(
    "02010101王执聿,02010109李建民,02010110佟冠衡,02010116李成基,02010121张圳,02010125马德华,02010301凌欣萍,02010302田歆妍,02020001唐雨欣,0022250408李梓萌,02010103骆文浩,02010108李舜禹,02010111李奥,02010112颜宏鑫"
    );
var arr = nameString.split(",");

  //遍历数组，将数组中每一个元素前后加上li标签。
var str = "";
for (let i = 0; i < arr.length; i++) {
    str += "<li >" + arr[i] + "</li>"
}
box.innerHTML = str;
//保存上一次下标。
var last_index = 0;
//添加点击事件
var timer = null;
start.onclick = function () {
  //已经开启了定时器，则点击start按钮，表示关闭
  if (timer) {
      //定时器已经开启
    clearInterval(timer);
    //将timer的值清空
    timer = null;
  } else {
    //定时器没有开启
    timer = setInterval(function () {
      // 根据数组长度范围生成随机数
      var index = Math.floor(Math.random() * arr.length);
      //获取所有的li标签。
      var lis = document.querySelectorAll("ul.box>li");
      //在生成的时候，需要将之前的颜色去掉
      lis[last_index].style.backgroundColor = "";
      //给新的加上颜色
      lis[index].style.backgroundColor = "pink";
      //将新的下标赋值给 last_index
      last_index = index;
    }, 100);
  }
};
//页面初始化时间设置
window.onload = function () {
    datatime();
}
//页面时间动态刷新
setInterval(datatime, 1000);

function datatime() {
    let data = new Date();
    let dataString ="现在是北京时间：" + data.toLocaleString();
    document.getElementById("data").innerHTML = dataString;
}

四、效果展示

随机点名效果