随机点名沈嗷嗷

最新推荐文章于 2022-04-27 18:07:03 发布

liying999

最新推荐文章于 2022-04-27 18:07:03 发布

阅读量62

点赞数

本文链接：https://blog.csdn.net/liying999/article/details/124439261

版权

javascript

<!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>随机点名</title>
    <style>
        div {
            width: 200px;
            height: 60px;
            border: 5px solid hotpink;
            text-align: center;
            line-height: 60px;
        }
        
        button {
            width: 210px;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div>开始点名!</div>
    <button>随机点名</button>
</body>
<script>
     var box = document.querySelector('div');
     var btn = document.querySelector('button');
     //自定义随机函数
    function getRandom(min,max){
        return Math.floor(Math.random()*(max-min+1))+min;
    }
   var arr=['易烊千玺','檀健次','沈嗷嗷','沈宴'];
   //事件监听
    btn.addEventListener('click',function(){
        var random=getRandom(0,arr.length-1);
        //写入标签内部
        box.innerHTML=arr[random];
        //删除数组元素 splice （param1，param2)
        //param1:起始删除位置
        //param2:删除个数
        arr.splice(random,1);
        if (arr.length ==0){
            btn.disabled=true;
            btn.innerHTML='点名完毕!';
        }
    })
</script>
</html>

运行结果：