使用javascript计时将Gif链接到Div_Javascript_Html

使用javascript计时将Gif链接到Div

javascript html

使用javascript计时将Gif链接到Div,javascript,html,Javascript,Html,我正在尝试根据gif更改div的背景色。这是我的代码： <!DOCTYPE html> <html lang="en"> <head> <title>Dashboard</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-

我正在尝试根据gif更改div的背景色。这是我的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Dashboard</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--===============================================================================================-->
    <link rel="icon" type="image/png" href="images/icons/favicon.ico" />
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="css/util.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <!--===============================================================================================-->
</head>

<body onload="resetGif('img3')">

    <div class="container m-t-20 m-l-20px">
        <div class="row">
            <div class="col-9">
                <h2>Map of KidKits</h2>
                <img src="images/map crossfade.gif" alt="" class="map-gif" id="img3">
            </div>

            <div class="col-3">
                <h2 id="first-bad">Div to change color</h2>
            </div>

        </div>
    </div>

    <script>
        (function(el, interval) {
            window.setInterval(function() {
                document.getElementById("first-bad").style.backgroundColor = "#2eaa2e"
            }, interval);
            setTimeout(function() {
                document.getElementById("first-bad").style.backgroundColor = "orange"
            }, 3410);
            setTimeout(function() {
                document.getElementById("first-bad").style.backgroundColor = "#2eaa2e"
            }, 1500);
        })(document.getElementById('first-bad'), 10410);

        function resetGif(id) {
            var img = document.getElementById(id);
            var imageUrl = img.src;
            img.src = "";
            img.src = imageUrl;
        };
    </script>

</body>

</html>


仪表板
儿童用品地图
Div更改颜色
（功能（el，间隔）{
setInterval（函数（）{
document.getElementById（“第一个坏”）.style.backgroundColor=“#2eaa2e”
}，间隔）；
setTimeout（函数（）{
document.getElementById（“第一个坏”）.style.backgroundColor=“橙色”
}, 3410);
setTimeout（函数（）{
document.getElementById（“第一个坏”）.style.backgroundColor=“#2eaa2e”
}, 1500);
})（文件getElementById（'first-bad'），10410）；
函数resetGif（id）{
var img=document.getElementById（id）；
var imageUrl=img.src；
img.src=“”；
img.src=imageUrl；
};

这里发生的事情是，每次加载页面时，我都会重置gif，以便时间匹配。当gif左边的点退出框时，我想将div的背景色从绿色更改为橙色，当点返回框时，我想将div的背景色从橙色更改为绿色。这必须在gif的持续时间内无限循环，以便在一次迭代后颜色不会错过匹配。我该怎么做

我现在面临的问题是：

加载时，磁贴没有bg颜色
时间不定了
一旦瓷砖在一次迭代中从绿色变为橙色再变为绿色，它就不会重复

以下是指向gif的链接：

加载时，磁贴没有bg颜色

您应该在页面加载后设置背景色。只需在

css/main.css

文件中设置它

时间不定了

嗯，

setTimeout

不准确。有关更多信息，请查看此答案：

一旦瓷砖在一次迭代中从绿色变为橙色再变为绿色，它就不会重复

这可能是因为您使用了将执行代码一次的

setTimeout

。

更改代码就像重置计数器一样，并将bgcolor放入数组中

你有什么切实可行的方法来证明你的建议吗？@UdoE。

let counter = 0;
const bgColorArray = ['red', 'orange', 'yellow'];
setInterval(() => {
    let increaseCounter = ++counter;
    if (increaseCounter === bgColorArray.length) {
         counter = 0;
    }
    document.getElementById("first-bad").style.backgroundColor = 
       bgColorArray[increaseCounter]
 }, 1000)