JavaScript实现班级抽签小程序

我会详细讲解“JavaScript实现班级抽签小程序”的完整攻略，以下是步骤：

1. 设计页面

在HTML文件中，先设计出一个包含班级所有学生名字的列表，以及一个按钮用于触发抽签事件。示例代码如下：

<body>
    <h1>班级抽签</h1>
    <h2>名单</h2>
    <ul id="nameList">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <!-- 其余名字省略 -->
    </ul>
    <button id="drawButton" onclick="draw()">抽签</button>
    <p id="result"></p>
</body>

2. 编写JavaScript逻辑

获取名单列表

使用querySelectorAll()方法获取名单列表，并将结果存储在一个数组中。示例代码如下：

var names = document.querySelectorAll('#nameList li');

抽签事件

在点击抽签按钮时，随机从名单列表中选取一名学生。使用Math.random()方法生成0到1之间的随机数，乘以名单长度，再向下取整获取一个随机下标，然后从名单列表中选取该下标对应的学生名字。示例代码如下：

function draw() {
    var index = Math.floor(Math.random() * names.length);
    var result = document.getElementById('result');
    result.innerHTML = names[index].textContent + ' 被抽中了!';
}

3. 完整代码

HTML和JavaScript代码结合起来如下所示：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>班级抽签</title>
</head>

<body>
    <h1>班级抽签</h1>
    <h2>名单</h2>
    <ul id="nameList">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <!-- 其余名字省略 -->
    </ul>
    <button id="drawButton" onclick="draw()">抽签</button>
    <p id="result"></p>

    <script>
        var names = document.querySelectorAll('#nameList li');

        function draw() {
            var index = Math.floor(Math.random() * names.length);
            var result = document.getElementById('result');
            result.innerHTML = names[index].textContent + ' 被抽中了!';
        }
    </script>
</body>

</html>

4. 示例说明

示例一：添加学生名单

在HTML中，我们可以添加或删除学生姓名，来实时改变名单列表。例如，新增一个学生“赵六”，只需在HTML代码中添加一行代码即可：

<ul id="nameList">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
    <!-- 其余名字省略 -->
</ul>

示例二：改变抽签结果显示方式

我们也可以自定义抽签结果的显示方式，例如将抽中的学生名字背景颜色设为黄色。可以在draw()函数中添加一行代码，来设置抽中学生的样式：

function draw() {
    var index = Math.floor(Math.random() * names.length);
    var result = document.getElementById('result');
    result.innerHTML = names[index].textContent + ' 被抽中了!';
    names[index].style.backgroundColor = 'yellow';
}

这样，抽中的学生就会以黄色的背景色在名单列表中突出显示。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现班级抽签小程序 - Python技术站