Можно ли как-нибудь сделать на html сайте бегущую строку, которая будет показывать время и дату?
-
Можно, но для времени и даты, уже понадобиться + JavaScript. Добавь свои наработки в вопрос.– user262779Commented 7 апр. 2019 в 7:30
-
если Вам помог ответ и он является решением Вашего вопроса, отметьте его как решение, если же нет, то напишите больше подробностей для получения более качественного ответа.– AlexCommented 8 апр. 2019 в 6:16
Добавить комментарий
|
3 ответа
Без javascript дату и время получить и отображать нельзя. Пример ниже использует javascript для вывода даты и времени:
const ar_month = ["января", "февраля", "марта", "апреля", "мая", "июня", "июля", "августа", "сентября", "октября", "ноября", "декабря"];
setInterval(function() {
Data = new Date();
Year = Data.getFullYear();
Month = Data.getMonth();
Day = Data.getDate();
Hour = Data.getHours();
Minutes = Data.getMinutes();
Seconds = Data.getSeconds();
let datetime = "Сегодня " + Day + " " + ar_month[Month] + " " + Year + " года " + Hour + ":" + Minutes + ":" + Seconds;
document.querySelector(".marquee-datetime").textContent = datetime;
}, 1000);
@keyframes scroll {
0% {
transform: translate(100%, 0);
}
100% {
transform: translate(-300px, 0)
}
}
.marquee {
width: 100%;
overflow: hidden;
}
.marquee p {
animation: scroll 10s infinite linear;
}
<div class="marquee">
<p class="marquee-datetime"></p>
</div>
-
1Если ТС знает только HTML/CSS, то этот ответ ему особо понимания не добавит (хотя добавит хотябы в том компоненте, что надо учить JS :))) ), но все равно спасибо за ответ, плюс заслуженно твой.– user262779Commented 7 апр. 2019 в 8:18
-
2@L.F.C. thx) я думаю, что если у ТС будет желание, он разберется. В любом случае последующие аналогичные вопросы уже можно будет закрывать как дубликаты. P.S.: а вообще, в данном вопросе, правильный ответ "нельзя" ))– AlexCommented 7 апр. 2019 в 9:29
-
-
SVG вариант, для построения пути использовал вот это, сама дата форматируется new Date().toLocaleString();
let pad = 150;
let speed = 0.1
let text = document.querySelector('textPath');
let len = document.querySelector('#path').getTotalLength();
requestAnimationFrame(upd);
let t = 0, v = 0;
function upd(dt) {
t = dt - t;
text.textContent = new Date().toLocaleString();
text.setAttribute('startOffset', (v += t*speed)%(len+pad)-pad);
t = dt;
requestAnimationFrame(upd);
}
<svg viewBox="0 0 660 199">
<text font-size="25px">
<textPath href="#path"></textPath>
</text>
<path id="path" fill="none" d="M26,110C26,110,20.55,41.405,42,26C63.45,10.595000000000002,97.58500000000001,32.56,136,31C174.415,29.44,200.78,18.195,239,18C277.22,17.805,293,30.39,332,30C371,29.61,399.805,16.195,439,16C478.195,15.805,497.12,28.415,533,29C568.88,29.585,601.94,2.620000000000001,623,19C644.06,35.379999999999995,641,113,641,113"></path></svg>
PS: не разобрался как сделать через тег <animate>
, посчитал startOffset
сам
-
<animate>
поддерживается не всеми браузерами, поэтому с ним ответ был бы немного хуже– AlexCommented 8 апр. 2019 в 11:55
Если нужен нуль перед минутами, если минут меньше 10 (22:9 например, а нужно 22:09). Можете добавить условие:
if(Minutes <= 9){
Minutes = '0' + Minutes;
}