Javascript-форум - текущее время с анимацией

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - текущее время с анимацией (https://javascript.ru/forum/misc/79089-tekushhee-vremya-s-animaciejj.html)

css timer countdown digital clock js

Цитата:

Сообщение от Besprizornik

без внешних скриптов

https://codepen.io/virgilpana/pen/aObdPv

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

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

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

Besprizornik,
:-?

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

Блондинка,
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>

Цитата:

Сообщение от Блондинка

а не подскажешь как вывести текущее время

Забыл перелогиниться? :D

Rise,
я хочу тут заменить див с часами

<!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>

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

Цитата:

Сообщение от рони (Сообщение 511724)

Блондинка,

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);
            })()

Цитата:

Сообщение от Блондинка

сделать разделитель ':' мигающим

<!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>