countUpHTML ( startVal, endVal )

Running counter of @inorganic, see https://inorganik.github.io/countUp.js/

Average rating: 4.5 (4 votes) Log in to vote

Jens Teich - Show more from this author
DJTO
http://jensteich.de

Sample input:

countUpHTML

Sample output:

HTML Code to be used in a webviewer counting from startVal to endVal

Function definition: (Copy & paste into FileMaker's Edit Custom Function window)

/*
 *  countUpHTML ( startVal, endVal )
 * author: Jens Teich, http://jensteich.de
 *
 * Implements 'running' counter of @inorganic, see https://inorganik.github.io/countUp.js/ version 1.7.1
 */

SetzeVar([
  // customize these values
  color="black"; // font color as HTML ( #cccccc )
  bgcolor="#F7F7F7"; // background color as HTML
  size="2em"; // font size as HTML
  time_="2.5";  // time in seconds with decimal separator point
  prefix="EUR ";
  suffix="";
  decimal=","; // decimal separator
  separator="." // grouping separator
];
// don't change anything below this line
"data:text/html,<html><head><style>body{margin:0;font-family:Helvetica,Arial,sans-serif;text-align:right;background-color:"&bgColor&";}h1#target{font-weight:300;font-size:"&size&";margin:0;color:"&color&";}</style><script>/*countUp.js by @inorganik. target = id of html element or var of previously selected html element where counting occurs. startVal = the value you want to begin at. endVal = the value you want to arrive at. decimals = number of decimal places, default 0. duration = duration of animation in seconds, default 2. options = optional object of options (see below)*/var CountUp=function(target,startVal,endVal,decimals,duration,options) {var lastTime = 0;var vendors = ['webkit', 'moz', 'ms', 'o'];for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];window.cancelAnimationFrame =window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];}if (!window.requestAnimationFrame) {window.requestAnimationFrame = function(callback, element) {var currTime = new Date().getTime();var timeToCall = Math.max(0, 16 - (currTime - lastTime));var id = window.setTimeout(function() { callback(currTime + timeToCall); },timeToCall);lastTime = currTime + timeToCall;return id;};}if (!window.cancelAnimationFrame) {window.cancelAnimationFrame = function(id) {clearTimeout(id);};}var self = this;self.options = {useEasing : true,useGrouping : true,separator : '.',decimal : ',',easingFn: null,formattingFn: null};for (var key in options) {if (options.hasOwnProperty(key)) {self.options[key] = options[key];}}if (self.options.separator === '') { self.options.useGrouping = false; }if (!self.options.prefix) self.options.prefix = '';if (!self.options.suffix) self.options.suffix = '';self.d = (typeof target === 'string') ? document.getElementById(target) : target;self.startVal = Number(startVal);self.endVal = Number(endVal);self.countDown = (self.startVal > self.endVal);self.frameVal = self.startVal;self.decimals = Math.max(0, decimals || 0);self.dec = Math.pow(10, self.decimals);self.duration = Number(duration) * 1000 || 2000;self.formatNumber = function(nStr) {nStr = nStr.toFixed(self.decimals);nStr += '';var x, x1, x2, rgx;x = nStr.split('.');x1 = x[0];x2 = x.length > 1 ? self.options.decimal + x[1] : '';rgx = /(\d+)(\d{3})/;if (self.options.useGrouping) {while (rgx.test(x1)) {x1 = x1.replace(rgx, '$1' + self.options.separator + '$2');}}return self.options.prefix + x1 + x2 + self.options.suffix;};/* Robert Penner's easeOutExpo */self.easeOutExpo = function(t, b, c, d) {return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;};self.easingFn = self.options.easingFn ? self.options.easingFn : self.easeOutExpo;self.formattingFn = self.options.formattingFn ? self.options.formattingFn : self.formatNumber;self.version = function () { return '1.7.1'; };self.printValue = function(value) {var result = self.formattingFn(value);if (self.d.tagName === 'INPUT') {this.d.value = result;}else if (self.d.tagName === 'text' || self.d.tagName === 'tspan') {this.d.textContent = result;}else {this.d.innerHTML = result;}};self.count = function(timestamp) {if (!self.startTime) { self.startTime = timestamp; }self.timestamp = timestamp;var progress = timestamp - self.startTime;self.remaining = self.duration - progress;if (self.options.useEasing) {if (self.countDown) {self.frameVal=self.startVal-self.easingFn(progress,0,self.startVal-self.endVal,self.duration);}else{self.frameVal=self.easingFn(progress,self.startVal,self.endVal-self.startVal,self.duration);}}else{if(self.countDown){self.frameVal=self.startVal-((self.startVal-self.endVal)*(progress/self.duration));}else{self.frameVal=self.startVal+(self.endVal-self.startVal)*(progress/self.duration);}}if(self.countDown){self.frameVal=(self.frameVal<self.endVal)?self.endVal:self.frameVal;}else{self.frameVal=(self.frameVal>self.endVal)?self.endVal:self.frameVal;}self.frameVal=Math.round(self.frameVal*self.dec)/self.dec;self.printValue(self.frameVal);if (progress < self.duration) {self.rAF = requestAnimationFrame(self.count);} else {if (self.callback) { self.callback(); }}};self.start = function(callback) {self.callback = callback;self.rAF = requestAnimationFrame(self.count);return false;};self.printValue(self.startVal);};</script></head><body><h1 id='Target'>0</h1></body><script type='text/javascript'>window.onload = function(){var demo=new CountUp('Target',"&startVal&","&endVal&",0,"&time_&",{separator:'"&separator&"',decimal:'"&decimal&"',prefix:'"&prefix&"',suffix:'"&suffix&"'});demo.start();};</script></html>")

Running counter of @inorganic, see demo at https://inorganik.github.io/countUp.js/

Comments

		Lazarus Sismanis, Decision Group Jan 18, 2017
Good stuff Jens. For the English speaking audience, they'll need to replace 'SetzeVar' with 'Let', so it becomes... Let([ // customize these values color="black"; // font color as HTML ( #cccccc ) bgcolor="#F7F7F7"; // background color as HTML size="2em"; // font size as HTML Good stuff. Thanks.

Note: these functions are not guaranteed or supported by BrianDunning.com. Please contact the individual developer with any questions or problems.

countUpHTML ( startVal, endVal )

Comments

Support this website.

Support this website.