第五题小demo-随机点名效果案例

最新推荐文章于 2024-07-13 11:50:40 发布

小黑子史蒂夫

最新推荐文章于 2024-07-13 11:50:40 发布

阅读量105

点赞数

分类专栏：前端三剑客小demo 文章标签： css 前端 html

本文链接：https://blog.csdn.net/VanWot/article/details/128722606

版权

前端三剑客小demo 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

小黑子的随机点名效果案例

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

实现原理：

在js中，快速创建名字数组给li写名字，然后在css中使用弹性布局排列，可实现成员在排序效果
给开始按钮赋予点击事件，里面设置间隔定时器和根据名字数组长度的随机数，利用所设置的随机数在每200毫秒的选择于每个li可达到点名效果
最后，在开始按钮的点击事件中，再嵌套结束按钮点击事件，用于清除开始按钮的计时器

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>Document</title>
    <link rel="stylesheet" href="./随机点名2css.css">
    <script src="./随机点名2js.js"></script>
</head>

<body>
    <div id="main">
        <ul id="name"></ul>
        <div id="botton">
            <button class="start">开始</button>
            <button class="over">结束</button>
        </div>
    </div>
</body>

</html>

css部分：

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

#main {
    width: 900px;
    height: 400px;
    background-color: yellowgreen;
    margin: 0 auto;
    top: 100px;
    position: relative;
}

#main ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#main ul li {
    width: 200px;
    height: 100px;
    text-align: center;
    line-height: 150px;
    margin: 0 auto;
}

#botton {
    width: 200px;
    margin: 0 auto;
}

.start {
    width: 100px;
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 30%;
}

.over {
    width: 100px;
    height: 50px;
    position: absolute;
    bottom: 0;
    right: 30%;
}

.active {
    background-color: pink;
}

js部分：

window.onload = function () {
    //获取元素
    let start = document.querySelector(".start");
    let over = document.querySelector(".over");
    let name =document.querySelector("#name");
    let names=[
        "01000001","01010002","01000003","01000004",
        "01000005","01010006","01000007","01000008",
        "01000009","01010010","01000011","01000012"]
        for(let i=0;i<names.length;i++){
            let o_name =document.createElement("li");
            o_name.className="item";
            o_name.innerHTML=names[i];
            name.appendChild(o_name);
        }//利用数组快速给li写名字，再给每个li属性
    let oitem = document.querySelectorAll(".item");

    //赋予开始按钮点击事件
    start.onclick = function () 
    {
        //通过计时器实现随机数的切换，实现随机点名的随机效果
        let time = setInterval(function () 
        {
            //设置随机数，取整可以符合item数组索引
            let Random = Math.round(Math.random() * ( oitem.length ));
            
            for (let i = 0; i < oitem.length; i++) 
            {//当点击开始计算时，给所有item都刷新一遍，实现清除
                oitem[i].className = 'item';
            }
            //给被选中的随机数添加颜色选框
            oitem[Random].className = 'active';
        }, 200)

        //点击结束按钮，清除计时器
        over.onclick = function () 
        {
            clearTimeout(time);
        }
    }

}