我正在尝试自学 javascript，但显然我还没有完全理解。
我想要得到的是一个框，当您单击它时，背景颜色会从黑色平滑地变为某种颜色。为此，我创建了一个函数，它接受 HSV 值并输出 #rrggbb 格式的字符串。因此，要淡入，我只需使用 for 循环将 V 值以 1 为增量从 0 移动到 100。
我得到的是一个框，当您单击它时，它会暂停并更改为我正在使用的背景颜色。我还记录输出，并在最后使用 RGB 十六进制值计算和更新一次。
所以，很明显，我不明白在中间步骤刷新 DOM 需要什么知识。我对此进行的所有搜索都提出了使用 jQuery 等的解决方案。这很好，我打算通过 jQuery 等进行工作，但首先，我想让一些类似的东西发挥作用，以便我可以更彻底地了解幕后发生的事情。
代码在这里:http://codepen.io/anon/pen/QbzQJG
代码:
HTML:
<title>Color test</title>
<body>
<div id="colorbox" onclick="javascript:fadeIn()"></div>
<div id="console"></div>
</body>
CSS:
body {
background: #000;
color: #999;
}
#colorbox {
background: #000;
border: 1px solid #333;
width: 250px;
height: 250px;
margin: 0 auto;
}
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);
}
}
有什么想法吗？
最佳答案
您的问题在于理解浏览器(以及一般的 JS)中的事件流。 (标准)JavaScript 作为单线程异步进程工作。因此，对于代码“之间”发生的任何事情，您需要以某种方式将执行返回到调用上下文。当嵌套在 JavaScript 代码的调用堆栈中以及当您想要“查看”代码在浏览器窗口上的效果时，情况确实如此。
您的问题是 pause 没有暂停任何内容。它忙着等待。您需要将控制权返回给浏览器。
您可以这样实现您的目标:
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);
}
暂停。
关于javascript - 尝试编写淡入背景颜色的javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31775906/