JavaScript实现随机点名器实例详解

2023年6月11日下午1:28 • JavaScript

JavaScript实现随机点名器是一个比较典型的应用。下面是实现该点名器的详细攻略。

一、基本思路

准备好姓名列表，可以存在数组中。
通过Math随机函数获取随机数作为索引来选出一个名字。
在页面展示选出来的名字。

二、实现步骤

接下来，我们将具体讲解实现该点名器的步骤。

1. HTML代码

首先，我们需要在HTML中创建一个基本的页面框架，用于展示选取出来的名字。我们可以创建一个按钮和一个区域，用于在按钮点击时显示随机选取出来的名字。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript实现随机点名器</title>
</head>
<body>
    <div>
        <button onclick="randomName()">点名</button>
    </div>
    <div>
        <p id="name"></p>
    </div>
    <script type="text/javascript" src="randomName.js"></script>
</body>
</html>

2. JavaScript代码

我们需要创建一个JavaScript文件，并在HTML页面中引用它。其中，randomName.js是我们需要创建的一个文件，它将实现整个点名器的功能。我们将在该文件中，完成步骤一中提到的准备好姓名列表，随机姓名并在页面展示选出来的名字等步骤。

准备姓名列表

在JavaScript文件中，我们需要准备好一个包含所有姓名的列表。我们可以将这个列表存放在一个数组中。

var names = ['小明', '小红', '小刚', '小王', '小李', '小张', '小吴', '小丁', '小翠', '小芳'];

随机选取姓名

接下来，我们需要通过Math随机函数获取一个随机数作为索引，然后从姓名列表中选出一个名字。

function randomName() {
    var index = Math.floor(Math.random() * names.length);
    var name = names[index];
    document.getElementById('name').innerHTML = '恭喜' + name + '被点名！';
}

在页面展示姓名

最后，我们需要将选取出来的名字展示在页面上。

上面的代码中，我们通过document对象获取ID为name的元素（在HTML中，我们已经创建了一个

标签，具有该ID），并通过innerHTML属性，设置该元素内部展示选中的名字。

3. 运行效果

运行代码后，在页面上点击“点名”按钮，就可以看到随机选中的名字展示在页面上了。

下面看一下实际示例：

var names = ['小明', '小红', '小刚', '小王', '小李', '小张', '小吴', '小丁', '小翠', '小芳'];

function randomName() {
    var index = Math.floor(Math.random() * names.length);
    var name = names[index];
    document.getElementById('name').innerHTML = '恭喜' + name + '被点名！';
}

上面代码中，我们先通过数组存储了10个小朋友的名字，接着在randomName函数中，获取随机索引，选出一个名字，并将其展示在页面上。

当用户点击页面中的“点名”按钮时，将会随机选出一个名字作为被点名的小朋友，通过innerHTML在页面中展示出来。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现随机点名器实例详解 - Python技术站