Счётчик CountUp.js Bootstrap
Пример использования счётчика на сайте, нужное число начинается с нуля и достигает нужного за установленное время, в HTML коде используется Bootstrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><div class="container"><div class="row"><div class="col-lg-6 col-lg-offset-3"><div class="text-center"><h1 id="myCounter">0</h1><h2 id="myCounters">0</h2></div></div></div><script>! function (t, a) {"function" == typeof define && define.amd? define (a): "object" == typeof exports? module.exports = a (require, exports, module): t.CountUp = a ( )} (this, function () {var t = function (t, a, e, n, i, r) {for (var o = 0, s = ["webkit", "moz", "ms", " o "], u = 0; u <s.length &&! window.requestAnimationFrame; ++ u) window.requestAnimationFrame = window [s [u] +" RequestAnimationFrame "], window.cancelAnimationFrame = window [s [u] +" CancelAnimationFrame "] || window [s [u] +" CancelRequestAnimationFrame "]; window.requestAnimationFrame || (window.requestAnimationFrame = function (t) {var a = (new Date) .getTime (), e = Math.max ( 0,16- (ao)), n = window.setTimeout (function () {t (a + e)}, e); return o = a + e, n}), window.cancelAnimationFrame || (window.cancelAnimationFrame = function (t) {clearTimeout (t)}), this.options = {useEasing:! 0,useGrouping:! 0, разделитель: ",", десятичный: "."}; for (var m in r) r.hasOwnProperty (m) && (this.options [m] = r [m]); "" == = this.options.separator && (this.options.useGrouping =! 1), this.options.prefix || (this.options.prefix = ""), this.options.suffix || (this.options.suffix = " "), this.d =" string "== typeof t? document.getElementById (t): t, this.startVal = Number (a), this.endVal = Number (e), this.countDown = this.startVal> this.endVal, this.frameVal = this.startVal, this.decimals = Math.max (0, n || 0), this.dec = Math.pow (10, this.decimals), this.duration = 1e3 * Число (i) || 2e3; var l = this; this.version = function () {return "1.6.0"}, this.printValue = function (t) {var a = isNaN (t)? "-": l.formatNumber (t); "INPUT" == ldtagName? this.d.value = a: "text" == ldtagName || "tspan" == ldtagName? this.d.textContent = a: this.d.innerHTML = a}, this.easeOutExpo = function (t, a, e, n) {return e * (- Math.pow (2, -10 * t / n) +1) * 1024/1023 + a}, this.count = function (t) {l.startTime || (l.startTime = t), l.timestamp = t; var a = tl.startTime; l.remaining = l.duration- a, l.frameVal = l.options.useEasing? l.countDown? l.startVal-l.easeOutExpo (a, 0, l.startVal-l.endVal, l.duration): l.easeOutExpo (a, l.startVal , l.endVal-l.startVal, l.duration): l.countDown? l.startVal- (l.startVal-l.endVal) * (a / l.duration): l.startVal + (l.endVal-l. startVal) * (a / l.duration), l.frameVal = l.countDown? l.frameVal <l.endVal? l.endVal: l.frameVal: l.frameVal> l.endVal? l.endVal: l.frameVal , l.frameVal = Math.round (l.frameVal * l.dec) /l.dec,l.printValue (l.frameVal), a <l.duration? l.rAF = requestAnimationFrame (l.count): l. callback && l.callback ()}, this.start = function (t) {return l.callback = t, l.rAF = requestAnimationFrame (l.count) ,! 1}, this.pauseResume = function () {l.paused? (l.paused =! 1, удалить l.startTime, l.duration = l.remaining, l.startVal = l.frameVal, requestAnimationFrame (l.count)) :( l. paused =! 0, cancelAnimationFrame (l.rAF))}, this.reset = function () {l.paused =! 1, delete l.startTime, l.startVal = a, cancelAnimationFrame (l.rAF), l.printValue (l.startVal)}, this.update = function (t) {cancelAnimationFrame (l.rAF), l.paused =! 1, удалить l.startTime, l.startVal = l.frameVal, l.endVal = Number (t ), l.countDown = l.startVal> l.endVal, l.rAF = requestAnimationFrame (l.count)}, this.formatNumber = function (t) {t = t.toFixed (l.decimals), t + = "" ; var a, e, n, i; if (a = t.split ("."), e = a [0], n = a.length> 1? l.options.decimal + a [1]: " ", i = / (\ d +) (\ d {3}) /, l.options.useGrouping) for (; i.test (e);) e = e.replace (i," $ 1 "+ l.options .separator + "$ 2"); вернуть l.options.prefix + e + n + l.options.suffix}, l.printValue (l.startVal)}; return t});</script><script>var options = {useEasing : true,useGrouping : true,separator : ',',decimal : '.',prefix : '',suffix : ''};var counter = new CountUp("myCounter", 0, 1597, 0, 2.5, options);counter.start();var counters = new CountUp("myCounters", 0, 2584, 0, 2.5, options);counters.start();</script>
Скрипты можете вынести в отдельный файл и подключить его.
Информация
Посетители, находящиеся в группе Гости, не могут скачивать файлы с нашего сайта.
Пожалуйста зарегистрируйтесь или авторизируйтесь для доступа к файлу.
Похожие новости
Обсуждение новости
-
Информация
-
Vii Engine NEW
-
DataLife Engine
-
WordPress
-
XenForo
-
IPS
-
Скрипты, Soft, APP, CMS
-
Bootstrap
-
Шаблоны сайтов
-
Web Мастеру
Статистика
Гости1
Список пользователей
Александр Демеденко
Был(a) в сети 8 часов назад
Обновленияnew
Комментарии
Часто задаваемые вопросы
Информация
Скидка на все скрипты 20%! до 8 сентября
Актуальная версия Vii Engine 3.0
Внимание! Сайт мошенников!
Облако тегов
Billing DataLife Engine Final nulled Release WordPress Адаптивный Возможность Сборка Скачать бесплатно версии версия возможности время изображений имеет интернет использования которые модулей модуль можно новостей плагин полностью помощью работы сайт сайта сайтов свой сети системы скрипт социальной также форума шаблон









