Форум

najrobi · #1 (**permalink**) 27.06.2022, 23:11

Приветствую!
Из new Date() выделил часы, минуты и секунды. После некоторых манипуляций вывожу данные:

document.getElementById("CountdownM").innerHTML = hoursM + ":" + minutesM + ":" + secondsM;

Код:

<p id="CountdownM"></p>

Необходимо заменить цифры на картинки только в этом фрагменте, не затрагивая остальные части скрипта. Картинки с цифрами от "0" до "9" находятся в папке "img".

Заранее благодарю!

рони · #2 (**permalink**) 27.06.2022, 23:56

najrobi,

document.getElementById("CountdownM").innerHTML = `<img src="img/${hoursM}.jpg" alt="">:<img src="img/${minutesM}.jpg" alt="">:<img src="img/${secondsM}.jpg" alt="">`;

voraa · #3 (**permalink**) 28.06.2022, 09:38

Вот так правильнее

const sToImg = (s) => {
    return (s.length<2? `<img src="img/0.jpg" alt="0">`: `<img src="img/${s[0]}.jpg" alt="${s[0]}">`) + `<img src="img/${s[s.length-1]}.jpg" alt="${s[s.length-1]}">`;
}

const [sh, sm, ss] = document.getElementById("CountdownM").innerHTML.split(':');

document.getElementById("CountdownM").innerHTML = sToImg(sh) + ':' + sToImg(sm)+ ':' + sToImg(ss);

najrobi · #4 (**permalink**) 28.06.2022, 21:45

Большое спасибо за ответы. К сожалению, не получается. Думаю, что напутал что-то с синтаксисом.
Приведу более подробный кусок кода:

var x = setInterval(function() {
// Clock
subbed = new Date();
hoursM = subbed.getHours().toString().length < 2 ? '0' + subbed.getHours() : subbed.getHours();
minutesM  = subbed.getMinutes().toString().length < 2 ? '0' + subbed.getMinutes() : subbed.getMinutes();
secondsM = subbed.getSeconds().toString().length < 2 ? '0' + subbed.getSeconds() : subbed.getSeconds();
document.getElementById("CountdownM").innerHTML = hoursM + ":" + minutesM + ":" + secondsM;
}, 1000);

<p id="CountdownM"></p>

Заранее благодарен.

рони · #5 (**permalink**) 28.06.2022, 22:43

najrobi,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #CountdownM img{
      transform: translateY(22px);
  }

  </style>
</head>

<body>
<p id="CountdownM"></p>

<script>
  const timeEveryOneSecond = () => {
	let data = new Date(),
	time = new Intl.DateTimeFormat("ru", {
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit"
    }).format(data);
    time = time.replace(/\d/g, i => `<img src="https://dummyimage.com/40x50/fff/000/&text= ${i}">`);// src="img/${i}.jpg"
    document.getElementById("CountdownM").innerHTML = time;
		setTimeout(timeEveryOneSecond, 1000);
}
timeEveryOneSecond();

</script>
</body>
</html>

najrobi · #6 (**permalink**) 28.06.2022, 23:32

рони, большое спасибо!

Дело в том, что есть ещё скрипты, использующие данные часов по различным сценариям. Поэтому часы, минуты и секунды необходимо использовать в качестве отдельных переменных. Есть ли какой-нибудь способ поменять цифры на картинки только при выводе, как показано в коде для цифр?

document.getElementById("CountdownM").innerHTML = hoursM + ":" + minutesM + ":" + secondsM;

Т.е. функции должны остаться прежними, меняется только визуальный вывод данных.

najrobi · #7 (**permalink**) 28.06.2022, 23:46

Сообщение от рони

najrobi,

document.getElementById("CountdownM").innerHTML = `<img src="img/${hoursM}.jpg" alt="">:<img src="img/${minutesM}.jpg" alt="">:<img src="img/${secondsM}.jpg" alt="">`;

Вот этот вариант подошёл бы идеально, но он у меня почему-то не работает.

рони · #8 (**permalink**) 28.06.2022, 23:53

najrobi,
...!!!

document.getElementById("CountdownM").innerHTML = [hoursM, minutesM, secondsM].map(time => time.toString().replace(/\d/g, i => `<img src="img/${i}.jpg">`)).join(':');

najrobi · #9 (**permalink**) 29.06.2022, 00:03

рони, спасибо!!!

Форум

Справочник

Discord чат

Курсы javascript