前端随机点名页面

最新推荐文章于 2025-03-18 09:46:19 发布

咦唔喻iuv

最新推荐文章于 2025-03-18 09:46:19 发布

阅读量568

点赞数 2

文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_72632154/article/details/138014010

版权

一、JS代码解释

1.定义变量

const names = ['张三', '李四', '王五', '赵六', '孙七']; // 定义了一个名字数组  
let isRolling = false; // 定义一个标志位，表示是否正在进行点名  
let currentName = ''; // 定义一个变量，用于存储当前被点到的学生的名字

2.获取DOM值

const button = document.getElementById('rollButton'); // 获取 id 为 'rollButton' 的按钮元素  
const displayName = document.getElementById('displayName'); // 获取 id 为 'displayName' 的显示元素

3.为按钮添加事件监视器

按钮被点击就会执行函数

button.addEventListener('click', function() {  
    // ...  
});

4.判断并处理点击事件

if (isRolling) {  
    // 如果 isRolling 为 true，表示当前正在点名  
    isRolling = false; // 停止点名  
    button.textContent = '点名'; // 将按钮的文本改为 '点名'  
    displayName.textContent = `当前被点名学生：${currentName}`; // 显示当前被点到的学生的名字  
} else {  
    // 如果 isRolling 为 false，表示当前没有点名  
    isRolling = true; // 开始点名  
    button.textContent = '停止'; // 将按钮的文本改为 '停止'  
    currentName = names[Math.floor(Math.random() * names.length)]; // 随机从名字数组中选择一个名字  
    displayName.textContent = `正在点名：${currentName}`; // 显示正在点名的学生的名字  
}

二、源码

1.HTML

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>随机点名程序</title> 
</head>  
<body>  
    <div class="container">  
        <h1>随机点名程序</h1>  
        <div class="name-display">  
            <p id="displayName">请点击“点名”按钮开始</p>  
        </div>  
        <button id="rollButton">点名</button>  
    </div>   
</body>  
</html>

2.CSS

 <style>
        body {  
    font-family: Arial, sans-serif;  
    text-align: center;  
    background-color: #f0f0f0;  
}  
  
.container {  
    margin-top: 50px;  
}  
  
.name-display {  
    margin-top: 20px;  
}  
  
button {  
    padding: 10px 20px;  
    font-size: 16px;  
    cursor: pointer;  
}  
  
button:hover {  
    background-color: #ddd;  
}
    </style>

3.JS

<script>
    const names = ['张三', '李四', '王五', '赵六', '孙七']; // 你可以在这里添加更多的名字  
let isRolling = false;  
let currentName = '';  
  
const button = document.getElementById('rollButton');  
const displayName = document.getElementById('displayName');  
  
button.addEventListener('click', function() {  
    if (isRolling) {  
        // 如果正在点名，则停止并显示当前名字  
        isRolling = false;  
        button.textContent = '点名';  
        displayName.textContent = `当前被点名学生：${currentName}`;  
    } else {  
        // 如果未点名，则开始随机点名  
        isRolling = true;  
        button.textContent = '停止';  
        currentName = names[Math.floor(Math.random() * names.length)];  
        displayName.textContent = `正在点名：${currentName}`;  
    }  
});
</script>