текущее время с анимацией [Архив форума]

рони

15.12.2019, 23:07

Besprizornik,
:-?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
<script>
$(function() {
var clock = $('.your-clock').FlipClock({
clockFace: 'TwentyFourHourClock'
})
});
</script>
</head>
<body>
<div class="your-clock"></div>
</body>
</html>

Besprizornik

16.12.2019, 17:52

Besprizornik,
звучит как можно ли масло сделать масляным?
не могли бы уточнить проблему.

рони, вопрос в том возможно ли числа показывающее часы минуты и секунды разделить на отдельные цифры, что-то типа

(onload=function(){
var n, m;
n=59;
m=(n+"").match(/\d{1}/g);

рони

16.12.2019, 19:08

Besprizornik,
не понимаю.

Besprizornik

16.12.2019, 19:27

рони,
возможно ли сделать чтобы каждая цифра из двухзначного числа была в отдельном div'е?

рони

16.12.2019, 19:41

Besprizornik,
а сейчас каждая цифра в отдельном li, что не устраивает?

Besprizornik

16.12.2019, 19:42

и потом применить подобную анимацию, только чуть другой эффект
position: absolute; top: -100%; opacity: 0.2

position: absolute; top: 0%; opacity: 1.0;

position: absolute; 100%; opacity: 0.2;

Besprizornik

16.12.2019, 19:45

рони,
я имел ввиду простые часы с использованием методов объекта дата без внешних скриптов

Besprizornik

16.12.2019, 19:58

рони,
например в твоём скрипте

<style>
span.U_003A { color: #9c9c9c; }
#clock.x span.U_003A { color: #333399; }
</style>
<span id="clock"></span>
<script type="text/javascript">
function clock() {
var date = new Date();
var hour=date.getHours();
var minute=date.getMinutes();
var sec=date.getSeconds();
var day=date.getDate();
var month=date.getMonth();
var year=date.getFullYear();
var weekday=date.getDay();
var monthes=new Array ("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря");
var dayNames = new Array("Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота");
document.getElementById("clock").innerHTML = (hour<10?"0":"")+hour+" <span class='U_003A'>:</span> "+(minute<10?"0":"")+minute+" <span class='U_003A'>:</span> "+(sec<10?"0":"")+sec+"<br/>"+dayNames[weekday]+"<br/>"+(day<10?"0":"")+day+" "+monthes[month]+" "+year+" г.";
document.getElementById("clock").classList.toggle("x");
window.setTimeout("clock()",500);
}
clock();
</script>

рони

16.12.2019, 20:10

Besprizornik,
http://lexxus.github.io/jq-timeTo/

рони

16.12.2019, 20:56

без внешних скриптовhttps://codepen.io/virgilpana/pen/aObdPv

https://codepen.io/dervondenbergen/pen/dVPOwB

https://codepen.io/Alca/pen/BZbPrE

Besprizornik

16.12.2019, 20:58

рони,
именно то что нужно, возможно это совместить с твоим скриптом?

рони

16.12.2019, 21:34

Besprizornik,
:-?

Блондинка

17.12.2019, 14:16

рони,
а не подскажешь как вывести текущее время, как в третьем посте только с использованием http://lexxus.github.io/jq-timeTo/?

рони

17.12.2019, 14:32

Блондинка,
theme: "black" можно убрать.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/time-to@1.2.3/timeTo.css">
<script src="https://cdn.jsdelivr.net/npm/time-to@1.2.3/jquery.time-to.js"></script>
<script>
$(function() {
var clock = $('.your-clock').timeTo({theme: "black"})
});
</script>
</head>
<body>
<div class="your-clock"></div>
</body>
</html>

Блондинка

17.12.2019, 17:25

Rise,
я хочу тут (https://javascript.ru/forum/misc/78232-segodnyashnyaya-data-i-vremya.html) заменить див с часами

Блондинка

18.12.2019, 20:42

<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cactus.lark.ru/css/TimeTo.css">
<script src="http://cactus.lark.ru/js/TimeTo.js"></script>
<script>
$(function() {
var clock = $('.your-clock').timeTo({theme: "black"})
});
</script>
</head>
<body>
<div class="your-clock"></div>
</body>
</html>

возможно ли в этом скрипте добавить функцию, и сделать разделитель ':' мигающим?

Блондинка,
var spans = [].slice.call(document.querySelectorAll('.colon'), 0);
var colons =["hsl(0, 0%, 54%)", "hsl(0, 0%, 48%)", "hsl(0, 0%, 42%)", "hsl(0, 0%, 36%)", "hsl(0, 0%, 30%)", "hsl(0, 0%, 24%)", "hsl(0, 0%, 18%)", "hsl(0, 0%, 12%)", "hsl(0, 0%, 6%)", "hsl(0, 0%, 0%)"];
step = 0;
(function color()
{
spans.forEach(function(elem) {
elem.style.color = colons[step];
});
step = ++step % colons.length;
window.setTimeout(color, 100);
})()

рони

18.12.2019, 21:37

сделать разделитель ':' мигающим
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/time-to@1.2.3/timeTo.css">
<script src="https://cdn.jsdelivr.net/npm/time-to@1.2.3/jquery.time-to.js"></script>
<style type="text/css">
div.your-clock > span:nth-child(6), div.your-clock > span:nth-child(3) {
animation: color 1s ease-in-out infinite;
}
@keyframes color {
50% {
color: #FFFFFF;
}
}
</style>
<script>
$(function() {
var clock = $('.your-clock').timeTo({theme: "black"})
});
</script>
</head>
<body>
<div class="your-clock"></div>
</body>
</html>

Блондинка

19.12.2019, 01:48

рони,
а зачем использовать nth-child? если можно сразу обратится к span class="colon", смотри запускаемый пример в 19 посте, пока установила синий цвет, вопрос как на js сделать?

рони

19.12.2019, 09:53

а зачем использовать nth-child? если можно сразу обратится к span class="colon", смотри запускаемый пример в 19 посте, пока установила синий цвет, вопрос как на js сделать?

:-? мне сложно понять что вы пишите.а зачем использовать nth-child?
а что нужно использовать если нет класса?
а зачем использовать nth-child? если можно сразу обратится к span class="colon"
причём тут class="colon"

вопрос как на js сделать?

как у вас написано так и сделать, только класс заменить на nth-child
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/time-to@1.2.3/timeTo.css">
<script src="https://cdn.jsdelivr.net/npm/time-to@1.2.3/jquery.time-to.js"></script>

<script>
$(function() {
var clock = $('.your-clock').timeTo({theme: "black"});
var spans = [].slice.call(document.querySelectorAll('div.your-clock > span:nth-child(6), div.your-clock > span:nth-child(3)'), 0);
var colons =["hsl(0, 0%, 54%)", "hsl(0, 0%, 48%)", "hsl(0, 0%, 42%)", "hsl(0, 0%, 36%)", "hsl(0, 0%, 30%)", "hsl(0, 0%, 24%)", "hsl(0, 0%, 18%)", "hsl(0, 0%, 12%)", "hsl(0, 0%, 6%)", "hsl(0, 0%, 0%)"];
step = 0;
(function color()
{
spans.forEach(function(elem) {
elem.style.color = colons[step];
});
step = ++step % colons.length;
window.setTimeout(color, 100);
})()

});
</script>
</head>
<body>
<div class="your-clock"></div>
</body>
</html>

Блондинка

19.12.2019, 10:13

рони,
ВСЁ СУПЕР, сейчас у меня будут действительно крутые часы...

в 19 посте в запускаемом примере, я просто скопировала код скрипта TimeTo, добавила класс и разместила на своём так называемом 'сайте'...

Besprizornik

21.12.2019, 02:07

рони,
я хотел спросить, получится ли в скрипте из 10 поста, числа часов минут секунд разделить на отдельные цифры, и каждую цифру поместить в отдельный див? без всяких анимаций и дополнительных скриптов?

рони

21.12.2019, 09:32

Besprizornik,
что мешает добавить теги div в код.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">

</head>
<body>
<style>
span.U_003A { color: #9c9c9c; }
#clock.x span.U_003A { color: #333399; }
#clock .timer{
display: flex;
}
#clock .timer div:nth-child(4){
background-color: #228B22;
color: #FFFFFF;
}
#clock .timer div:nth-child(7){
background-color: #FF00FF;
color: #FFFF00;
}
#clock .timer div{
border: 1px solid #0000FF
}

</style>
<span id="clock"></span>
<script type="text/javascript">
function clock() {
var date = new Date();
var hour=date.getHours();
var minute=date.getMinutes();
var sec=date.getSeconds();
var day=date.getDate();
var month=date.getMonth();
var year=date.getFullYear();
var weekday=date.getDay();
var monthes=new Array ("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря");
var dayNames = new Array("Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота");
function numberWrapInDiv(num)
{
return [...num.toString().padStart(2, "0")].map(num => `<div>${num}</div>`).join("")
}
[hour, minute, sec] = [hour, minute, sec].map(numberWrapInDiv)

document.getElementById("clock").innerHTML = "<div class='timer'>"+hour+" <span class='U_003A'>:</span> "+minute+" <span class='U_003A'>:</span> "+sec+"</div>"+dayNames[weekday]+"<br/>"+(day<10?"0":"")+day+" "+monthes[month]+" "+year+" г.";
document.getElementById("clock").classList.toggle("x");
window.setTimeout("clock()",500);
}
clock();
</script>
</body>
</html>

Besprizornik

26.12.2019, 17:27

Эх, если бы этот скрипт

<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
span.U_003A { color: #9c9c9c; }
#clock.x span.U_003A { color: #333399; }
#clock .timer{
display: flex;
}
#clock .timer div:nth-child(4){
background-color: #228B22;
color: #FFFFFF;
}
#clock .timer div:nth-child(7){
background-color: #FF00FF;
color: #FFFF00;
}
#clock .timer div{
border: 1px solid #0000FF;
display: inline-block;
width: 16px;
text-align: center;
margin: 0 1.5px;
}
</style>
<span id="clock"></span>
<script type="text/javascript">
function clock() {
var date = new Date();
var hour=date.getHours();
var minute=date.getMinutes();
var sec=date.getSeconds();
var day=date.getDate();
var month=date.getMonth();
var year=date.getFullYear();
var weekday=date.getDay();
var monthes=new Array ("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря");
var dayNames = new Array("Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота");
function numberWrapInDiv(num)
{
return [...num.toString().padStart(2, "0")].map(num => `<div>${num}</div>`).join("")
}
[hour, minute, sec] = [hour, minute, sec].map(numberWrapInDiv)
document.getElementById("clock").innerHTML = "<div class='timer'>"+hour+" <span class='U_003A'>:</span> "+minute+" <span class='U_003A'>:</span> "+sec+"</div>"+dayNames[weekday]+"<br/>"+(day<10?"0":"")+day+" "+monthes[month]+" "+year+" г.";
document.getElementById("clock").classList.toggle("x");
window.setTimeout("clock()",500);
}
clock();
</script>
</body>
</html>

работал во всех браузерах, и в операх на андроид, а не только в хроме...

рони

26.12.2019, 18:11

Besprizornik,
https://closure-compiler.appspot.com/
вставить код скрипта, нажать Compile

Besprizornik

26.12.2019, 21:01

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<style>
#clock { overflow: hidden; }
#clock.x .U_003A { color: #333399; }
#clock .date { clear: left; }
#clock .U_003A {
color: #9c9c9c;
float: left;
}
#clock .timer .digit:nth-child(4) {
background-color: #228B22;
color: #FFFFFF;
}
#clock .timer .digit:nth-child(7) {
background-color: #FF00FF;
color: #FFFF00;
}
#clock .timer .digit {
border: 1px solid #0000FF;
float: left;
width: 16px;
text-align: center;
margin: 0 1.5px;
}
</style>
<span id="clock"></span>
<script>
function clock() {
setTimeout(clock, 500);
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var sec = date.getSeconds();
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var weekday = date.getDay();
var months = ["января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря"];
var dayNames = ["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"];
function numberWrapInDiv(num) {
num = String(num);
if(num.length === 1) num = "0" + num;
for (var i = 0, html = ""; i < num.length; i++) html += "<div class=\"digit\">" + num.charAt(i) + "</div>";
return html;
}
hour = numberWrapInDiv(hour), minute = numberWrapInDiv(minute), sec = numberWrapInDiv(sec);
document.getElementById("clock").innerHTML = "<div class='timer'>"+hour+" <div class='U_003A'>:</div> "+minute+" <div class='U_003A'>:</div> "+sec+"</div><div class='date'>"+dayNames[weekday]+"<br/>"+(day<10?"0":"")+day+" "+months[month]+" "+year+" г.</div>";
document.getElementById("clock").className.toggle("x");
}
clock();
</script>
</body>
</html>

блин, а сейчас элемент U_003A не мигает...

Malleys

26.12.2019, 21:50

блин, а сейчас элемент U_003A не мигает...
На строке №53 вместо className должно быть classList... В IE6 не мигает и не выделяется цвет, а остальное также...

Besprizornik

26.12.2019, 22:32

Malleys,
спасибо, всё работает :thanks:

Блондинка

06.08.2020, 04:14

<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
span.U_003A { color: #9c9c9c; }
#clock.x span.U_003A { color: #333399; }
#clock .timer{
display: flex;
}
#clock .timer div:nth-child(4){
background-color: #228B22;
color: #FFFFFF;
}
#clock .timer div:nth-child(7){
background-color: #FF00FF;
color: #FFFF00;
}
#clock .timer div{
border: 1px solid #0000FF;
display: inline-block;
width: 16px;
text-align: center;
margin: 0 1.5px;
}
</style>
<span id="clock"></span>
<script type="text/javascript">
function clock() {
var date = new Date();
var hour=date.getHours();
var minute=date.getMinutes();
var sec=date.getSeconds();
var day=date.getDate();
var month=date.getMonth();
var year=date.getFullYear();
var weekday=date.getDay();
var monthes=new Array ("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря");
var dayNames = new Array("Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота");
function numberWrapInDiv(num)
{
return [...num.toString().padStart(2, "0")].map(num => `<div>${num}</div>`).join("")
}
[hour, minute, sec] = [hour, minute, sec].map(numberWrapInDiv)
document.getElementById("clock").innerHTML = "<div class='timer'>"+hour+" <span class='U_003A'>:</span> "+minute+" <span class='U_003A'>:</span> "+sec+"</div>"+dayNames[weekday]+"<br/>"+(day<10?"0":"")+day+" "+monthes[month]+" "+year+" г.";
document.getElementById("clock").classList.toggle("x");
window.setTimeout("clock()",500);
}
clock();
</script>
</body>
</html>

Народ, как в этом скрипте удалить время и добавить дивы к числу и году? Тоесть число 06 должно быть в двух отдельных дивах(квадратиках) и год должен быть в 5ти отдельных дивах (квадратиках)
<div>2</div><div>0</div><div>2</div><div>0</div><div>г.</div>

Блондинка

06.08.2020, 04:29

И наверное нет смысла обновлять ежесекундно если на странице должно отображаться только день недели, число, месяц, год, кажется лучше определить время от загрузки страницы до конца суток, и обновить и потом раз в 24 часа по таймеру обновлять?

laimas

06.08.2020, 05:54

определить время от загрузки страницы до конца суток, и обновить и потом раз в 24 часа

То есть, есть уверенность стопроцентная, что кто-то будет сидеть по 24 часа и ждать обновления? А ничего, что время не будет ждать 24 часа, оно будет тикать, и фактически уже будет другой день, а ваш "календарь" все еще живет прошлым?

Блондинка

06.08.2020, 16:56

То есть, есть уверенность стопроцентная, что кто-то будет сидеть по 24 часа и ждать обновления? А ничего, что время не будет ждать 24 часа, оно будет тикать, и фактически уже будет другой день, а ваш "календарь" все еще живет прошлым?

Немножко не так, типа осталась открытой вкладка,и посетитель зашел через сутки-двое,в этом случае надо чтобы все компоненты даты соответсвовали сегодняшней, а время вроде тут не причём, так сказать два разных отдельных скрипта, время отдельно (часы, минуты, секунды) а один скрипт с ежесекундным обновлением это один скрипт, дата (день недели, число месяц год) с обновлением раз в сутки другой скрипт...

laimas

06.08.2020, 19:16

Ну это ведь речь не об обновлении, а установке текущей даты во время активации страницы, а не то, что в начале вы написали.
Ищите Page Visibility API, оно сообщит когда вкладка стала активна, о поддержке этого API и "эмуляции" его в браузерах без поддержки.

Блондинка

06.08.2020, 20:16

laimas,
пока вопрос как разделить число и год на квадратики...

laimas

06.08.2020, 20:44

пока вопрос как разделить число и год на квадратики...

Зачем, если у вас практически статические данные - Дата, а получать вы будете ее из объекта Date, получайте компоненты даты, разделяйте их на отдельные, и вставляйте вот что угодно. К чему вам код выше?

voraa

06.08.2020, 21:27

пока вопрос как разделить число и год на квадратики...

<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
span.U_003A { color: #9c9c9c; }
#clock.x span.U_003A { color: #333399; }
#clock .timer{
display: flex;
}
#clock .timer div:nth-child(4){
background-color: #228B22;
color: #FFFFFF;
}
#clock .timer div:nth-child(7){
background-color: #FF00FF;
color: #FFFF00;
}
#clock .timer div{
border: 1px solid #0000FF;
display: inline-block;
width: 16px;
text-align: center;
margin: 0 1.5px;
}
</style>
<span id="clock"></span>
<script type="text/javascript">
function clock() {
var date = new Date();
var hour=date.getHours();
var minute=date.getMinutes();
var sec=date.getSeconds();
var day=date.getDate();
var month=date.getMonth();
var year=date.getFullYear();
var weekday=date.getDay();
var monthes=new Array ("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря");
var dayNames = new Array("Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота");
function numberWrapInDiv(num)
{
return [...num.toString().padStart(2, "0")].map(num => `<div>${num}</div>`).join("")
}

[hour, minute, sec, day, year] = [hour, minute, sec, day, year].map(numberWrapInDiv)
document.getElementById("clock").innerHTML = "<div class='timer'>"+hour+" <span class='U_003A'>:</span> "+minute+" <span class='U_003A'>:</span> "+sec+"</div>"
+dayNames[weekday]+"<br/>"
+"<div class='timer'>"+day+" "+monthes[month]+" "+year+"<div>г.</div>"+"</div>";
document.getElementById("clock").classList.toggle("x");
window.setTimeout("clock()",500);
}
clock();
</script>
</body>
</html>

Блондинка

06.08.2020, 22:35

Блииин, достало это раритетное дерьмо, как обычно только белый экран...

Блондинка

07.08.2020, 21:14

<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
span.U_003A { color: #9c9c9c; }
#clock.x span.U_003A { color: #333399; }
#clock .timer{
display: flex;
}
#clock .timer div:nth-child(4){
background-color: #228B22;
color: #FFFFFF;
}
#clock .timer div:nth-child(7){
background-color: #FF00FF;
color: #FFFF00;
}
#clock .timer div{
border: 1px solid #0000FF;
display: inline-block;
width: 16px;
text-align: center;
margin: 0 1.5px;
}
</style>
<span id="clock"></span>
<script type="text/javascript">
function clock() {
var date = new Date();
var hour=date.getHours();
var minute=date.getMinutes();
var sec=date.getSeconds();
var day=date.getDate();
var month=date.getMonth();
var year=date.getFullYear();
var weekday=date.getDay();
var monthes=new Array ("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря");
var dayNames = new Array("Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота");
function numberWrapInDiv(num)
{
return [...num.toString().padStart(2, "0")].map(num => `<div>${num}</div>`).join("")
}

[hour, minute, sec, day, year] = [hour, minute, sec, day, year].map(numberWrapInDiv)
document.getElementById("clock").innerHTML = "<div class='timer'>"+hour+" <span class='U_003A'>:</span> "+minute+" <span class='U_003A'>:</span> "+sec+"</div>"
+dayNames[weekday]+"<br/>"
+"<div class='timer'>"+day+" "+monthes[month]+" "+year+"<div>г.</div>"+"</div>";
document.getElementById("clock").classList.toggle("x");
window.setTimeout("clock()",500);
}
clock();
</script>
</body>
</html>

На экране андроид 4, 15 года скрипт не работает, белый экран...

voraa

08.08.2020, 22:30

На экране андроид 4, 15 года скрипт не работает, белый экран...
Наверно дело не в Андроиде, а в том, какой браузер и какой версии.
Сейчас проверил. У меня Андроид 8, Хром 84 (регулярно обновляется).
Все работает.

А ваш первоначальный вариант работает?

Блондинка

09.08.2020, 13:37

В операх и большинстве браузеров первоначальной вариант работает нормально, могу то зайти с хрома, могу обновить, но есть пользователи сайта которые в реале при разговоре задают вопрос, а что это такое "браузер"

voraa

09.08.2020, 18:16

Некоторое время назад мы на работе выбрасывали старые компы, и перед этим их включали, что бы понять, что это такое.
На двух из них был Нетскейп Навигатор.
Но мое мнение, что не надо делать сайты, в расчете на него. Так же не стоит делать в расчете на ИЕ, даже 11, На Хромы и Файрфоксы трехлетней давности. Это проблемы пользователя.

Блондинка

14.08.2020, 17:48

Одним словом, тут вряд-ли помогут решить проблему и разделить число и год на "квадратики"...

voraa

14.08.2020, 18:26

Вам помогли. Дали код работающий на современных браузерах.
Если Вы программируете, так пользуйтесь Бабелем, что бы сделать его совместимым со старьем. Кто знает, на какой браузер вы расчитываете, и что именно в современном JavaScript он не понимает.
Я подозреваю, что вот это он не берет
Строки 43-48
function numberWrapInDiv(num)
{
return [...num.toString().padStart(2, "0")].map(num => `<div>${num}</div>`).join("")
}

[hour, minute, sec, day, year] = [hour, minute, sec, day, year].map(numberWrapInDiv)

Надо переписать не используя новые возможности языка

function numberWrapInDiv(num)
{
var anum = ((num<10? '0' : '')+num).split('')
var s = ''
for (var i=0; i<anum.length; i++) s += '<div>'+anum[i]+'</div>'
return s
}

//[hour, minute, sec, day, year] = [hour, minute, sec, day, year].map(numberWrapInDiv)
hour = numberWrapInDiv(hour);
minute = numberWrapInDiv(minute);
sec = numberWrapInDiv(sec);
day = numberWrapInDiv(day);
year = numberWrapInDiv(year);

Это обычная работа программиста.
Почему кто то за вас этим должен заниматься?
Никто больше не будет. Помочь, направить - это одно.
А выполнять работу - совсем другое.