根据色子点数显示不同图片
时间: 2023-08-02 16:06:26 浏览: 40
可以通过JavaScript代码根据色子点数来显示不同的图片。以下是一个简单的实现方法:
1. 在HTML页面中添加一个用于显示图片的img标签,并且给它设置一个id。
```html
<img id="diceImage" src="">
```
2. 在JavaScript中编写根据点数显示图片的函数。
```javascript
function showDiceImage(number) {
var imageSource = "";
switch (number) {
case 1:
imageSource = "dice1.png";
break;
case 2:
imageSource = "dice2.png";
break;
case 3:
imageSource = "dice3.png";
break;
case 4:
imageSource = "dice4.png";
break;
case 5:
imageSource = "dice5.png";
break;
case 6:
imageSource = "dice6.png";
break;
default:
imageSource = "";
break;
}
document.getElementById("diceImage").src = imageSource;
}
```
这个函数接收一个点数作为参数,然后根据点数选择对应的图片路径,并且将路径设置为img标签的src属性。
3. 在摇塞子的函数中调用这个显示图片的函数。
```javascript
function rollDice() {
var result = Math.floor(Math.random() * 6) + 1;
showDiceImage(result);
}
```
这个函数首先生成一个随机数作为点数,然后调用showDiceImage函数来根据点数显示对应的图片。
4. 在HTML页面中添加所有的图片文件。
```html
<img src="dice1.png">
<img src="dice2.png">
<img src="dice3.png">
<img src="dice4.png">
<img src="dice5.png">
<img src="dice6.png">
```
这样就可以根据点数来显示对应的图片了。注意要将所有的图片文件都放在同一个文件夹下,并且文件名要与showDiceImage函数中的对应。