Всем Hi. Ребят помгите стилизовать таймер JS

ErgoProxy1637, извини за путаницу. Я заметил ошибку в коде. Функция `updateClock()` должна быть объявлена внутри функции `initializeClock()`, а не вне ее.

Вот исправленный код:

var deadline = 'December 31 2023 23:59:59 GMT+02:00';

function getTimeRemaining(endtime) {
let t = Date.parse(endtime) - Date.parse(new Date());
let seconds = Math.floor((t / 1000) % 60);
let minutes = Math.floor((t / 1000 / 60) % 60);
let hours = Math.floor((t / (1000 * 60 * 60)) % 24);
let days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}

function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');

function updateClock() {
var t = getTimeRemaining(endtime);

daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

// Изменение стилей дочерних элементов
daysSpan.style.backgroundColor = 'white';
daysSpan.style.padding = '10px';
daysSpan.style.fontSize = '16px';

hoursSpan.style.backgroundColor = 'white';
hoursSpan.style.padding = '10px';
hoursSpan.style.fontSize = '16px';

minutesSpan.style.backgroundColor = 'white';
minutesSpan.style.padding = '10px';
minutesSpan.style.fontSize = '16px';

secondsSpan.style.backgroundColor = 'white';
secondsSpan.style.padding = '10px';
secondsSpan.style.fontSize = '16px';

if (t.total <= 0) {
clearInterval(timeinterval);
}
}

updateClock(); // запустите функцию один раз, чтобы избежать задержки
var timeinterval = setInterval(updateClock, 1000);
}

initializeClock('clockdiv', deadline);

JavaScript

var deadline = 'December 31 2023 23:59:59 GMT+02:00';



function getTimeRemaining(endtime) {

  let t = Date.parse(endtime) - Date.parse(new Date());

  let seconds = Math.floor((t / 1000) % 60);

  let minutes = Math.floor((t / 1000 / 60) % 60);

  let hours = Math.floor((t / (1000 * 60 * 60)) % 24);

  let days = Math.floor(t / (1000 * 60 * 60 * 24));

  return {

    'total': t,

    'days': days,

    'hours': hours,

    'minutes': minutes,

    'seconds': seconds

  };

}



function initializeClock(id, endtime) {

  var clock = document.getElementById(id);

  var daysSpan = clock.querySelector('.days');

  var hoursSpan = clock.querySelector('.hours');

  var minutesSpan = clock.querySelector('.minutes');

  var secondsSpan = clock.querySelector('.seconds');



  function updateClock() {

    var t = getTimeRemaining(endtime);



    daysSpan.innerHTML = t.days;

    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);

    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);

    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);



    // Изменение стилей дочерних элементов

    daysSpan.style.backgroundColor = 'white';

    daysSpan.style.padding = '10px';

    daysSpan.style.fontSize = '16px';



    hoursSpan.style.backgroundColor = 'white';

    hoursSpan.style.padding = '10px';

    hoursSpan.style.fontSize = '16px';



    minutesSpan.style.backgroundColor = 'white';

    minutesSpan.style.padding = '10px';

    minutesSpan.style.fontSize = '16px';



    secondsSpan.style.backgroundColor = 'white';

    secondsSpan.style.padding = '10px';

    secondsSpan.style.fontSize = '16px';



    if (t.total <= 0) {

      clearInterval(timeinterval);

    }

  }



  updateClock(); // запустите функцию один раз, чтобы избежать задержки

  var timeinterval = setInterval(updateClock, 1000);

}



initializeClock('clockdiv', deadline);

Попробуй использовать этот исправленный код. Он должен работать и применять стили к дочерним элементам блока с классом "steel". Если у тебя все еще возникнут проблемы, пожалуйста, дай мне знать.

ChatGPT, Спасибо это помогло, но возникла другая проблема. Через JS не возможно работать со всеми стилями. Можно сделать, что-нибудь, чтобы я мог менять стили элементов из CSS файла?

ErgoProxy1637, да, конечно, можно изменять стили элементов из CSS файла с помощью JavaScript. Для этого тебе понадобится использовать классы CSS.

Вот как это можно сделать:

1. В CSS файле создай классы, которые будут содержать нужные стили. Например:

.white-background {
background-color: white;
}

.large-padding {
padding: 10px;
}

.large-font-size {
font-size: 16px;
}

CSS

.white-background {

  background-color: white;

}



.large-padding {

  padding: 10px;

}



.large-font-size {

  font-size: 16px;

}

2. В JavaScript коде, в функции `updateClock()`, добавь и удаляй классы для дочерних элементов в зависимости от условий. Например:

function updateClock() {
var t = getTimeRemaining(endtime);

daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

// Добавление и удаление классов для изменения стилей
if (условие) {
daysSpan.classList.add('white-background');
daysSpan.classList.add('large-padding');
daysSpan.classList.add('large-font-size');
} else {
daysSpan.classList.remove('white-background');
daysSpan.classList.remove('large-padding');
daysSpan.classList.remove('large-font-size');
}

// Повтори этот шаблон для остальных дочерних элементов

if (t.total <= 0) {
clearInterval(timeinterval);
}
}

JavaScript

function updateClock() {

  var t = getTimeRemaining(endtime);



  daysSpan.innerHTML = t.days;

  hoursSpan.innerHTML = ('0' + t.hours).slice(-2);

  minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);

  secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);



  // Добавление и удаление классов для изменения стилей

  if (условие) {

    daysSpan.classList.add('white-background');

    daysSpan.classList.add('large-padding');

    daysSpan.classList.add('large-font-size');

  } else {

    daysSpan.classList.remove('white-background');

    daysSpan.classList.remove('large-padding');

    daysSpan.classList.remove('large-font-size');

  }



  // Повтори этот шаблон для остальных дочерних элементов



  if (t.total <= 0) {

    clearInterval(timeinterval);

  }

}

Таким образом, ты можешь добавлять и удалять классы для дочерних элементов, чтобы применять нужные стили из CSS файла. Просто добавь классы, которые тебе нужны, и изменяй их состояние в зависимости от условий.

Надеюсь, это поможет! Если у тебя возникнут еще вопросы, не стесняйся спрашивать.

hydrotical, скинул ему

Lanoriya, Чел, я тебя же по-человечески спросил зачем ты сделал это -

ErgoProxy1637, а звонки зачем тебе

Falcon_Extra, мне то не зачем, это вопрос к вот этой особе Lanoriya

ErgoProxy1637, я то читаю, а ты да не знаешь как анимировать

ErgoProxy1637, качено ты же используешь только chatGPT

Falcon_Extra, Бля чел, если бы такая задача была в проекте то я бы это сделал, так что давай ты умничать не будешь окей?