#css
#CSS
Вопрос:
Я хочу создать строку в JavaScript, в которой указано текущее время, но я хочу, чтобы часы, минуты и секунды были явно разделены двоеточием. Части должны быть другого цвета, чем числа, созданные с помощью JavaScript.
Следуя базе, с которой я хочу работать.
JS
var currentTime = document.getElementById('time'); function setTime() { var date = new Date(); var s = date.getSeconds(); var m = date.getMinutes(); var h = date.getHours(); if (s lt; 10) { s = '0' s; } if (m lt; 10) { m = '0' m; } if (h lt; 10) { h = '0' h; } currentTime.textContent = h ':' m ':' s; } setInterval(setTime, 100); HTML
lt;h1 id="time"gt;lt;/h1gt; CSS
#time { margin-top: 7rem; margin-bottom: 1rem; font-size: 3.2rem; color: #60D291; } Ответ №1:
Вы можете попробовать это :
var currentTime = document.getElementById("time"); var span = document.getElementsByTagName("span"); function setTime() { var date = new Date(); var s = date.getSeconds(); var m = date.getMinutes(); var h = date.getHours(); if (s lt; 10) s = "0" s; if (m lt; 10) m = "0" m; if (h lt; 10) h = "0" h; span[0].textContent = h; span[1].textContent = " : " m; span[2].textContent = " : " s; span[0].style.color = "red"; span[1].style.color = "green"; span[2].style.color = "blue"; } setInterval(setTime, 100); #time { margin: 1rem; margin-top: 7rem; font-size: 3.2rem; color: #60D291; } lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt; lt;meta charset="utf-8"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1"gt; lt;style type="text/css"gt; #time { margin: 1rem; margin-top: 7rem; font-size: 3.2rem; color: #60D291; } lt;/stylegt; lt;/headgt; lt;bodygt; lt;h1 id="time"gt; lt;spangt;lt;/spangt;lt;spangt;lt;/spangt;lt;spangt;lt;/spangt; lt;/h1gt; lt;/bodygt; lt;/htmlgt; Комментарии:
1. лучше использовать класс или идентификатор в каждой части промежутка времени вместо промежутка[n], вы можете использовать lt;класс промежутка=»час»gt; и отдельный css для каждого класса или идентификатора
Ответ №2:
Вы также можете разделить каждую единицу на промежутки, чтобы стиль оставался в CSS.
let hour = document.getElementById('hour'); let min = document.getElementById('min'); let sec = document.getElementById('sec'); function setTime() { const date = new Date(); const s = date.getSeconds().toLocaleString('en-US', { minimumIntegerDigits: 2 }); const m = date.getMinutes().toLocaleString('en-US', { minimumIntegerDigits: 2 }); const h = date.getHours().toLocaleString('en-US', { minimumIntegerDigits: 2 }); hour.textContent = h ' :'; min.textContent= m ' :'; sec.textContent = s; } setInterval(setTime, 100); #time { margin: 1rem; font-size: 3.2rem; } #hour { color: red; } #min { color: green; } #sec { color: blue; } lt;h1 id="time"gt; lt;span id="hour"gt;lt;/spangt; lt;span id="min"gt;lt;/spangt; lt;span id="sec"gt;lt;/spangt; lt;/h1gt;