JavaScript之随机点名小程序

最新推荐文章于 2024-04-23 23:15:06 发布

xm_hello

最新推荐文章于 2024-04-23 23:15:06 发布

阅读量1.8k

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/xm_hello/article/details/106992332

版权

随机点名器步骤

导入jar包
将jquery-3.3.1.min.js包导入到web目录下的js包
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点名器</title>
    <style>
        body{
            background-color: gray;
        }
        .box{
            width: 1000px;
            height: 280px;
            margin: 0 auto;
            margin-top: 100px;
            clear: both;
        }
        #btn,#btn2,#btn3,#btnStop{
            width: 150px;
            height: 50px;

            margin-top: 50px;
            font-size: 18px;
        }
        .name{
            width: 100px;
            height: 30px;
            float: left;
            background-color: antiquewhite;
            margin-left: 10px;
            margin-top: 10px;
            text-align: center;
            line-height: 30px;
        }
        #span{
            float: right;
            position: relative;
            top: 55px;
            right: 185px;
        }
        h1{
            text-align: center;
        }
        .high{
            background-color: #FFDEAD;
            font-weight:500;
        }
    </style>
</head>
<body>
<h1>随机点名系统</h1>
<span id="span"></span>
<div class="box" id="box"></div>
<div style="text-align: center">
    <input type="button" id="btn" value="点名"/>
    <input type="button" id="btnStop" value="停止"/>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    var arr = [ "张恒",
        "李伟",
        "文子昂",
        "李彦松",
        "廖彬",
        "金鑫",
        "夏华伶",
        "邓洪",
        "陈紫桥",
        "罗继财",
        "陈治豪",
        "李坤耀",
        "母天鑫",
        "冯思皓",
        "谷康杰",
        "李辉",
        "李先进",
        "米俊杰",
        "彭小平",
        "唐旭",
        "万云松",
        "向星宇",
        "张全鑫",
        "邬建科",
        "徐江涛",
        "李连辉",
        "肖云龙",
        "徐浪",
        "马俊杰",
        "欧阳平",
        "周雨凡"];
    //生成数组中的名单div并添加到box中
    let boxNode = document.getElementById("box");

    boxNode.innerHTML = "";
    //循环遍历数组
    for(let i = 0;i< arr.length;i++){
        //创建div元素
        let divNode = document.createElement("div");
        //设置div内容
        divNode.innerHTML = arr[i];
        //设置div样式
        divNode.className = "name";
        //添加到box元素中
        boxNode.appendChild(divNode);
    }
    let  time = null
    //点击开始点名,开启一个循环定时器,绑定鼠标单击事件
    $("#btn").click(function () {
         time = setInterval(function () {
            //随机被选中的div设置背景颜色为红色
             let index = Math.floor(Math.random()*arr.length);
             //清除之前的颜色
             $("#box div").css("background-color","");
             //找到生成的名单div
             let mySelector = "#box div:eq("+ index+")";
             $(mySelector).css("background-color","red");
        },50);
    });
    //点击停止按钮清除定时器
    $("#btnStop").click(function () {
        clearInterval(time);
    })
</script>
</html>

小结

1.div元素使用循环动态生成,循环长度是名单数组的长度
2.div生成后要添加box到父元素中
3.Math.random()随机数为0-10以内的小数.随机范围为数组的长度
4.在生成名单颜色时需要清除之前的颜色

xm_hello

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之随机点名小程序

随机点名器步骤导入jar包将jquery-3.3.1.min.js包导入到web目录下的js包代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点名器</title> <style> body{ background-color: gray;
复制链接

扫一扫