Question

＆＃13;

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;似乎并没有增加。我应该怎么做才能增加数量？

Answer 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>

Answer 2

count变量具有局部作用域，因此在change变量引用的匿名函数表达式完成执行后它将不存在。为了在按钮单击操作的重复函数调用中维持其生命周期，它应该在匿名函数表达式之外的全局范围内声明：

＆＃13;

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

Answer 3

对函数的每次调用都会将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>

Answer 4

在不改变代码的情况下，可以通过比较当前颜色来避免循环并迭代数组。这也避免了持有计数迭代器。

注意：

有些浏览器会将backgroundColor作为rgb值返回（例如rgb( ###, ###, ###)），这就是使用rgb2hex将其转换为十六进制值的原因，就像存储在{{{ 1}}数组。

＆＃13;
＆＃13;
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;
＆＃13;
＆＃13;

Answer 5

要达到预期效果，请使用以下选项
无需用于循环
点击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];
}

https://codepen.io/divyar34/pen/EbZxPm

Answer 6

你可以通常计算任何函数的调用，通过“提升”函数（包装它）来实现这个功能。这将为您提供一个简单的功能，无需知道它是否被计数，只有在需要时才可以使用计数器包装。

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();

如何使功能多次工作

6 个答案: