做一个骰子html代码
时间: 2024-05-03 20:18:14 浏览: 8
以下是一个简单的骰子 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>骰子</title>
<style>
#dice {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
align-content: space-between;
padding: 10px;
}
.dot {
width: 30%;
height: 30%;
border-radius: 50%;
background-color: black;
margin: 5%;
}
</style>
</head>
<body>
<div id="dice">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<button onclick="rollDice()">Roll</button>
<script>
function rollDice() {
var dots = document.getElementsByClassName("dot");
for (var i = 0; i < dots.length; i++) {
dots[i].style.display = "none";
}
var num = Math.floor(Math.random() * 6) + 1;
for (var i = 0; i < num; i++) {
dots[i].style.display = "block";
}
}
</script>
</body>
</html>
```
这个代码创建了一个 `id` 为 `dice` 的 `div` 元素,用于展示骰子。骰子上的点用 `class` 为 `dot` 的 `div` 元素表示。当点击 `Roll` 按钮时,会随机生成一个 1 到 6 的数字,并根据数字来展示相应数量的点。