Как автоматически изменить / переключить цвет фона нижнего колонтитула с помощью JavaScript - PullRequest
Новая
       3

Как автоматически изменить / переключить цвет фона нижнего колонтитула с помощью JavaScript

0 голосов
/ 06 мая 2019

Я хочу, чтобы цвет фона нижнего колонтитула менялся каждую секунду автоматически.Как я могу сделать это с помощью 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>

Ответы [ 5 ]

0 голосов
/ 06 мая 2019

Используя 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>
0 голосов
/ 06 мая 2019

Вы можете легко добиться этого с помощью этого кода: 

<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>
0 голосов
/ 06 мая 2019

Вы должны использовать формат ['black', 'blue', 'green'] для массива и использовать setInterval вместо setTimeout

Метод setInterval(), предлагаемый в интерфейсах Window и Worker, неоднократно вызывает функциюили выполняет фрагмент кода с фиксированной временной задержкой между каждым вызовом.Он возвращает идентификатор интервала, который однозначно идентифицирует интервал, поэтому вы можете удалить его позже, вызвав clearInterval().Этот метод определяется микшином WindowOrWorkerGlobalScope. 

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="">me@gmail.com</a><br> +977 98088950**5<br>Kapurdhara<br> Kathmandu
  <br>Nepal<br> &copy;-PratisthaKansakar
  <br>
</footer>
0 голосов
/ 06 мая 2019

setTimeout срабатывает один раз.

setInterval непрерывно стреляет

0 голосов
/ 06 мая 2019

Вы должны вызывать тайм-аут снова и снова (вместо него можно использовать 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...