|
Сообщение от Блондинка
|
|
а зачем использовать 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>