I want my footer background color to change automatically every second. How can I do this using JavaScript? https://www.minus99.com/ I want to make the footer color change like of the website in the given link.

I tried this code but it is not working.

<footer onload="change()" id="background">
    <a href="">[email protected]</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>

5 Answers

0
AhmadMM On Best Solutions

Using JQuery UI and animate with a simple timer you can achieve it

$(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">
[email protected]
<br/>
+977 98088950**5
<br/>
Kapurdhara
<br/>
Kathmandu
<br/>
Nepal
<br/>
©-PratisthaKansakar
</footer >
</body>
</html>

0
ellipsis On

You have to call the timeout again and again (setInterval can be used instead), it is being called only once, and give the name of the colors in the array as strings

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>

0
Eddie On

You have to use ['black', 'blue', 'green'] format for array and use setInterval instead of setTimeout

The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. It returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval(). This method is defined by the WindowOrWorkerGlobalScope mixin.

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);
<footer onload="change()" id="background">
  <a href="">[email protected]</a><br> +977 98088950**5<br>Kapurdhara<br> Kathmandu
  <br>Nepal<br> &copy;-PratisthaKansakar
  <br>
</footer>

0
CodeYute On

setTimeout fires once.

setInterval fires continuously

0
Stephan On

You can easily achieve this with this code :

<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>