用html js java写一个投骰子带动画代码
时间: 2023-03-27 08:03:51 浏览: 140
好的,我可以回答这个问题。以下是一个简单的投骰子带动画的代码示例:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>投骰子带动画</title>
<style>
#dice {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
font-weight: bold;
animation: roll 1s ease-in-out;
}
@keyframes roll {
% {
transform: rotate(deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(360deg);
}
75% {
transform: rotate(540deg);
}
100% {
transform: rotate(720deg);
}
}
</style>
</head>
<body>
<button onclick="rollDice()">投骰子</button>
<div id="dice"></div>
<script src="script.js"></script>
</body>
</html>
```
JavaScript 代码:
```
function rollDice() {
var dice = document.getElementById("dice");
var result = Math.floor(Math.random() * 6) + 1;
dice.innerHTML = result;
dice.classList.remove("roll");
void dice.offsetWidth;
dice.classList.add("roll");
}
```
Java 代码:
```
import java.util.Random;
public class DiceRoller {
public static void main(String[] args) {
Random random = new Random();
int result = random.nextInt(6) + 1;
System.out.println("骰子结果为:" + result);
}
}
```
阅读全文