Форум

рони · #11 (**permalink**) 16.12.2019, 20:10

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

рони · #12 (**permalink**) 16.12.2019, 20:56

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

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

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

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

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

Besprizornik · #13 (**permalink**) 16.12.2019, 20:58

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

рони · #14 (**permalink**) 16.12.2019, 21:34

Besprizornik,

Блондинка · #15 (**permalink**) 17.12.2019, 14:16

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

рони · #16 (**permalink**) 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 (**permalink**) 17.12.2019, 17:25

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

Блондинка · #18 (**permalink**) 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);
            })()

рони · #19 (**permalink**) 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>

Блондинка · #20 (**permalink**) 19.12.2019, 01:48

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

Форум

Справочник

Discord чат

Курсы javascript