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
Check Whether an Input String Contains a Number in JavaScript
Remove Insignificant Trailing Zeros from a Number
How to Change Value of Object Which Is Inside an Array Using JavaScript or Jquery
Retaining the Textbox Values Even After Refresh
Why Does Google Chrome Always Add Space After Selected Text
How to Print Star Pattern in JavaScript in a Very Simple Manner
Click on Pseudo Element Using Selenium
How to Insert Dashes Between Each Two Even Digits of a Specific Number
Get Directory of a File Name in JavaScript
How to Reference a JavaScript Object Property With a Hyphen in It
How to Check If Input File Is Empty in Jquery
React: Setting the Disabled Attribute Based on a State
How to Open Hidden Information on Website
Javascript Updating Values of Objects Inside List
How to Find an Exact Word in a String
How to Merge an Array of Objects With Same Keys in Es6 JavaScript
Development Server of Create-React-App Does Not Auto Refresh