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

简介: 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">
            <!-- 可自己添加名字 -->
            <!-- 现在是43个div 想加几个人就用多少个div-->
            <!-- 记住不管是加还是减都要调整JS部分 已经在JS部分写好流程 -->
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
            <div>name</div>
        </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<div.length
            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>

最终效果:

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

相关文章
|
10天前
|
前端开发 JavaScript 开发者
css和js
【4月更文挑战第22天】css和js
21 6
|
2天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
5 1
|
4天前
|
缓存 移动开发 JavaScript
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
15 1
|
9天前
|
前端开发 JavaScript UED
CSS顶部与JS后写:网页渲染的奥秘
CSS顶部与JS后写:网页渲染的奥秘
|
10天前
|
前端开发 JavaScript 索引
CSS常见用法 以及JS基础语法
CSS常见用法 以及JS基础语法
17 0
|
10天前
|
JavaScript 前端开发
js和css以及js制作弹窗
js和css以及js制作弹窗
15 1
|
10天前
|
前端开发 JavaScript
使用html+css+javaScript 完成计算器
使用html+css+javaScript 完成计算器
|
10天前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
32 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
10天前
|
前端开发 JavaScript 索引
前端 富文本编辑器原理——从javascript、html、css开始入门(一)
前端 富文本编辑器原理——从javascript、html、css开始入门
42 0
|
10天前
|
前端开发 JavaScript 容器
JavaScript、CSS像素动画特效代码
此示例创建一个带有像素粒子的容器,每隔300毫秒就会动态添加一个新的像素粒子,然后通过CSS的关键帧动画(`@keyframes`)使它们产生上升和逐渐消失的动画效果。你可以根据需要修改像素粒子的颜色、大小、动画效果和创建速度。
14 0