如何使功能多次工作

时间:2017-11-09 02:28:40

标签: javascript



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;
&#13;
&#13;

当我点击按钮时,我想要改变身体的背景颜色。 但是变量&#34; count&#34;似乎并没有增加。我应该怎么做才能增加数量?

6 个答案:

答案 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变量引用的匿名函数表达式完成执行后它将不存在。为了在按钮单击操作的重复函数调用中维持其生命周期,它应该在匿名函数表达式之外的全局范围内声明:

&#13;
&#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;
&#13;
&#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}}数组。

&#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;

答案 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];
}

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

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