Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.06.2022, 23:11
Аспирант
Отправить личное сообщение для najrobi Посмотреть профиль Найти все сообщения от najrobi
 
Регистрация: 15.07.2012
Сообщений: 36

Замена цифр на картинки
Приветствую!
Из new Date() выделил часы, минуты и секунды. После некоторых манипуляций вывожу данные:
document.getElementById("CountdownM").innerHTML = hoursM + ":" + minutesM + ":" + secondsM;


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

Заранее благодарю!
Ответить с цитированием
  #2 (permalink)  
Старый 27.06.2022, 23:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,192

najrobi,

document.getElementById("CountdownM").innerHTML = `<img src="img/${hoursM}.jpg" alt="">:<img src="img/${minutesM}.jpg" alt="">:<img src="img/${secondsM}.jpg" alt="">`;
Ответить с цитированием
  #3 (permalink)  
Старый 28.06.2022, 09:38
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,765

Вот так правильнее
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);
Ответить с цитированием
  #4 (permalink)  
Старый 28.06.2022, 21:45
Аспирант
Отправить личное сообщение для najrobi Посмотреть профиль Найти все сообщения от najrobi
 
Регистрация: 15.07.2012
Сообщений: 36

Большое спасибо за ответы. К сожалению, не получается. Думаю, что напутал что-то с синтаксисом.
Приведу более подробный кусок кода:
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,192

часы с картинками
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>

Последний раз редактировалось рони, 28.06.2022 в 22:53.
Ответить с цитированием
  #6 (permalink)  
Старый 28.06.2022, 23:32
Аспирант
Отправить личное сообщение для najrobi Посмотреть профиль Найти все сообщения от najrobi
 
Регистрация: 15.07.2012
Сообщений: 36

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

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

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


Т.е. функции должны остаться прежними, меняется только визуальный вывод данных.
Ответить с цитированием
  #7 (permalink)  
Старый 28.06.2022, 23:46
Аспирант
Отправить личное сообщение для najrobi Посмотреть профиль Найти все сообщения от najrobi
 
Регистрация: 15.07.2012
Сообщений: 36

Сообщение от рони Посмотреть сообщение
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,192

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

Последний раз редактировалось рони, 28.06.2022 в 23:56.
Ответить с цитированием
  #9 (permalink)  
Старый 29.06.2022, 00:03
Аспирант
Отправить личное сообщение для najrobi Посмотреть профиль Найти все сообщения от najrobi
 
Регистрация: 15.07.2012
Сообщений: 36

рони, спасибо!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
замена картинки при наведении курсора на область sasha1427 Элементы интерфейса 22 28.04.2017 08:22
Замена запятой на точки для проверки цифр с дробью Telnet Общие вопросы Javascript 7 22.07.2013 10:33
замена src картинки Vic2581 Общие вопросы Javascript 7 07.12.2012 11:49
[GreaseMonkey] Замена картинки на локальный ресурс VitAl2013 Firefox/Mozilla 6 13.04.2012 15:50
Замена ссылок на картинки самими картинками shipitko Общие вопросы Javascript 3 23.07.2010 18:49