var url = 'https://wiki.teamfortress.com/wiki/Main_Page';
var animateNumber = function(element, newValue) {
var previousNumber = element.data('num') || 0;
$({ a: previousNumber }).animate({ a: newValue }, {
duration: 300,
step: function () {
element.text(~~this.a);
},
complete: function () {
element.text(newValue).data('num', newValue);
}
});
};
var updateGoSquared = function() {
$.getJSON('https://api.gosquared.com/now/v3/pages?api_key=demo&site_token=GSN-106863-S&href=' + encodeURIComponent(url), function(data) {
setTimeout(updateGoSquared, 5000);
var onlineNow = $('#online-now').addClass('visible');
animateNumber(onlineNow.find('.visitors'), data.visitors);
var engagedSecondsPerVisitor = Math.round(data.engagedTime / data.visitors / 1000);
animateNumber(onlineNow.find('.engaged'), engagedSecondsPerVisitor);
});
};
updateGoSquared();
<p id="online-now"><span class="visitors">0</span> people are currently viewing the Team Fortress 2 Homepage, and the average engaged time per visitor is <span class="engaged">0</span> seconds.</p>
#online-now {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
opacity: 0;
transition: opacity 0.2s ease-out;
}
#online-now.visible {
opacity: 1;
}