JavaScript实现随机点名(不结束前,名字随机切换)

最新推荐文章于 2023-08-17 19:54:28 发布

翊木

最新推荐文章于 2023-08-17 19:54:28 发布

阅读量1.6k

点赞数 1

分类专栏： html 文章标签： javascript

本文链接：https://blog.csdn.net/Xiaojia_guniang/article/details/107826367

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

随机点名

不结束前,名字随机切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color:#DDA0DD;  //背景色
        }
        #d{
            width: 100%;
            height: 80px;
        }
        #d1{
            width: 300px;
            height: 200px;
            background-color: moccasin;
            border-radius: 50px;   //边框圆角  50px圆的弧度
            font-size: 50px; 
        }

        input{
            width: 100px;
            height: 50px;
            font-size: 20px;
            color:brown;
            background-color: darkseagreen;
        }
        #d2{
            width: 10px;
        }
    </style>
</head>
<body>
    <hr>
<div align="center">
    <div id="d"></div>
    <div  id="d1">
        <br>
        <label id="a">&nbsp</label>
    </div>
    <div>
        <br>
        <input type="button" onclick="sleep()" value="开始">
        //空格
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 
        <input type="button" id="i2" value="结束">
    </div>
</div>
<br>
<br>
<br>
<hr>
</body>
<script>
    var a=document.getElementById("a");
    var i2=document.getElementById("i2");
    let name;
    let l=["张三","李四","王五","赵六"]; //名单
    // alert(l.length);
    //a.innerHTML=l[Math.round(Math.random()*(l.length-1))];
    function sleep(){
        flag=true;  //设置标志,判断停止时间
        setTimeout(change,50);  //名单随机跳动,延时50毫秒
    }  

    i2.onclick=function(){
    flag=false;  //结束标志
    }
    
    function change(){
        name = l[Math.floor(Math.random()*l.length)]; //随机取值
        console.log(name);
        if(!flag){
            a.innerHTML=name;
        }else{
            a.innerHTML=name;
            sleep();  //迭代
        }
    }
</script>
</html>