הבדלים בין גרסאות בדף "תבנית:מספרים"
קפיצה לניווט
קפיצה לחיפוש
| שורה 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 צפיות]]