Question

我被困在这个小节拍器项目上。它应该在两种背景颜色之间来回闪烁。只要定义了两种颜色，它就可以正常工作（在JS第12行中切换到＃34; col＆＃34;任何颜色都可以使用）。但是，我也试图这样做，所以我可以随机选择其中一种颜色。我可以告诉（console.log）我的数字随机函数为我的变量＆＃34; col＆＃34;生成正确的十六进制颜色值。但我无法让变量发挥作用。我试过＆＃34; col＆＃34;没有引号。

以下是codepen的链接：http://codepen.io/Fedreg/pen/xVqwjQ/

    <head></head>
<body>
              <div id="title">
      flashnome
  </div>
  <div id="desc">               
    the silent metronome
      <p>
        <button onclick="slower();" id="button1">
          slower
        </button>
        <button onclick="faster();" id="button1">
          faster
        </button>
      </p>
      <p>
        <button onclick="change();" id="button1">Change Color</button>
    </p>
  </div>
 </body>


    @import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,700);

html, body {
        height: 100%;
    width:100%;
}

#title {
    text-align: center;
    color: white;
    font-size: 5em;
        font-family: 'Josefin Sans', sans-serif;
        margin: auto;
        text-transform: uppercase;
    padding: 2em 0 .2em;
    }


#desc {
    text-align: center;
    color: white;
    font-size: 2em;
        font-family: 'Josefin Sans', sans-serif;
        margin: auto;
        text-transform: uppercase;
    padding: 0;
    }

#button1 {
    text-align: center;
    font-size: .7em;
        font-family: 'Josefin Sans', sans-serif;
        margin: 0 auto;
        text-transform: uppercase;
    padding: 8px;
    }


var x = 500;
var flashStep = 1;
var myInterval;

function change() { 
var col = '#' + (Math.random().toString(16) + '000000').slice(2, 8);
  console.log(col);
}

function flash() {
  if (flashStep == 1) {
    document.bgColor = "col";
    flashStep = 2;
  } else {
    document.bgColor = "#333";
    flashStep = 1;
  }
}

function faster() {
  window.clearInterval(myInterval);
  myInterval = window.setInterval(flash, x -= 25);
}

function slower() {
  window.clearInterval(myInterval);
  myInterval = window.setInterval(flash, x += 25);
}

myInterval = window.setInterval(flash, x);

function change() { 
var col = '#' + (Math.random().toString(16) + '000000').slice(2, 8);
  console.log(col);
}

Answer 1

创建一个名为＆＃34; randomColor＆＃34;的全局变量并改变它。

 var x = 500;
    var flashStep = 1;
    var myInterval;
    var randomColor = "#FFFF00";

function change() { 
var col = '#' + (Math.random().toString(16) + '000000').slice(2, 8);
  randomColor = col;
  console.log(col);
}

function flash() {
  if (flashStep == 1) {
    document.bgColor = randomColor;
    flashStep = 2;
  } else {
    document.bgColor = "#333";
    flashStep = 1;
  }
}

function faster() {
  window.clearInterval(myInterval);
  myInterval = window.setInterval(flash, x -= 25);
}

function slower() {
  window.clearInterval(myInterval);
  myInterval = window.setInterval(flash, x += 25);
}

myInterval = window.setInterval(flash, x);

Answer 2

function change() { 
    var col = '#' + (Math.random().toString(16) +     '000000').slice(2, 8);
  console.log(col);

  return col;
}

function flash() {
  if (flashStep == 1) {
    document.bgColor = change();
    flashStep = 2;
  } else {
    document.bgColor = "#333";
    flashStep = 1;
  }
}

您可以使用＆＃34;避免使用全局变量。返回＆＃34;在＆＃34; change（）＆＃34;函数然后在flash（）函数中调用change（）int。这有点＆＃34;更好的练习＆＃34;而不是使用全局变量

Answer 3

首先，您已经将change（）函数写了两次。然后，在其内部，您使用 var 关键字 - 这使得变量在变更（）函数中变为局部变量 - 该函数的外部无法访问col

只需将col定义为global，位于change（）函数之上。引用它时，不将其括在引号中 - 这使它成为一个字符串（字面值＆＃34; col＆＃34;）。

所以：

var col = false;

function change(){
    col = '#F11';
}

change();

document.bgColor = col;

javascript中的变量问题

3 个答案: