js实现随机点名（点击按钮开始与结束）

最新推荐文章于 2023-07-04 14:22:00 发布

QAQTT

最新推荐文章于 2023-07-04 14:22:00 发布

阅读量2.3k

点赞数 2

文章标签： javascript html

本文链接：https://blog.csdn.net/QAQTT/article/details/118915261

版权

HTML结构

<style>
    .name {
        width: 400px;
        height: 300px;
        background-color: pink;
        margin: 100px auto 10px auto;
        color: #fff;
        font-size: 30px;
        line-height: 300px;
        text-align: center;
    }
    button {
        display: block;
        width: 80px;
        height: 40px;
        background-color: hotpink;
        color: #fff;
        margin: 0 auto;
    }
</style>
<body>
    <div id="focus">
        <div class="name">西施</div>
        <button>点 名</button>
    </div>
    <script src="name.js"></script>
</body>

js部分

var arr = ["西施", "马超", "曜", "云中君", "瑶", "猪八戒", "嫦娥", "伽罗", "盾山", "裴擒虎"]
var btn = document.querySelector('button')
var uname = document.querySelector('.name')
var num;
var flag = 0;//记录鼠标按下的次数
btn.onclick = function () {
    flag++

    var timer = setInterval(function () {
        if (flag % 2 == 0) {
            btn.innerHTML = '点名'
            clearInterval(timer)
        }
        num = parseInt(Math.random() * arr.length);//生成0-9的随机数
        uname.innerHTML = arr[num]

    }, 100);
    btn.innerHTML = '点击停止'
}

效果图
在这里插入图片描述

QAQTT

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
js实现随机点名（点击按钮开始与结束）

HTML结构<style> .name { width: 400px; height: 300px; background-color: pink; margin: 100px auto 10px auto; color: #fff; font-size: 30px; line-height: 300px; text-align: center; }
复制链接

扫一扫