通过重复单击单个按钮来更改元素的背景颜色

Question

function myfunction3() {
  var m = Math.random() * 10 + 1;
  if (m < 2.5) {
    document.getElementById("bg").style.backgroundColor = "red";
  } else if (m < 5) {
    document.getElementById("bg").style.backgroundColor = "blue";
  } else if (m < 7.5) {
    document.getElementById("bg").style.backgroundColor = "black";
  } else {
    document.getElementById("bg").style.backgroundColor = "green";
  }
}

您好，我是 javascript 的新手，我正在创建一个练习网站。我想做的是通过重复点击一个按钮一个一个地改变元素的背景颜色（其 id 是“bg”）。我在 HTML 文件中调用了相同的函数 (onclick="myfunction3( )")。到目前为止，我只能想到这个逻辑，但这不是最有效的方法。请帮助我如何以更好的方式做到这一点？或者我可以自学的在线资源也不错。

Answer 1

一次又一次地使用 document.getElementById 肯定会减慢您的程序，但还不足以引起注意。您还可以删除对随机值的操作，并根据其值在 0 到 1 之间而不是 1 到 10 之间进行条件设置。这是我的优化方法：

bg_element = document.getElementById("bg");

function myfunction3() {
    var m = Math.random();
    if (m < 0.25) {
        bg_element.style.backgroundColor = "red";
    } else if (m < 0.5) {
        bg_element.style.backgroundColor = "blue";
    } else if (m < 0.75) {
        bg_element.style.backgroundColor = "black";
    } else {
        bg_element.style.backgroundColor = "green";
    }
}

超级重要警告

虽然我很感谢您这么早就尝试了解优化，但这是一个让许多程序员掉入的兔子洞。 99% 的情况下，普通用户不会注意到这些优化。此外，为 bg_element 使用全局变量可能会使您的代码更难阅读 0.00000001%，而这些 'optimizations' 的人最终以 0.01 毫秒的速度提升为代价使代码更难调试。

再次强调，担心性能是件好事，但人们确实倾向于过度使用它们，以至于代码过于分散且难以理解。只是要记住一些事情。

通过重复单击单个按钮来更改元素的背景颜色

changing background color of element with repeated clicks on a single button

javascript

logic

button

超级重要警告