html5掷骰子
时间: 2023-10-20 08:05:25 浏览: 36
好的,以下是一个简单的 HTML5 掷骰子的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>掷骰子</title>
<meta charset="utf-8">
<style>
#dice {
width: 100px;
height: 100px;
border: 1px solid black;
font-size: 60px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="dice">?</div>
<button onclick="rollDice()">掷骰子</button>
<script>
function rollDice() {
var dice = document.getElementById('dice');
var num = Math.floor(Math.random() * 6) + 1; // 生成1~6之间的随机整数
dice.innerHTML = num;
}
</script>
</body>
</html>
```
在这个示例中,我们使用了 HTML5 的 `div` 元素来表示掷骰子的结果,并使用了一个 `button` 元素来触发掷骰子的动作。在页面加载时,掷骰子的结果默认显示为问号 `?`。当用户点击“掷骰子”按钮时,我们通过 JavaScript 代码生成一个1~6之间的随机整数,并将其显示在 `div` 元素中,从而模拟了掷骰子的过程。