随机点名的实现

最新推荐文章于 2024-03-04 10:21:38 发布

码农—小加

最新推荐文章于 2024-03-04 10:21:38 发布

阅读量522

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_41631449/article/details/128826922

版权

HTML部分：搭建基础框架

<body>

    <div><div>

    <button class="start">开始</button><button class="end">结束</button>
</body>

CSS部分：

<style>
    div{
        width: 100px;
        height: 30px;
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        background: palegreen;
        margin-bottom: 10px;
     }
</style>

JavaScript部分：

监听开始按钮的点击事件开始随机循环名字库中的名字

start.addEventListener('click',function(){
        //防止多次触发
        clearInterval(timer)
        timer = setInterval(()=>{
            let random = getRandom(0 , arr.length - 1)
            div.innerHTML = arr[random]
        },150)

})

监听结束按钮的点击事件清除定时器结束循环，将最终名字显示到页面中

end.addEventListener('click',function(){
        clearInterval(timer)
})

JavaScript完整代码：

//获取元素
    let div = document.querySelector('div')
    let start = document.querySelector('.start')
    let end = document.querySelector('.end')
    let timer

    //创建一个作为名字库的数组
    let arr = ['熊大','熊二','光头强','李老板','佩奇','乔治','朵拉','野比大雄','木之本樱']

    //生成随机数
    function getRandom(min,max){
        return Math.floor(Math.random() * (max - min)) + min
    }

    //点击开始
    start.addEventListener('click',function(){
        //防止多次触发
        clearInterval(timer)
        timer = setInterval(()=>{
            let random = getRandom(0 , arr.length - 1)
            div.innerHTML = arr[random]
        },150)

    })
    //点击结束
    end.addEventListener('click',function(){
        clearInterval(timer)
    })