随机点名系统（二）

最新推荐文章于 2023-01-11 22:57:43 发布

HAI6545

最新推荐文章于 2023-01-11 22:57:43 发布

阅读量137

点赞数 1

分类专栏： JavaScript案例文章标签： javascript css html

本文链接：https://blog.csdn.net/HAI6545/article/details/122134617

版权

JavaScript案例专栏收录该内容

105 篇文章 3 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
h1{
    font-size: 80px;
}
.namebox{
    width: 350px;
    height: 150px;
    border:3px solid hotpink;
    font-size: 100px;
    line-height: 150px;
    text-align: center;
    font-weight: bold;
    font-family: '黑体';
}
.btn{
    margin-top: 20px;
    width: 140px;
    height: 42px;
    background-color: skyblue;
    font-size: 24px;
    outline:none;
    border:none;
    cursor: pointer;
}
</style>
<body>
<!-- center标签中的所有内容会自动居中 -->
<center>
    <h1>随机点名</h1>
    <div class="namebox">周杰伦</div>
    <button class="btn">开始</button>
</center>
</body>
<script>
// 所有需要操作的标签获取
var btn = document.querySelector('.btn');
var namebox = document.querySelector('.namebox');
// 准备放很多姓名的数组
var nameArr = ['李治毅', '黎葵', '马文杰', '陈莹羽', '刘金容', '韦学发', '黄宏咏', '南昌黎', '张雪冰', '苏政宇', '王伟', '邹金城', '钟选龙', '蒲鸿泰', '陈洁珍', '钟杏坚', '蒙金连']
var timerId = 0
btn.onclick = function(){
    if(btn.innerText === '开始'){
        btn.innerText = '停止'
        // 定时器
        timerId = setInterval(function(){
            // 从数组中获取一个随机姓名
            // 获取随机下标
            var index = parseInt(nameArr.length * Math.random())    
            // console.log(index);
            
            var name = nameArr[index]
            // 放在盒子中
            namebox.innerText = name
        }, 100)
    }else{
        btn.innerText = '开始'
        // 让定时器停止
        clearInterval(timerId)
    }
    
}
</script>
</html>

HAI6545

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
随机点名系统（二）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style>h1{ font-size: 80px;}.namebox{ width: 350px; height: 150px; border:3px solid ..
复制链接

扫一扫