用代码做一个能抽签的网页
时间: 2023-03-21 19:00:41 浏览: 106
好的,下面是一个简单的代码示例,用于创建一个能够抽签的网页。
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>抽签</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
text-align: center;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
display: block;
margin: 0 auto;
}
.result {
margin-top: 20px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #4CAF50;
}
</style>
</head>
<body>
<h1>抽签</h1>
<button onclick="draw()">抽签</button>
<div class="result"></div>
<script>
function draw() {
var results = ["大吉", "中吉", "小吉", "吉", "末吉", "凶", "大凶"];
var resultElement = document.querySelector('.result');
var randomIndex = Math.floor(Math.random() * results.length);
var result = results[randomIndex];
resultElement.textContent = result;
}
</script>
</body>
</html>
```
这个代码使用了 HTML、CSS 和 JavaScript,能够在网页上创建一个标题为“抽签”的页面,并包含一个“抽签”按钮和一个用于显示结果的元素。
JavaScript 代码定义了一个名为`draw()`的函数,用于在按钮被点击时随机选择一个结果并将其显示在页面上。
你可以将这个代码保存为一个 HTML 文件,然后在浏览器中打开它来查看它的效果。