更改div背景颜色一秒钟然后将其返回到javascript中的原始颜色答案

【问题标题】：Change div background color for one second then return it to the original color in javacsript更改div背景颜色一秒钟然后将其返回到javascript中的原始颜色
【发布时间】：2017-12-19 17:29:19
【问题描述】：

我想将 div 的背景颜色更改一秒钟，然后将其恢复为原始颜色。我正在制作西蒙游戏，但一段时间内无法弄清楚如何闪烁颜色。到目前为止，我有这个：

var red = document.getElementById("redBox");

flashRed();

function flashRed() {
  red.style.background = "#ff0000"; //light red "flash" color
  wait(800);
  red.style.background = "#a80000"; //normal red color
}

function wait(ms) {
  var time = new Date();
  var millisecs = time.getTime();
  var startTime = millisecs;
  var currentTime = millisecs;
  while(currentTime - startTime < ms) {
  time = new Date();
  currentTime = time.getTime();
  }
}

我将如何让鲜红色闪烁 800 毫秒，然后将颜色恢复为红色？

【问题讨论】：

javascript中没有wait。使用setTimeout() 并处理异步。
我在我的答案中添加了示例，但总的来说 jQuery 是此类任务的好主意。这取决于你做什么，但仍然检查 jQuery animate 和其他辅助函数
@Griva JQuery 根本不需要这么简单的任务。 JQuery 习惯性地被过度使用。
单人 - 是的，这就是为什么我说取决于他做什么。
@Griva 这是一个我们不能使用 jQuery 的课堂练习。

标签： javascript html css

【解决方案1】：

你应该使用 setTimeout() 函数。它会在选定的时间后触发一些回调，例如

setTimeout(function(){
     // some code
},1000); // for 1s = 1000ms

您可以在 setTimeout 函数中添加类，以便您的 CSS 可以更改背景。

这是工作示例：fiddle here

简而言之，首先你的元素需要一些初始样式，当你想改变颜色或其他东西时，你只需添加另一个具有一些属性的类——在这个例子中是红色背景，但同时你设置超时来删除它稍后但不会停止您的整个代码。

【讨论】：

我已经尝试过了，但到目前为止，我所能做的就是将颜色从一种红色变为另一种，但我无法将其恢复为原始颜色。如何使用 setTimeout 恢复到原始颜色？
谢谢 Griva，这很好用。我的下一个问题是我需要按一定顺序更改 4 个不同对象的背景颜色。如何通过调用随时更改背景颜色的函数来做到这一点？
这应该是分开的问题。您需要添加更多详细信息，可以通过从第一个超时触发另一个超时来完成，或者只是同时调用其中 4 个但时间不同，第一个 1 秒，下一个 2 秒，依此类推
好的，我再问一个问题。
如果你想得到整个问题的答案，你应该从一开始就添加它，避免问问题 1，然后在 cmets 中提出问题 2、3、4，我认为这不是堆栈的工作方式。顺便说一句，如果它适合你，你应该用复选标记标记答案，我看到你问了一些问题，但你没有勾选答案

【解决方案2】：

< script type = "text/javascript" > 
toggle_color("#61beb3", "#90a2c6", 4000, 2000);

function toggle_color(color1, color2, cycle_time, wait_time) {

    setInterval(function first_color() {
        document.body.style.backgroundColor = color1;
        setTimeout(change_color, wait_time);
    }, cycle_time);

    function change_color() {
        document.body.style.backgroundColor = color2;
    }
} < /script>

上面的 Javascript 代码将简单地每 2 秒切换一次 HTML 正文的背景颜色。您应该使用 setTimeout() 函数。它会在选定的时间后触发一些回调。颜色#61beb3 将保持为背景，直到 #90a2c6 被 change_color() 函数设置为背景。

【讨论】：

【解决方案3】：

这不是解决问题的方法。而是通过 setTimeout() 使用计时器：

var div = document.querySelector("div");
var originalColor = getComputedStyle(div).backgroundColor; // Store original color (red)

div.style.backgroundColor = "#ff0";  // Change color

// Set a timer to run the passed function after 1000 milliseconds (1 second)
setTimeout(function(){
  div.style.backgroundColor = originalColor;  // Change the color back to the original
}, 1000);

div {
  width:50px;
  height:50px;
  background-color:red; /* This is the original color */
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

这里的问题是我想按照一定的顺序对四个具有不同颜色的独立 div 执行此操作。这就是我这样做的原因，所以我可以在需要时调用该函数。
@MichaelMungai 这就是这样做的方法。没有理由不能将此解决方案扩展到以特定顺序“播放”的四种颜色。您只需一个接一个地触发计时器。

【解决方案4】：

您甚至可以使用 CSS 过渡技术，例如：-

<html>
<head>
<style> 
 div {
    transition: 2s;
 }
div:hover {
 background:red;
}
</style>
</head>
 <body>

 <h1>The transition Property</h1>

 <p>Hover over the div element below, to see the transition effect:</p>
 <div>My Box</div>

</body>

所以我做了悬停元素，你也可以使用 Javascript 应用 css。

【讨论】：