הבדלים בין גרסאות בדף "תבנית:מספרים"
קפיצה לניווט
קפיצה לחיפוש
שורה 3: | שורה 3: | ||
[[פורטלים|{{PAGESINNAMESPACE:100}} פורטלים]] | [[פורטלים|{{PAGESINNAMESPACE:100}} פורטלים]] | ||
<span class="timer" data-from="25" data-to="75"></span> | <span class="timer" data-from="25" data-to="75"></span> | ||
+ | |||
+ | |||
+ | |||
+ | |||
<html> | <html> | ||
− | <script src="// | + | <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script> |
− | <script | + | <script type="text/javascript">//<![CDATA[ |
− | + | $(window).load(function(){ | |
− | + | (function ($) { | |
− | // | + | $.fn.countTo = function (options) { |
+ | options = options || {}; | ||
+ | |||
+ | return $(this).each(function () { | ||
+ | // set options for current element | ||
+ | var settings = $.extend({}, $.fn.countTo.defaults, { | ||
+ | from: $(this).data('from'), | ||
+ | to: $(this).data('to'), | ||
+ | speed: $(this).data('speed'), | ||
+ | refreshInterval: $(this).data('refresh-interval'), | ||
+ | decimals: $(this).data('decimals') | ||
+ | }, options); | ||
+ | |||
+ | // how many times to update the value, and how much to increment the value on each update | ||
+ | var loops = Math.ceil(settings.speed / settings.refreshInterval), | ||
+ | increment = (settings.to - settings.from) / loops; | ||
+ | |||
+ | // references & variables that will change with each update | ||
+ | var self = this, | ||
+ | $self = $(this), | ||
+ | loopCount = 0, | ||
+ | value = settings.from, | ||
+ | data = $self.data('countTo') || {}; | ||
+ | |||
+ | $self.data('countTo', data); | ||
+ | |||
+ | // if an existing interval can be found, clear it first | ||
+ | if (data.interval) { | ||
+ | clearInterval(data.interval); | ||
+ | } | ||
+ | data.interval = setInterval(updateTimer, settings.refreshInterval); | ||
+ | |||
+ | // initialize the element with the starting value | ||
+ | render(value); | ||
+ | |||
+ | function updateTimer() { | ||
+ | value += increment; | ||
+ | loopCount++; | ||
+ | |||
+ | render(value); | ||
+ | |||
+ | if (typeof(settings.onUpdate) == 'function') { | ||
+ | settings.onUpdate.call(self, value); | ||
+ | } | ||
+ | |||
+ | if (loopCount >= loops) { | ||
+ | // remove the interval | ||
+ | $self.removeData('countTo'); | ||
+ | clearInterval(data.interval); | ||
+ | value = settings.to; | ||
+ | |||
+ | if (typeof(settings.onComplete) == 'function') { | ||
+ | settings.onComplete.call(self, value); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function render(value) { | ||
+ | var formattedValue = settings.formatter.call(self, value, settings); | ||
+ | $self.text(formattedValue); | ||
+ | } | ||
+ | }); | ||
+ | }; | ||
+ | |||
+ | $.fn.countTo.defaults = { | ||
+ | from: 0, // the number the element should start at | ||
+ | to: 0, // the number the element should end at | ||
+ | speed: 1000, // how long it should take to count between the target numbers | ||
+ | refreshInterval: 100, // how often the element should be updated | ||
+ | decimals: 0, // the number of decimal places to show | ||
+ | formatter: formatter, // handler for formatting the value before rendering | ||
+ | onUpdate: null, // callback method for every time the element is updated | ||
+ | onComplete: null // callback method for when the element finishes updating | ||
+ | }; | ||
+ | |||
+ | function formatter(value, settings) { | ||
+ | return value.toFixed(settings.decimals); | ||
+ | } | ||
+ | }(jQuery)); | ||
+ | |||
+ | $('.timer').countTo(); | ||
+ | |||
+ | });//]]> | ||
+ | |||
+ | </script> | ||
</html> | </html> |
גרסה מ־21:08, 20 באוקטובר 2014
[[מיוחד:סטטיסטיקות|תבנית:NUMBEROFVIEWS צפיות]]