Блог

В этом документе есть основной документ, который, наряду с телом и текстом заголовка, меняет цвет с эффектом выцветания (по крайней мере, должен) через определенное время из массива цветов. Тем не менее, элемент тела, похоже, правильно изменяет градиент, но без воспроизведения перехода затухания. Я совершенно новичок в HTML, CSS и JavaScript и поэтому не могу самостоятельно исправить свой код. Я был бы очень рад, если бы вы смогли исправить мою ошибку. Этот код, вероятно, не следует считать хорошо написанным.

Вот html-документ:

 lt;!DOCTYPE htmlgt;  lt;html lang="en" id="htmlMain"gt;   lt;headgt;   lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"gt;  lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"gt;lt;/scriptgt;  lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"gt;lt;/scriptgt;  lt;link href="styles.css" rel="stylesheet"gt;   lt;scriptgt;  document.addEventListener('DOMContentLoaded', main);   function main(){  var myVar;  var colors = ['#B86B77', '#C0838C', '#CF989F', '#D8ABB1', '#E0BCBF'];  head = document.getElementById('header');  head.style.transition="all 2.5s";   document.body.style.transition="all 2.5s";  var i = 0;  changeColor();   function changeColor() {  myVar = setTimeout(change, 1000);  }   function change() {  // For Safari and similar browsers.  document.body.style.backgroundColor = colors[i  ];  // For heading  head.style.color = colors[colors.length - i];   var orientation = 'top'; // For now   // Body gradient  document.body.style.backgroundImage = '-webkit-linear-gradient('   orientation   ', '   colors[i]   ', '   colors[colors.length - i]   ')';  document.body.style.backgroundImage = '-moz-linear-gradient('   orientation   ', '   colors[i]   ', '   colors[colors.length - i]   ')';  document.body.style.backgroundImage = '-ms-linear-gradient('   orientation   ', '   colors[i]   ', '   colors[colors.length - i]   ')';  document.body.style.backgroundImage = '-o-linear-gradient('   orientation   ', '   colors[i]   ', '   colors[colors.length - i]   ')';  document.body.style.backgroundImage = 'linear-gradient('   orientation   ', '   colors[i]   ', '   colors[colors.length - i]   ')';   if(head.style.color == document.body.style.backgroundColor)  head.style.color = '#9C626A';   if(i == colors.length) i = 0;  changeColor();  }  }  lt;/scriptgt;      lt;titlegt;Debjyoti Sikdarlt;/titlegt;   lt;/headgt;   lt;body transition="all 2.5s";gt;  lt;p style="text-align:center;"gt; lt;ubuntu_bold id="header"gt;Debjyoti Sikdarlt;/ubuntu_boldgt; lt;/pgt;  lt;/divgt;    lt;/bodygt;  lt;/htmlgt;  

CSS:

 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700amp;display=swap');  html {  height: 100%; }  body {  transition: "all 2.5s";  height: 100%;  margin: 0;  background-attachment: fixed;  -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;  background: #70bg32; /* 70bg32 */  background-repeat:no-repeat;  background: -webkit-linear-gradient( to left top, #B86B77, #E0BCBF);  background: -moz-linear-gradient( to left top, #B86B77, #E0BCBF);  background: -ms-linear-gradient( to left top, #B86B77, #E0BCBF);  background: -o-linear-gradient( to left top, #B86B77, #E0BCBF);  background: linear-gradient( to left top, #B86B77, #E0BCBF); }  ubuntu_bold {  font-family: 'Ubuntu', sans-serif;  font-size: 50px;  color: #9C626A; }  

Я взял то, что у вас было, удалил некоторые проблемы с синтаксисом (отсутствующие теги в HTML, некоторые другие вещи) и прокомментировал некоторые CSS и код. Я также изменил цвета, чтобы было до боли очевидно, что происходит. Я также добавил более длительную задержку, так как у вас было 1000 и конфликт перехода длился 2,5 секунды.

Я считаю, что это то, с чем вы можете сравнить свой код и на основе чего строить.

Я поместил это в фрагмент, чтобы вы могли запустить его и посмотреть здесь:

 document.addEventListener('DOMContentLoaded', main);  function main() {  let myVar;  // changed colors just to make it painfully obvious  let colors = ['#B86B77', '#776BB8', '#CF989F', '#6BB877', '#6B77B8'];  let head = document.getElementById('header');  head.style.transition = "all 2.5s";  document.body.style.transition = "all 2.5s";  let i = 0;  let timerTime = 10000;  changeColor();     function changeColor(delay) {  myVar = setTimeout(change, delay);  }   function change() {  console.log("i:",i,"Color:", colors[i] );  // For Safari and similar browsers.  document.body.style.backgroundColor = colors[i  ];  // For heading  head.style.color = colors[colors.length - i];  var orientation = 'top'; // For now  // Body gradient /* just use linear-gradient which is supported pretty well re: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient() document.body.style.backgroundImage = '-webkit-linear-gradient('   orientation   ', '   colors[i]   ', '   colors[colors.length - i]   ')';  document.body.style.backgroundImage = '-moz-linear-gradient('   orientation   ', '   colors[i]   ', '   colors[colors.length - i]   ')';  document.body.style.backgroundImage = '-ms-linear-gradient('   orientation   ', '   colors[i]   ', '   colors[colors.length - i]   ')';  document.body.style.backgroundImage = '-o-linear-gradient('   orientation   ', '   colors[i]   ', '   colors[colors.length - i]   ')';  */  document.body.style.backgroundImage = 'linear-gradient('   orientation   ', '   colors[i]   ', '   colors[colors.length - i]   ')';  // if (head.style.color == document.body.style.backgroundColor)  // head.style.color = '#9C626A';  if (i == colors.length) i = 0;  changeColor(timerTime);  } } 

 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700amp;display=swap'); html {  height: 100%; }  body {  transition: "all 2.5s";  height: 100%;  margin: 0;  background-attachment: fixed;  -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;  background: #70bg32;  /* 70bg32 */  background-repeat: no-repeat;  /* commented out to the script does this  background: -webkit-linear-gradient( to left top, #B86B77, #E0BCBF);  background: -moz-linear-gradient( to left top, #B86B77, #E0BCBF);  background: -ms-linear-gradient( to left top, #B86B77, #E0BCBF);  background: -o-linear-gradient( to left top, #B86B77, #E0BCBF);  background: linear-gradient( to left top, #B86B77, #E0BCBF);  */ }  ubuntu_bold {  font-family: 'Ubuntu', sans-serif;  font-size: 50px;  color: #9C626A; } 

 lt;html lang="en" id="htmlMain"gt;  lt;headgt;  lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"gt;  lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"gt;lt;/scriptgt;  lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"gt;lt;/scriptgt;  lt;titlegt;Debjyoti Sikdarlt;/titlegt; lt;/headgt;  lt;body transition="all 2.5s"gt;  lt;divgt;  lt;p style="text-align:center;"gt;  lt;ubuntu_bold id="header"gt;Debjyoti Sikdarlt;/ubuntu_boldgt;  lt;/pgt;  lt;/divgt; lt;/bodygt;  lt;/htmlgt;