How to Apply Count Up Function to Multiple Values on the Page

How to apply count up function to multiple values on the page?

You need to loop over the individual .count nodes and set the new text for each of them.

  • You can use jquery's .each() function to loop over the individual elements
  • then use Number() to convert the text of the .count nodes to a number

Example:

function startCount() {  setInterval(function() {    $(".count").each(function() {      let el = $(this);      let time = Number(el.text()) + 1;      el.text(time);    });  }, 1000);}
startCount();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="count">270219</div><div class="count">265454</div><div class="count">312565</div><div class="count">254587</div>

Count multiple values with jquery

You need to use a loop inside your blur handler like

var $counts = $('.count').blur(function () {
var money = 0;
$counts.each(function () {
money += (+this.value * $(this).closest('tr').find('.price').val()) || 0
});

$('.money').text(money);
});

Demo: Fiddle

Multiple JS countup timers on one page from specific dates

you can replace .innerHTML with .html()

DEMO

Javascript: Use countup-function multiple times

This is one possible approach: instantiate different go functions with different parameters:

var start = {  "counter-1": 7500000,  "counter-2": 1500000};var speed = 1000;$(document).ready(function() {  launch("counter-1", 1.5);  launch("counter-2", 100)});
function launch(elem, increment) { var go = goFactory(elem, increment) go(); setInterval(go, speed);}
function goFactory(elemId, increment) { function go() { $("#" + elemId).html(start[elemId].toFixed(0)); start[elemId] += increment; }
return go;}
div {  font-weight: normal;  letter-spacing: 5px;  padding: 6px;  font-size: 1.8em;  font-family: 'Gill Sans';  width: 500px;  text-align: center;  height: auto;  color: #333;  display: block;  margin: 0px auto;  vertical-align: middle;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><html>
<head> <title>Contatore</title></head>
<body> <div id="counter-1"></div> <div id="counter-2"></div></body>
</html>

Trying to display multiple count down timers on same page

setInterval and setTimeout don't start after 1000ms e.g. if another script is running, so both can cause delays. It would be better to use the setIntervall to call the display update only and use the the Date object to calculate the exactly remaining time. E.g. after the browser was busy the timer shows the correct time after the next update.

Here an example:

HTML:

<div id="timer1"></div>
<div id="timer2"></div>

javascript:

// update all timer
function updateTimer() {
for (var i in aTimer) {
var oTimer = document.getElementById(aTimer[i].sId);
var iSeconds = parseInt((aTimer[i].iFinished - Date.now()) / 1000);
oTimer.innerHTML = iSeconds;
}
}

// Init all timers with DOM-id and finish time
var aTimer = [
{ sId: 'timer1', iFinished: Date.now() + 46800000 },
{ sId: 'timer2', iFinished: Date.now() + 780000}
];

// call display update
setInterval(function() {
updateTimer();
}, 333);

Multiple UL, count li inside each

You need to count the children of the <ul> element, not the element itself. Also, you don't need underscore.js here.

$('.sortableList').each(function(){
console.log($(this).children('li').length);
});

Problems with (multiple) jQuery count up

Is something like this what you're looking for?:

<div class="countup" value="jan,01,2014,00:00:00"></div>
<div class="countup" value="feb,05,2015,13:00:00"></div>

function upTime(element) {
now = new Date();
countTo = new Date(element.getAttribute("value"));
difference = (now-countTo);

days=Math.floor(difference/(60*60*1000*24)*1);
hours=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);
mins=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
secs=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);

element.innerHTML = "It's been " + days + " days " + hours + " hours " + mins + " minutes " + secs + " seconds";

setTimeout(function(){ upTime(element); },1000);
}

var elements = document.getElementsByClassName("countup");
for (var i = 0; i < elements.length; i += 1) {
upTime(elements[i]);
}

jsFiddle: http://jsfiddle.net/6f6c8z4a/1/

Output:

It's been 405 days 13 hours 58 minutes 43 seconds
It's been 5 days 0 hours 58 minutes 43 seconds

One thing to note is that setTimeout(.., 1000) is not a reliable way to run code every second because setTimeout makes a best effort. In practice the timer will start to skew pretty quickly. You can consider running this code more often (every 100ms) or you can ignore the skew.



Related Topics



Leave a reply



Submit