Счётчик 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>
Скрипты можете вынести в отдельный файл и подключить его.
admin
Автор20-02-2021, 18:42
Дата пуликацииBootstrap сниппеты
Категория- Комментариев: 0
- Просмотров: 28
Вы находитесь на вкладке дополнительной информации к новости. Здесь можно просмотреть такую информацию как ссылка на источник, действующий пример какого либо скрипта, и соответственно саму ссылку на скачивание файла , если таковой имеется.
Реклама - это вынужденная мера для поддержания проекта на плаву. Я не принуждаю Вас кликать по рекламным блокам. Если конечно она вас не заинтересовала.
Все кнопки для скачивания активны. Находятся внизу страницы. Если нет кнопки , значит нет файла.
Спасибо большое за понимание!
Да и самое важное, все материалы носят чисто ознакомительный характер, всё файлы взяты из открытых источников, соответсвенно Вы их используете на свой страх и риск. За исключением только моих товаров в магазине.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.