Javascript 如何显示随机选择的文本和关联图像？_Javascript_Quotes_Dynamic Linking_Page Refresh

Javascript 如何显示随机选择的文本和关联图像？

javascript

Javascript 如何显示随机选择的文本和关联图像？,javascript,quotes,dynamic-linking,page-refresh,Javascript,Quotes,Dynamic Linking,Page Refresh,我是一个初学者网页设计师，我需要知道如何将一件事链接到另一件事。问题是，每次网站刷新时，我都会更改不同的报价。我需要对位于不同div标签中的图像执行相同的操作。我需要链接它们的原因是因为图像需要与引用相协调。例如：用图像0引用0 以下是javascript代码： var quotes=new Array(); quotes[0] = "text1"; quotes[1] = "Text2"; quotes[2] = "text3"; quotes[3] = "text4"; var q =

我是一个初学者网页设计师，我需要知道如何将一件事链接到另一件事。问题是，每次网站刷新时，我都会更改不同的报价。我需要对位于不同div标签中的图像执行相同的操作。我需要链接它们的原因是因为图像需要与引用相协调。例如：用图像0引用0

以下是javascript代码：

var quotes=new Array();
quotes[0] = "text1";
quotes[1] = "Text2";
quotes[2] = "text3";
quotes[3] = "text4";

var q = quotes.length;
var whichquote=Math.round(Math.random()*(q-1));
function showquote(){document.write(quotes[whichquote]);}
showquote();

这是位于javascript文本中的代码：

<script language="javascript" type="text/javascript" src="quotes.js"></script>

假设您有类似以下html的内容：

<div id="quote"></div>
<div>
    <img class="image" src="http://www.placehold.it/100x50&text=1" />
    <img class="image" src="http://www.placehold.it/100x50&text=2" />
    <img class="image" src="http://www.placehold.it/100x50&text=3" />
    <img class="image" src="http://www.placehold.it/100x50&text=4" />
</div>

然后，您需要在showquote函数中执行以下操作：

function showquote(){
   document.getElementById('quote').innerHTML = quotes[whichquote];
   document.getElementsByTagName('img')[whichquote].style.display="block";
}

请看这里的小提琴：

关于该代码的一些注释。不要误会这些，你是JavaScript新手！每个人都曾经有过这样的经历，让人们指出事情是我们学习的一种方式

几乎没有任何理由使用新阵列。使用数组文字。在这种情况下：

var quotes = [
    "text1",
    "Text2",
    "text3",
    "text4"
];

language属性在90年代被弃用，并且脚本上type的默认值是text/javascript。所以这就是你所需要的

你的随机数错了。Math.random返回一个从0（包括0）到1（排除）的数字，因此您只需要乘以图像的数量，而不是数字减去1

最好避免使用document.write。在现代网络编程中，几乎没有理由使用它

这里有一种方法可以实现您所描述的目标：|

你必须经常刷新它，因为它只有两个条目，所以你很有可能看到相同的条目

我在那里所做的：

我输出一个元素，the，来保存引号和图像。这不是document.write

我使用了一个数组文字，但我的数组文字包含对象文字，即{…}个带有text:text1之类的东西。因此，我的数组包含对象，其中每个对象都有属性text（引用的文本）和img（要使用的图像的URL）

我修正了随机的东西

当输出我假设是HTML标记的文本和图像时，我通过在代码上方输出的引号div上设置innerHTML来实现

我将所有代码放在一个封闭函数中，并立即调用该函数。这将阻止创建任何全局变量

希望这能有所帮助。

听起来您不需要将JavaScript链接到JavaScript。听起来你必须协调JavaScript和它生成图像的任何东西。谢谢！你知道我该怎么做吗？仅供参考，因为你是JavaScript新手：几乎没有任何理由使用新数组。使用数组文字。在本例中：另外，language属性在90年代被弃用，并且脚本上type的默认值是text/javascript。所以这就是你所需要的。对不起，你的随机数错了。You want=Math.roundMath.random*q，而不是q-1。@用户：很难说，你还没有展示任何东西告诉我们图像是如何选择的。问题是我仍然不知道如何放置图像，而且我找不到教程。非常感谢你为我提供的帮助，感谢你花时间和解释！我希望我能学得更好，成为一名真正优秀的专业人士！你给我的答案对我帮助很大！：我希望每个人都有一个美好的一天。

var quotes = [
    "text1",
    "Text2",
    "text3",
    "text4"
];

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Random Text Plus Image</title>
</head>
<body>
  <div id="quote"></div>
  <script>
    (function() {
      var quotes = [
        {
          text: "text1",
          img:  "http://i.stack.imgur.com/FqBE6.jpg?s=32&g=1"
        },
        {
          text: "text2",
          img:  "https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG",
        }
      ];
      var quote = quotes[Math.floor(Math.random() * quotes.length)];
      document.getElementById("quote").innerHTML =
        '<p>' + quote.text + '</p>' +
        '<img src="' + quote.img + '">';
    })();
  </script>
</body>
</html>