Question

对于我的网站，我试图制作一个按钮，每按一次按钮就会出现不同的报价。我已经制作了一份单独的文件来做到这一点。我对javascript不是很有经验，所以请帮忙。这是我的HTML：

    <button">Change Quote</button>
    <p id="test"></p>

我的目标是给每个引号一个数值，从1到10，所以它是随机的。此外，当我单击按钮时，p会发生变化。谢谢。

编辑：有没有办法让它循环？例如，一旦我得到第一个引用，它可以进入第二个吗？

新JS：

    var quotes = [
  "I am Bob",
  "I am smart",
  "I am independent",
  "I am bringing change",
];

document.getElementById("changeQuote").addEventListener("click", function() {
var q = quotes[ Math.floor( Math.random() * quotes.length ) ];
document.getElementById("test").innerHTML = q;

再次感谢。

Answer 1

如我的评论中所述，将引号存储在数组中，然后添加一个从该数组中随机选择的单击处理程序。

为您的按钮指定一个ID，以便从JS中轻松选择：

<button id="changeQuote">Change Quote</button>

然后使用Math.random() method：

这样的事情

var quotes = [
      "The quick brown fox jumps over the lazy dog.",
      "Look out! There are llamas!",
      "No, really, don't get up.",
      "Whatever",
      "Etc."    
    ];

document.getElementById("changeQuote").addEventListener("click", function() {
    var q = quotes[ Math.floor( Math.random() * quotes.length ) ];
    document.getElementById("test").innerHTML = q;     
});

演示：http://jsfiddle.net/9pqqmnrs/

进一步阅读：

Answer 2

简单方法：

<p id="test"></p>

    <script>
        var quotes = ["quote 1", "quote 2", "quote 3", "quote 4", "quote 5"];
        var index = Math.floor((Math.random() * quotes.length)); 
        document.getElementById('test').innerHTML = quotes[index];

    </script>

说明：引号存储为数组。数学函数用于确定将根据引号数组长度生成哪个随机数。另见：http://www.w3schools.com/jsref/jsref_random.asp

来自列表的Javascript随机短语

2 个答案: