1

我一直在关注一些关于如何通过在 Javascript 中设置数组来随机化图像的教程。它不工作 - 图像本身没有出现，甚至没有任何错误。

JavaScript

<script type="text/javascript">
    function randomImg1(){
        var myImages1 = new Array ();
        myImages1[1] = "img/who/1.jpg";
        myImages1[2] = "img/who/2.jpg";
        myImages1[3] = "img/who/3.jpg";
        var rnd = Math.floor(Math.random() * myImages1.length);
        if(rnd == 0{
            rnd = 1;
        }
        document.write(<img class="who" src="'+myImages1[rnd]);
    }
</script>

我的按钮看起来像这样

<input class="randombutton" style="float: left;" type="button" value="Randomize" onclick="randomImg1()"/>
4

7 回答 7

1

要将页面中的某些内容附加到 HTML 中的元素，请使用

.append

而不是“写入”功能，因为 .append 实际上会将内容附加到指定元素，而不是整个文档。

因此，在您的 HTML 中，您应该创建一个 ID 为“our_div”的 DIV

<html>
<head></head>
<body>
<!-- Text will be appended to this DIV via JS -->
<div id="the_div">Hello, </div>
</body>
</html>

使用这样的东西：

function add_text() {
  $("#the_div").append("World"); // appends text "World" to the end of that div.
}

现在，在您的 HTML 中，您应该有一个调用函数“add_text()”的按钮。

<button id="the_button" onClick="add_text();">Click Here to Add Text</button>

接着！

当用户单击按钮时，它会将文本“World”附加到 ID 为“the_div...”的 DIV 中，因此，我们有...

Hello, World

这是整个代码：

<html>
<head>
<script type="text/javascript">
function add_text() {
  $("#the_div").append("World");
}
</script>
</head>
<body>
<div id="the_div">
Hello, 
</div>
<button id="the_button" onClick="add_text();">Click!</button>
</body>
</html>

尝试使用

.html

替换某些东西...例如，我在我开发的游戏中使用了掷骰子功能。当玩家掷骰子时...

$("#results").append(Math.floor(Math.rand()*6));

给了我们这样的东西......

（每卷）

results: 142563342515246422

如果我使用 .html ...

$("#results").html(Math.floor(Math.rand()*6));

我们剩下的东西更像这样

（第一卷）

results: 5

（第二卷）

results: 2

（第三卷）

results: 6

等等！

于 2013-09-09T22:10:56.790 回答
1

您必须在此行中添加引号并关闭 if 语句：

<script type="text/javascript">
function randomImg1() {
    var myImages1 = new Array();
    myImages1[1] = "img/who/1.jpg";
    myImages1[2] = "img/who/2.jpg";
    myImages1[3] = "img/who/3.jpg";
    var rnd = Math.floor(Math.random() * myImages1.length);
    if (rnd == 0) {
            rnd = 1;
    }
    document.write('<img class="who" src="' + myImages1[rnd] + '">');
}
</script>
于 2013-07-29T20:07:44.570 回答
1

您在 if 语句和 document.write 中忘记了 a )，您错过了'并关闭了<img>标签。在这里检查：

if (rnd == 0) {
        rnd = 1;
    }

document.write('<img class="who" src="' + myImages1[rnd] + '"/>');
于 2013-07-29T20:10:39.203 回答
1

确保跟踪所有右括号和括号。

此代码将为您工作：

<script type="text/javascript">
    function randomImg1() {
      var myImages1 = new Array ();
      myImages1[1] = "img/who/1.jpg";
      myImages1[2] = "img/who/2.jpg";
      myImages1[3] = "img/who/3.jpg";
      var rnd = Math.floor( Math.random() * myImages1.length );
      if( rnd == 0 ) {
        rnd =1;
      }
      html_code = '<img class="who" src="' + myImages1[rnd] + '" />";
      document.write(html_code);
    }
</script>

另外，如果我是你，我会在你的 DOM 文档中指出一个更具体的点。如果你愿意，你可以使用一个非常简单的 jQuery 脚本：$("#testing").html(html_code);而不是你的document.write()

于 2013-07-29T20:27:02.673 回答
0

您写入文档的 HTML 不完整。

你需要类似的东西：

document.write("<img class='who' src='" + myImages1[rnd] + "'>");

我还要提醒一下，document.write 通常不是向页面添加元素的首选方法，但这似乎更像是一个学习示例，而不是现实世界的示例。

于 2013-07-29T20:08:59.470 回答
0

哦，伙计，这很尴尬。疯了，你可以在 3 年内学到多少东西。我认为这样做的最佳方法如下（假设没有文件夹结构模式）。尚未测试，但应该可以工作。

var images = ["img/who/1.jpg","img/who/2.jpg","img/who/3.jpg"];

function getRandomImage(){
    var rnd = Math.floor(Math.random() * images.length);
    return images[rnd];
}

function changeImage(){
    var img = document.querySelector("#myImg");
    img.src = getRandomImage();
}

function init(){
    var el = document.querySelector(".myClass");
    el.onclick = changeImage;
}

window.onload = init;

我在想什么分配一个数组[1]然后进行if检查？我永远不会知道。

于 2016-07-26T00:27:27.763 回答
-1

这是我能想到的最好的方法，我更喜欢这个的原因是因为它不是改变整个页面，而是改变了img标签中的src 。

这是代码：

脚本

function imgchange() {

var myImages1 = new Array();
    myImages1[1] = "img/who/1.jpg";
    myImages1[2] = "img/who/2.jpg";
    myImages1[3] = "img/who/3.jpg";
  var rnd = Math.floor(Math.random() * myImages1.length);
    if (rnd == 0) {
            rnd = 1;
    }

  document.getElementById("gen-img").src = myImages1[rnd];

}

html

<p><img id="gen-img" src="img/who/1.jpg"></p>
<p><input type="button" value="Random" onclick="imgchange();" /></p>

然而，我所做的是我有一个空白的 png 文件，其中没有任何内容，我将其设置为我的图像的默认src 。但你可以随心所欲。

于 2016-07-25T09:14:28.720 回答