Показать сообщение отдельно
  #4 (permalink)  
Старый 30.06.2019, 16:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

UnicornLord,
<!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>
    <style>
    @font-face{
      font-family:'Intro';
      src:url('http://s.platformalp.ru/fonts/intro/400.woff2') format('woff2');
    }

    .num{
      font-size:104px;
      font-weight:600;
      font-family:'Intro';
      color:#999999;
    }

    .num .m{
      color:#FF1493;
    }

    .num .m:nth-last-child(n +4){
      color:#006400;
    }
    </style>
    <script>
$(function() {
  $(".num").each(function(c, b) {
    b = $(b);
    var a = b.data(), num = $({n:a.num});
    b.click(function() {
    num.stop();
    num[0].n = a.num;
    num.animate({n:a.end}, {duration:a.duration, step:function(a) {
      a = ("" + (a | 0)).split("").reduce(function(a, b) {
        return a + "<span class='m'>" + b + "</span>";
      }, "");
      b.html(a);
    }});
})

  });
});
    </script>
</head>

<body>
    <div class="num" data-num="0"  data-end="10000"  data-duration="2000">click</div>
    <div class="num" data-num="15000"  data-end="-10"  data-duration="20000">click</div>
</body>

</html>
Ответить с цитированием