logo标签列表

使用Javascript更改页面背景颜色？

javascript
3

我是一个新手，正在尝试使用Javascript随机更改页面的背景颜色，但是我不知道为什么我的代码无法正常运行：

var colors = ["#e88f84", "#e8bb84", "#d2e884"];

function randomize() {
    var randomHex = colors[Math.floor(Math.random * colors.length)];
    document.body.style.backgroundColor = randomHex;
}

<body>
    <div id="text">
        <script>randomize()</script>
    </div>
</body>
2个回答
4

Math.random 是一个方法，需要调用它才能得到一个随机数。由于 Math.random 返回函数引用，表达式 Math.random * colors.length 返回 NaN。而 Math.floor(NaN) 也会返回 NaN。

var randomHex = colors[Math.floor(Math.random() * colors.length)];
                                             ^^


var colors = ["#e88f84", "#e8bb84", "#d2e884"];

function randomize() {
  var randomHex = colors[Math.floor(Math.random() * colors.length)];
  document.body.style.backgroundColor = randomHex;
}

randomize();
<body>
  <div id="text">
    Some text
  </div>
</body>

为了改进代码，您可以使用IIFE（立即调用的函数表达式），它会自动调用并将变量保持本地化。
(function() {
    'use strict';

    var colors = ["#e88f84", "#e8bb84", "#d2e884"];

    var randomHex = colors[Math.floor(Math.random() * colors.length)];
    document.body.style.backgroundColor = randomHex;
}());


(function() {
  'use strict';
  var colors = ["#e88f84", "#e8bb84", "#d2e884"]
  var randomHex = colors[Math.floor(Math.random() * colors.length)];
  document.body.style.backgroundColor = randomHex;
}());

0

实际上你的代码永远不会工作。首先，你的“colors”数组末尾缺少分号。其次，Math.random是一个函数，而不是一个变量。它必须有括号（）。你的代码缺少了它们。除此之外，一切都很好，我已经在自己的笔记本电脑上测试过了。

哎呀，我在 StackOverflow 重新输入变量定义时忘记加分号了。感谢指出缺少括号的问题。 - gridproquo
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接