HTML随机抽奖小游戏实现
时间: 2024-01-08 11:49:12 浏览: 47
以下是一个基本的HTML随机抽奖小游戏实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>随机抽奖小游戏</title>
<meta charset="utf-8">
</head>
<body>
<h1>随机抽奖小游戏</h1>
<p>点击下面的按钮,随机抽取一个幸运儿!</p>
<button id="btn">抽奖</button>
<p id="result"></p>
<script>
// 定义参与抽奖的名单
var names = [
"张三",
"李四",
"王五",
"赵六",
"钱七",
"孙八",
"周九",
"吴十"
];
// 获取按钮元素
var btn = document.getElementById("btn");
// 给按钮添加点击事件监听器
btn.addEventListener("click", function() {
// 随机抽取一个名字
var index = Math.floor(Math.random() * names.length);
var name = names[index];
// 把抽中的名字显示在页面上
var result = document.getElementById("result");
result.innerHTML = "恭喜 " + name + " 中奖了!";
});
</script>
</body>
</html>
```
这个随机抽奖小游戏的基本思路是:定义一个参与抽奖的名单,用户点击按钮后随机抽取一个名字,并将抽中的名字显示在页面上。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![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)