var change = function() {
var elem = document.getElementsByTagName("body");
var count = 0;
count++;
var color = "";
var colors = ["#ff6051", "#ff9f51", "#ffdf51", "#b6ff51", "#51adff", "#3e65c1", "#6414ef"];
for (var i = 0; i < colors.length; i++) {
if (count == i + 1) {
color = colors[i];
}
}
elem[0].style.backgroundColor = color;
}
&#13;
<button onclick="change()">Click me</button>
&#13;
当我点击按钮时,我想要改变身体的背景颜色。 但是变量&#34; count&#34;似乎并没有增加。我应该怎么做才能增加数量?
答案 0 :(得分:1)
在函数外部声明变量 count ,以便在您更新时获取全局范围。
<强>样本强>
var count = 0;
var change = function() {
var elem = document.getElementsByTagName("body");
count++;
console.log('##count',count);
var color = "";
var colors = ["#ff6051", "#ff9f51", "#ffdf51", "#b6ff51", "#51adff", "#3e65c1", "#6414ef"];
for (var i = 0; i < colors.length; i++) {
if (count == i + 1) {
color = colors[i];
}
}
elem[0].style.backgroundColor = color;
}
<button onclick="change()">Click me</button>
答案 1 :(得分:1)
count
变量具有局部作用域,因此在change
变量引用的匿名函数表达式完成执行后它将不存在。为了在按钮单击操作的重复函数调用中维持其生命周期,它应该在匿名函数表达式之外的全局范围内声明:
var count = 0; //now count has global scope.
var change = function() {
var elem = document.getElementsByTagName("body");
count++;
var color = "";
var colors = ["#ff6051", "#ff9f51", "#ffdf51", "#b6ff51", "#51adff", "#3e65c1", "#6414ef"];
for (var i = 0; i < colors.length; i++) {
if (count == i + 1) {
color = colors[i];
}
}
elem[0].style.backgroundColor = color;
}
&#13;
<button onclick="change()">Click me</button>
&#13;
注意:您还应考虑在for
循环中提供一些默认颜色,因为在点击7次后,它会将backgroundColor
设置为空字符串。
var color = "#000000"; //default black color may be
答案 2 :(得分:1)
对函数的每次调用都会将count重置为0,因为您在函数的第二行将其设置为零。
如果在函数外部将其设置为0,这将解决计数问题。
然而,还有一个问题(你没有提到):在计数到7之后,你的数组中的颜色用完了,因为count超出了数组的范围。我会丢失for循环,因为它是不必要的(使用count来代替数组)并且当它达到数组的大小时重置count。
var count = 0;
var colors = ["#ff6051", "#ff9f51", "#ffdf51", "#b6ff51", "#51adff", "#3e65c1", "#6414ef"];
var change = function() {
var elem = document.getElementsByTagName("body");
if (count == colors.length) {
count = 0;
}
elem[0].style.backgroundColor = colors[count];
count++;
}
<button onclick="change()">Click me</button>
答案 3 :(得分:1)
在不改变代码的情况下,可以通过比较当前颜色来避免循环并迭代数组。这也避免了持有计数迭代器。
注意:强>
backgroundColor
作为rgb值返回(例如rgb( ###, ###, ###)
),这就是使用rgb2hex
将其转换为十六进制值的原因,就像存储在{{{ 1}}数组。
colors
&#13;
var change = function() {
var el = document.querySelector("body");
var colors = ["#ff6051", "#ff9f51", "#ffdf51", "#b6ff51", "#51adff", "#3e65c1", "#6414ef"];
var currentColor = rgb2hex( el.style.backgroundColor );
var colorIndex = colors.indexOf( currentColor );
// If at last color, cycle back to front
if (colorIndex == colors.length-1)
colorIndex = -1;
el.style.backgroundColor = colors[colorIndex + 1];
}
/** Converts decimal to hex **/
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
/** Converts rgb string to hex string **/
function rgb2hex(rgb) {
if (rgb.search("rgb") == -1)
return rgb;
else {
rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
}
&#13;
答案 4 :(得分:0)
要达到预期效果,请使用以下选项
无需用于循环
点击7次后,循环再次运行
您的代码存在的一个问题是,由于 i + 1 ,所以首先会跳过背景颜色,点击7次后,它会回到白色背景
var count = 0;
var colors = ["#ff6051", "#ff9f51", "#ffdf51", "#b6ff51", "#51adff", "#3e65c1", "#6414ef"];
var change = function() {
if(count == colors.length + 1){
count =0;
}
++count;
var elem = document.getElementsByTagName("body");
elem[0].style.backgroundColor = colors[count];
}
答案 5 :(得分:0)
你可以通常计算任何函数的调用,通过“提升”函数(包装它)来实现这个功能。 这将为您提供一个简单的功能,无需知道它是否被计数,只有在需要时才可以使用计数器包装。
function countingWrapper(f,reportf)
{
var counter = 0;
return function()
{
reportf( ++counter)
return f.apply(this, arguments);
}
}
function doSomething() { console.log('boo!'); }
function reportSomething(n) { console.log('did something '+ n + ' times.')}
var newDoSomething = countingWrapper(doSomething, reportSomething);
newDoSomething();
newDoSomething();
newSoSomething();