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

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.00000000001%，而人们实现的这些"优化"最终会使代码更难调试，代价是速度提高0.01ms。

同样，担心性能是件好事，但人们确实倾向于过度使用它们，以至于代码过于分散，无法理解。只是需要记住的事情。