请用JavaScript实现随机选人效果,单击“确认”按钮选中合适的人,按钮内容变成“继续选人”;继续单击,实现继续选人。并且使用二维数组储存姓名和照片。通过Math对象的随机函数选择随机索引,选择对应的姓名和照片
时间: 2024-05-11 17:16:39 浏览: 17
好的,不会透露您的要求并且不会重复您给出的这段话。为了实现您的需求,我可以提供以下 JavaScript 代码(已使用二维数组储存姓名和照片):
HTML:
```
<div id="container">
<div id="name"></div>
<img id="photo" src="">
<button id="confirm">确认</button>
</div>
```
JavaScript:
```javascript
var people = [
["张三", "photo1.jpg"],
["李四", "photo2.jpg"],
["王五", "photo3.jpg"],
["赵六", "photo4.jpg"]
];
var nameElem = document.getElementById("name");
var photoElem = document.getElementById("photo");
var confirmBtn = document.getElementById("confirm");
var chosenIndex = -1;
// 随机选人函数
function chooseRandom() {
var randomIndex = Math.floor(Math.random() * people.length);
nameElem.innerText = people[randomIndex][0];
photoElem.src = people[randomIndex][1];
chosenIndex = randomIndex;
}
// 单击确认按钮事件
confirmBtn.addEventListener("click", function() {
if (chosenIndex === -1) {
// 第一次单击
chooseRandom();
confirmBtn.innerText = "继续选人";
} else {
// 继续单击
chooseRandom();
}
});
```
以上代码实现了随机选人效果,单击“确认”按钮选中合适的人,按钮内容变成“继续选人”,继续单击按钮,实现继续选人。当需要添加新的姓名和照片时,只需要修改 `people` 数组即可。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)