JS+CSS随机点名详细介绍复制可用(可自己添加人名)

想必大家也想拥有一个可以随机点名的网页，接下来我为大家介绍一下随机点名，可用于抽人，哈哈

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 850px;
            /* 我固定死了高度 如果需要修改黑色背景的高度请修改这部分 */
            height: 1000px;
            background-color: black;
            margin: 0 auto;
            position: relative;
        }

        .box>div {
            width: 200px;
            height: 75px;
            font-size: 25px;
            text-align: center;
            border: 1px solid white;
            background-color: orange;
            color: white;
            float: left;
            line-height: 75px;
            border-radius: 5px;
            margin-left: 10px;
            margin-bottom: 10px;
        }

        .boss {
            width: 100%;
            background-color: black;
            position: relative;
        }

        .bth {
            font-size: 50px;
            width: 220px;
            height: 120px;
            background-color: orange;
            position: absolute;
            right: 10px;
            bottom: 200px;
        }
    style>
head>

<body>
    
    <div class="boss">
        <div class="box">
            
            
            
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
            <div>namediv>
        div>
        <input class="bth" type="button" value="点击点名">
    div>
body>
<script>
    //获取input点击
    var bth = document.querySelector(".bth")
    //获取所有box下面的div
    var div = document.querySelectorAll(".box div")
    //点击事件
    bth.onclick = function () {
        //点击后改按钮的value值
        bth.value = "点名中"
        // 点击后btn的背景颜色变成白色
        bth.style.backgroundColor = "#fff"
        var timer = setInterval(function () {
            //循环所有要变色的盒子 因为我现在有43个div就i<43
            // 有几个div就i
            for (var i = 0; i < 43; i++) {
                //定3个随机数，要放在循环里面
                var a = Math.floor(Math.random() * 256)
                var b = Math.floor(Math.random() * 256)
                var c = Math.floor(Math.random() * 256)
                // 这是变色
                div[i].style.backgroundColor = "rgb" + "(" + a + "," + b + "," + c + ")"
                // 给按钮添加disabled属性 因为我点击之后，在完成点名之前不能继续点击
                bth.setAttribute("disabled", "disabled")
            }
        }, 100)
        //点击后2秒执行延时器里的内容
        setTimeout(function () {
            //清除定时器
            clearInterval(timer)
            //循环div，2秒后所有的div的背景颜色变成orange
            for (var j = 0; j < 43; j++) {
                div[j].style.backgroundColor = "orange"
            }
            //挑选一个幸运儿 0 - 43的随机数 有多少人就Math.floor(Math.random() * (人数+1))
            var d = Math.floor(Math.random() * 44)
            // div变成红色 就是幸运儿了
            div[d].style.backgroundColor = "red"
            // 执行完毕按钮重新变为点击点名
            bth.value = "点击点名"
            // 按钮背景颜色重新变为orange
            bth.style.backgroundColor = "orange"
            // 2s后按钮可以重新点击
            bth.removeAttribute("disabled")
        }, 2000)
    }

script>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

最终效果：

请添加图片描述
感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！

相关阅读:
【Windows 常用工具系列 11 -- 笔记本F5亮度调节关闭】
vue实现el-menu与el-tabs联动
 来围观 WasmEdge 7月社区会议都说了些啥
 指定端口被system程序占用解决方法
 钉钉小程序生态—企业机器人加互动卡片，改善用户体验的开始！
118、不要“教”用户做事，应该让他秒懂秒会
 c语言基础学习笔记（五）：for循环
 javascript: Sorting Algorithms
React的Key和diff
[Apple][macOS]没有原来的苹果设备接收验证码，怎么激活新的苹果设备(Macbook、iPhone之类）？
原文地址：https://blog.csdn.net/m0_74577714/article/details/134231191