Demo5 随机点名

最新推荐文章于 2024-07-11 17:37:13 发布

龙司Glsa

最新推荐文章于 2024-07-11 17:37:13 发布

阅读量416

点赞数

分类专栏： JavaScript 文章标签：前端 javascript css

本文链接：https://blog.csdn.net/m0_74006038/article/details/128704880

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

随机点名
需求：分为上下两个部分，上方为显示区域，下方为控制区域显示区域显示基地所有成员的工号和姓名控制区域由开始和结束两个按钮组成点击开始按钮，显示区域里的内容开始滚动，点击结束按钮，内容滚动停止，随机显示一位成员的工号和姓名
实现原理：根据对显示区域添加节点等使数据导入，再通过间隔计时器定时执行Math.random获取随机值，通过给开始按钮点击事件绑定计时器，结束按钮绑定清除计时器实现

<!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>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box{
            width: 880px;
            height: 600px;
            margin: 100px auto;
            border-radius: 20px;
            border: 2px solid wheat;
        }
        #top{
            width: 100%;
            height: 500px;
            border-bottom: 1px solid wheat;
        }
        #bot{
            width: 100%;
            height: 100px;
        }
        #bot button{
            margin: 10px 160px;
            height: 80px;
            width: 100px;
            border-radius: 10px;
            border: 1px solid wheat;
            line-height: 80px;
        }
        #bot button:hover{
            background-color: #fc5531;
        }
        .listchild{
            width: 150px;
            height: 60px;
            margin: 20px 34px;
            float: left;
            text-align: center;
            line-height: 60px;
            border: 1px solid wheat;
        }
    </style>
</head>
<body>
    <div class="box">
        <div id="top"></div>
        <div id="bot">
            <button id="start">开始</button>
            <button id="end">结束</button>
        </div>
    </div>
</body>
<script>
    var point=document.getElementById("top")
    // console.log(point)
    var list=[ 
    "01010101xxx","01010102xxx","01010103xxx","01010104xxx",
    "01010105xxx","01010106xxx","01010107xxx","01010108xxx",
    "01010109xxx","01010110xxx","01010111xxx","01010112xxx",
    "01010113xxx","01010114xxx","01010115xxx","01010116xxx",
    "01010117xxx","01010118xxx","01010119xxx","01010120xxx",
    ]

    for(let i=0;i<list.length;i++){
        var childvar=document.createElement("div")
        childvar.className="listchild"
        childvar.innerHTML=list[i]
        point.appendChild(childvar)
    }

    var start=document.getElementById("start")
    start.onclick=function(){
        time=setInterval(function(){
        for(let o=0;o<point.children.length;o++){
            point.children[o].style.background=""
        }
        point.children[parseInt(Math.random()*point.children.length)].style.background="#fc5531"
        },100 )
    }
    
    var end=document.getElementById("end")
    end.onclick=function(){
        clearInterval(time)
    }
</script>
</html>