使用js做一个随机点名案例

最新推荐文章于 2024-08-14 15:45:18 发布

weixin_44241303

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量144

点赞数 1

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_44241303/article/details/139305101

版权

<!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{
            display: flex;
            
            justify-content: center;
        }
        div{
            width: 300px;
            height: 300px;
            background-color: beige;
            text-align: center;
            border: 1px solid grey;
        }
    </style>
</head>
<body>
    <div >
        <p>王得</p>
        <button class="start">开始</button>  
        <button class="end"> 结束</button>
    </div>
</body>
<script>
    const arr = ['陈听','陈雪燕','王德','法娃']
    //获取显示文本元素
    const p = document.querySelector('p')
    // 获取开始元素
    const start = document.querySelector('.start')
    // 获取结束元素
    const end = document.querySelector('.end')
    //开始设置end为disable
    end.disabled = true;
    //在外部给随机数设置成全局变量
    let randomnum = 0;
    // 外部设置定时器为全局变量
    let si = 0
    //开始按钮点击事件
   const begin = function(){ 
        //定时器
       si =  setInterval(function(){
        //获取随机函数
        randomnum =  Math.floor(Math.random() * arr.length)
        //将内容放进去p标签
        p.innerHTML = arr[randomnum];
        //点击开始了需要点击结束了才能再点击开始
        start.disabled = true;
        end.disabled = false;
    
     },50)};

    start.addEventListener('click', begin,)
    
     
    //  设置停止点击事件
    end.addEventListener('click',
    function(){
        //清除点击事件
        clearInterval(si);
        //开始按钮设置可以用
        start.disabled = false
        //删除已经点过名的热
        arr.splice(randomnum,1);
        // 判断数组长度为1时按钮失效
        if(arr.length ===0){
            start.disabled = end.disabled = true;
        }
        //点击停止了不能再点击停止
        end.disabled = true;
        
    }
    )
     
</script>
</html>