Question

我有两个模具，在主页面上它们是默认的骰子面孔，但是一旦“扔”＆＃39;单击按钮将两个图像随机更改为两个随机骰子编号。这些数字会添加并显示在我的总数中。 DIV。如何在javascript中实现这一点？我也有一个明确的＆＃39;按钮，一旦选中，它将返回两个默认骰子面，并将总div中的结果清除回0。

继承人我的HTML：

<head>

    <link rel="stylesheet" type="text/css" href="dice.css">

<title> Dice </title>

<script type="text/javascript">


var num1 = Math.floor(Math.random() * 6) + 1;
    var num2 = Math.floor(Math.random() * 6) + 1;

    var imgtag1 = "<img src=\"die" + num1 + ".gif\">";
    var imgtag2 = "<img src=\"die" + num2 + ".gif\">";

    var score = num1 + num2;

</script>

</head>
<body>

<h1> Dice </h1>

<div id="green">


<img src="die-default.gif" class="die1" /><img src="die-default.gif" class="die2" />

</div>

<button type="button" class="throw" onclick="myScript">Throw</button>
<button type="button" class="clear">Clear</button>

<h2>Total</h2>

<div id="total">
<script>

document.write(score1);

</script>
</div>

</body>

这是我的css：

body{
background-color: black;
color: white;
text-align: center;
font-size: 30px;
font-family: arial;
}

#green {
 background-color: #0B610B;
height: 200px;
width: 550px;
border-radius: 25px;
position: relative;
left: 480px;
}

.die1{
float: left;
margin-top: 12px;
margin-left: 70px;
}

.die2{
float: right;
margin-top: 12px;
margin-right: 70px;
}

.throw {
margin-top: 100px;
font-size: 40px;
border-radius: 10px;
height: 70px;
width: 200px;
text-align: center;
background-color: white;
}

.clear {
margin-top: 100px;
font-size: 40px;
border-radius: 10px;
height: 70px;
width: 200px;
text-align: center;
background-color: white;
}

h2{
font-size: 30px;
text-align: center;
margin-top: 40px;
font-family: arial;
}

#total {
background-color: white;
height: 70px;
width: 300px;
border-radius: 10px;
position: relative;
left: 600px;
}

我有骰子的6张脸的图像加上带有问号的骰子脸的默认骰子图像。我的所有图像都被命名为die1.gif - die6.gif，我的默认值为die-default.gif

Answer 1

首先，您需要为每个img标记分配一个ID：

    <img src="die-default.gif" id="die1" class="die1" />
    <img src="die-default.gif" id="die2" class="die2" />

对于你的投掷按钮：抛

最后，你的myScript功能：

        function myScript() {

            var num1 = Math.floor(Math.random() * 6) + 1;
            var num2 = Math.floor(Math.random() * 6) + 1;

            d1 = document.getElementById("die1");
            d2 = document.getElementById("die2");
            d1.src = "die" + num1 + ".gif";
            d2.src = "die" + num2 + ".gif";
            var score = num1 + num2;
        }

更改img标签的src是在没有JQuery的情况下完成的。

Answer 2

看起来您可能忘记声明您的功能，然后在html中正确调用它。

你会声明这样的函数：

function myfunction(){

var num1 = Math.floor(Math.random() * 6) + 1;
var num2 = Math.floor(Math.random() * 6) + 1;

var imgtag1 = "<img src=\"die" + num1 + ".gif\">";
var imgtag2 = "<img src=\"die" + num2 + ".gif\">";

var score = num1 + num2;

};

像这样调用函数：

<button type="button" class="throw" onclick="myfunction();">Throw</button>

编辑：

<button onclick="myFunction()">click it</button>

<script>
var myFunction = function (){

    var num1 = Math.floor(Math.random() * 6) + 1;
    var num2 = Math.floor(Math.random() * 6) + 1;

    var imgtag1 = "<img src=\"die" + num1 + ".gif\">";
    var imgtag2 = "<img src=\"die" + num2 + ".gif\">";

    var score = num1 + num2;

    console.log(score);
    };
</script>

将第二个片段放入您的html页面，首先打开chrome中的控制台，然后您可以看到随机数是否通过

输出到控制台

console.log();

功能。如果您在每次单击按钮时看到生成的数字，这意味着您的乐谱正在运行，您可以通过这种方式将脚本中声明的任何数字输出到控制台。

一旦你在那里并且正在生成随机数，这只是将num1和num2放入图像的src中，对于那个以太，我的答案或发布的其他答案都可以。

一旦点击，如何使我的按钮显示两个不同的图像？

2 个答案: