Question

我希望页脚背景颜色每秒钟自动更改一次。如何使用JavaScript执行此操作？ https://www.minus99.com/我想要像给定链接中的网站一样更改页脚颜色。

我尝试了此代码，但无法正常工作。

<footer onload="change()" id="background">
    <a href="">me@gmail.com</a><br>
    +977 98088950**5<br>Kapurdhara<br>
    Kathmandu<br>Nepal<br>
    &copy;-PratisthaKansakar<br>       
</footer>

<script>
        var i = 0;
        var color = Array[black,blue, green];
        function change() {
            var doc = document.getElementById("background");

            doc.style.backgroundColor = color[i];
            i = i+1;
            if(i>2){
                i=0;
            }
        }
        setTimeout(change, 1000);
</script>

Answer 1

您必须一次又一次地调用超时（可以使用setInterval代替），它仅被调用一次，并将数组中颜色的名称指定为字符串

var i = 0;
var color = ['black', 'blue', 'green'];

function change() {
  var doc = document.getElementById("background");
  console.log("called")
  doc.style.backgroundColor = color[i];
  i = i + 1;
  if (i > 2) {
    i = 0;
  }
  a()
}

function a() {
  return setTimeout(change, 1000);
}
a();

<footer id="background">aaaaaaaaaa</footer>

Answer 2

您必须对阵列使用if ($("#randomDiv").height() > 1) { console.log("No Adblocker!!"); } else { console.log("An adblocker was detected!!"); }格式，并使用['black', 'blue', 'green']代替setInterval

Window和Worker界面上提供的setTimeout方法，重复调用一个函数或执行一个代码段，并固定每个通话之间的时间延迟。它返回一个唯一的时间间隔ID 标识间隔，因此您可以稍后通过调用将其删除 setInterval()。此方法由 WindowOrWorkerGlobalScope mixin。

clearInterval()

var i = 0;
var color = ['black', 'blue', 'green'];

function change() {
  var doc = document.getElementById("background");
  doc.style.backgroundColor = color[i];
  i = i + 1;
  if (i > 2) {
    i = 0;
  }
}
setInterval(change, 1000);

Answer 3

<footer onload="change()" id="background"> <a href="">me@gmail.com</a><br> +977 98088950**5<br>Kapurdhara<br> Kathmandu <br>Nepal<br> ©-PratisthaKansakar <br> </footer>触发一次。

setTimeout连续发射

Answer 4

您可以使用以下代码轻松实现此目标：

<script>
    var footer = document.getElementById('background');
    var colors = ['black', 'blue', 'green'];
    var i = 0;
    setInterval(function () {
        footer.style.backgroundColor = colors[i];
        i = (++i) % colors.length;
    }, 1000);
</script>

Answer 5

使用JQuery UI并使用简单的计时器设置动画效果即可

$(document).ready(function() {  
 setInterval(function() {
    $('#footer')
    .animate( { backgroundColor: 'red' },1000)
    .animate( { backgroundColor: 'green' }, 1000) 
    .animate( { backgroundColor: 'yellow' }, 1000) 
    .animate( { backgroundColor: 'blue' }, 1000) 
    .animate( { backgroundColor: 'Olive' }, 1000) 
    .animate( { backgroundColor: 'Purple' }, 1000) 
    .animate( { backgroundColor: 'Navy' }, 1000) 
    .animate( { backgroundColor: 'Fuchsia' }, 1000);
    }, 1000);

 });

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<footer id="footer">
kansakarpratistha@gmail.com
<br/>
+977 98088950**5
<br/>
Kapurdhara
<br/>
Kathmandu
<br/>
Nepal
<br/>
©-PratisthaKansakar
</footer >
</body>
</html>

如何使用JavaScript自动更改/切换页脚的背景色

5 个答案: