Как изменить цвет текста после X секунд?

это мой код:

 14:00 
14:30
15:00
........

Как я могу изменить цвет (красным) каждого отдельного текста через какое-то время?

Я пробовал этот код, но, очевидно, он не работает ( onLoad предназначен только для тегов body / img):

  14:00 

Какие-либо предложения?

Решение принято (спасибо minitech):

  @keyframes change { from { color: green } to { color: red } }   14:30   15:00  ............. 

Вы можете использовать анимацию CSS для этого:

 font { animation: change 3s step-end both; } @keyframes change { from { color: green } to { color: red } } 

Демо-версия: http://jsfiddle.net/simevidas/7ZrtQ/

В приведенном выше коде задержка определяется 3s которая составляет 3 секунды.

Btw, если вы не хотите, чтобы таймер выполнялся при загрузке страницы, но вместо этого хотите, чтобы это вызвало какое-то последующее событие (например, щелчок пользователя), вы можете определить анимацию в classе CSS, а затем просто добавить, что class к элементу позже с JavaScript, чтобы вызвать эффект.

Демо-версия: http://jsfiddle.net/simevidas/7ZrtQ/3/

введите описание изображения здесь

Что-то вроде этого:

 setTimeout(function(){ document.getElementsByTagName("p")[0].style.color = "#cccccc"; },3000); 

Поскольку getElementsByTagName возвращает массив элементов

, мы хотим выбрать первый, с [0] , потому что количество массивов начинается с 0.

Возможно, вам нужно изменить часть getElementsByTagName на . Кроме того, есть getElementById .

getElementsByClassName

Кроме того, если вы хотите настроить таргетинг на каждый элемент с тем же classом, вы можете сделать следующее:

 function targetGroup(className){ // loop throgh the elements var elemArray = document.getElementsByClassName(className); for(var i = 0; i < elemArray.length; i++){ elemArray[i].style.color = "#ffff00"; } } setTimeout(function(){ targetGroup('foo'); // this is the class name you are targetting. },2000); 

И ваш HTML будет выглядеть так:

 bar bar bar bar bar bar 

Код, измененный в примере на этой странице: http://www.developphp.com/view_lesson.php?v=881

Я предлагаю не использовать тег font , вместо этого использовать тег span . Вот пример работы в JSFiddle .

HTML

 text 

JavaScript

 var text = document.getElementById('text'); text.addEventListener("load", init(), false); function changeColor() { text.style.color = "#F00"; } function init() { setTimeout(changeColor, 3000); } 

Вот краткое описание каждой функции JavaScript, которую я использовал в коде.

getElementById

Возвращает ссылку на элемент DOM по его ID .
Для получения дополнительной информации об этой функции вы можете обратиться сюда
Для альтернативных функций проверьте этот URL-адрес

В моем примере я передал 'text' , который является ID моего тега SPAN .

addEventListener

Регистрирует указанный listener на EventTarget , который может быть любым объектом, поддерживающим events .
Для получения дополнительной информации об этой функции вы можете обратиться сюда

В моем примере я зарегистрировал init() listener text объекта, который будет вызываться при событии load .

SetTimeout

Вызывает функцию или выполняет fragment кода после указанной задержки.
Для получения дополнительной информации об этой функции вы можете обратиться сюда

В моем примере я передал changeColor() в качестве аргумента, поэтому он будет вызываться после 3-секундной задержки ( Примечание: задержка составляет миллисекунды ).

Итак, вот окончательный процесс:

  1. Элемент загружен
  2. init() функция init()
  3. Вызывается функция setTimeout ()
  4. Функция changeColor () была вызвана через 3 секунды
  5. Цвет элемента был изменен