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

问题描述

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( )"）。到目前为止，我只能想到这个逻辑，但这不是最有效的方法。请帮助我如何以更好的方式做到这一点？或者我可以从中学习自己的在线资源也不错。

解决方法

反复使用 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%，而这些“优化”人员实施的这些“优化”最终会使代码更难调试，代价是速度提高了 0.01 毫秒。>

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