Замена цифр на картинки
Приветствую!
Из new Date() выделил часы, минуты и секунды. После некоторых манипуляций вывожу данные:
document.getElementById("CountdownM").innerHTML = hoursM + ":" + minutesM + ":" + secondsM;
Код:
<p id="CountdownM"></p>Заранее благодарю! |
najrobi,
:-?
document.getElementById("CountdownM").innerHTML = `<img src="img/${hoursM}.jpg" alt="">:<img src="img/${minutesM}.jpg" alt="">:<img src="img/${secondsM}.jpg" alt="">`;
|
Вот так правильнее
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);
|
Большое спасибо за ответы. К сожалению, не получается. Думаю, что напутал что-то с синтаксисом.
Приведу более подробный кусок кода:
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> Заранее благодарен. |
часы с картинками
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>
|
рони, большое спасибо!
Дело в том, что есть ещё скрипты, использующие данные часов по различным сценариям. Поэтому часы, минуты и секунды необходимо использовать в качестве отдельных переменных. Есть ли какой-нибудь способ поменять цифры на картинки только при выводе, как показано в коде для цифр?
document.getElementById("CountdownM").innerHTML = hoursM + ":" + minutesM + ":" + secondsM;
Т.е. функции должны остаться прежними, меняется только визуальный вывод данных. |
Цитата:
|
najrobi,
...!!!
document.getElementById("CountdownM").innerHTML = [hoursM, minutesM, secondsM].map(time => time.toString().replace(/\d/g, i => `<img src="img/${i}.jpg">`)).join(':');
|
рони, спасибо!!!
|
| Часовой пояс GMT +3, время: 23:33. |