尝试编写以背景色淡出的javascript

我试图自学javascript，但显然，我还没有完全理解

我想得到的是一个框，当你点击它时，背景颜色会从黑色平滑地变为某种颜色。为此，我创建了一个函数，它接受一个HSV值并以#rrggbb格式输出一个字符串。因此，要淡入淡入，我只需使用for循环，以1的增量将V值从0移动到100

我得到的是一个框，当你点击它时，它会暂停并更改为我使用的背景色。我还记录了输出，并在最后用RGB十六进制值计算和更新一次

因此，很明显，我不了解在中间步骤刷新DOM所需的任何知识。我得到的所有搜索结果都使用jQuery或类似的工具提供了解决方案。这很好，我打算通过jQuery等工具来完成我的工作，但首先，我想做一些类似的事情，这样我就可以更彻底地了解引擎盖下正在发生的事情

代码如下：

守则：

HTML:

Javascript:

var c = function() {
  return ({
    log: function(msg) {
      consoleDiv = document.getElementById('console');
      para = document.createElement('p');
      text = document.createTextNode(msg);
      para.appendChild(text);
      consoleDiv.appendChild(para);
    }
  });
}();

function toRGB(H, S, V) {
  S /= 100;
  V /= 100;
  var C = V * S;
  H /= 60;
  var X = C * (1 - Math.abs((H % 2) - 1));
  var R = 0;
  var G = 0;
  var B = 0;
  if (0 <= H && H < 1) {
    R = C;
    G = X;
    B = 0;
  } else if (1 <= H && H < 2) {
    R = X;
    G = C;
    B = 0;
  } else if (2 <= H && H < 3) {
    R = 0;
    G = C;
    B = X;
  } else if (3 <= H && H < 4) {
    R = 0;
    G = X;
    B = C;
  } else if (4 <= H && H < 5) {
    R = X;
    G = 0;
    B = C;
  } else if (5 <= H && H < 6) {
    R = C;
    G = 0;
    B = X;
  } else {
    R = 0;
    G = 0;
    B = 0;
  }

  var m = V - C;
  R = Math.round(255 * (R + m)).toString(16);
  R.length < 2 ? R = "0" + R : R = "" + R;
  G = Math.round(255 * (G + m)).toString(16);
  G.length < 2 ? G = "0" + G : G = "" + G;
  B = Math.round(255 * (B + m)).toString(16);
  B.length < 2 ? B = "0" + B : B = "" + B;

  var RGB = "#" + R + G + B;
  return RGB;
}

function pause(milliseconds) {
  var dt = new Date();
  while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
}

function fadeIn() {
  var colorbox = document.querySelector("#colorbox");
  for (var i = 0; i <= 100; i++) {
    colorbox.style.backgroundColor = toRGB(150, 80, i);
    c.log(toRGB(150, 80, i));
    pause(10);
  }
}

var c=function（）{
返回({
日志：函数（msg）{
consoleDiv=document.getElementById（'console'）；
para=document.createElement（'p'）；
text=document.createTextNode（msg）；
第11段（案文）；
慰问儿童（第5段）；
}
});
}();
函数toRGB（H、S、V）{
S/=100；
V/=100；
var C=V*S；
H/=60；
VarX=C*（1-数学绝对值（（H%2）-1））；
var R=0；
var G=0；
var B=0；
如果（0您将其过度复杂化。您应该使用CSS转换并只添加/删除一个类。因此，对于您的
#colorbox
，您应该添加
转换
属性：

#colorbox {
    background: #000;
    border: 1px solid #333;
    width: 250px;
    height: 250px;
    margin: 0 auto;

    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

那么假设您有一个类
。新的bckgr
：

.new-bckgr {
    background: #76430; /* or whatever colour you want */
}

现在你需要做的就是这样：

$("#colorbox").on('click', function(){
    $(this).addClass('new-backgr');
});

function fadeIn() {
  var colorbox = document.querySelector("#colorbox");

  var i = 0;
  var interval = setInterval(function() {
    if(i > 100) {
      clearInterval(interval);
      return;
    }
    colorbox.style.backgroundColor = toRGB(150, 80, i);
    c.log(toRGB(150, 80, i));
    i++
  }, 10);
}

您可以将它从黑色平滑地淡出到您在
新的bckgr
类中放置的颜色。如果您删除该类，它将淡出到黑色
您的问题是理解浏览器中的事件流（以及一般的JS）。（标准）JavaScript作为单线程异步进程工作。因此，对于代码“中间”发生的任何事情，您需要以某种方式将执行返回到调用上下文。当JavaScript代码嵌套在调用堆栈中时，以及当您希望“查看”代码对浏览器窗口的影响时，都是如此

您的问题是，
pause
没有暂停任何内容。它正在等待。您需要将控件返回到浏览器

你可以像这样实现你的目标：

$("#colorbox").on('click', function(){
    $(this).addClass('new-backgr');
});

function fadeIn() {
  var colorbox = document.querySelector("#colorbox");

  var i = 0;
  var interval = setInterval(function() {
    if(i > 100) {
      clearInterval(interval);
      return;
    }
    colorbox.style.backgroundColor = toRGB(150, 80, i);
    c.log(toRGB(150, 80, i));
    i++
  }, 10);
}

此解决方案中不需要暂停。
您的pass函数使处理器处于繁忙状态。由于JavaScript是单线程且基于事件的，因此在代码运行时不会更新DOM。通过使用
setTimeout
暂停执行而不是繁忙循环，您可以在更改之间更新DOM，从而我显示你的褪色效果

在本例中，
fadeIn
的代码如下所示：

function fadeIn(i) {
  if (i >= 100) {return;}
  var colorbox = document.querySelector("#colorbox");
  colorbox.style.backgroundColor = toRGB(150, 80, i);
  c.log(toRGB(150, 80, i));
  setTimeout(function(){fadeIn(i + 1);},10);
}

使用此代码，您的HTML调用应该是
fadeIn（0）

在答案中可以找到关于JavaScript单线程模型的更广泛的解释

一个分叉的、改进的代码版本就是你的代码笔。
为什么你想发明新的轮子。Jquery UI库中有一个完美的函数为你@mimo做这件事-这不是一个好建议。有很多理由不使用Jquery，而且实际上使用@mimo越来越普遍，感谢Jquery链接。我正在尝试我只是想重新发明轮子，这样我才能了解它是如何工作的。除了一个例子之外，我不一定要用它来实现任何东西。我希望我在顶部的写作可以防止这种不回答。如果你不想在新的应用程序中使用另一个类，我想我应该把这个免责声明放在一个更普遍的位置颜色，您只需使用
.css（）更改css即可
这是一个可以让淡入淡出正常工作的解决方案，但它不需要有意义的javascript。OP想要学习javascript，并且正在努力解决这个问题，而不是CSS/DOM/Effects。@Lucian，这对我试图实现的目标，学习javascript没有帮助。这正是我需要学习的。谢谢！事件流加上fa这个浏览器包含一个内置的调度程序，这是非常宝贵的，让我进一步了解。谢谢！这是一个很好的解决方案。谢谢！