I have a countdown script that counts down until a certain day that is specified. I want it to just count down 24 hours every time its loaded but can't seem to get it to happen.
thanks
http://pastebin.com/zQ4ESHuG
var timeInSecs;
var ticker;
function startTimer(secs){
timeInSecs = parseInt(secs);
ticker = setInterval("tick()",1000);
tick(); // to start counter display right away
}
function tick() {
var secs = timeInSecs;
if (secs>0) {
timeInSecs--;
}
else {
clearInterval(ticker); // stop counting at zero
//startTimer(60 * 60 *24 * 5); // and start again if required
}
var days = Math.floor(secs/86400);
secs %= 86400;
var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;
var result = ((hours < 10 ) ? "0" : "" ) + hours + ":" + ( (mins < 10) ? "0" : "" ) + mins
+ ":" + ( (secs < 10) ? "0" : "" ) + secs;
result = days + " Days: " + result;
document.getElementById("countdown").innerHTML = result;
}
Solved it.
Thanks everyone.
Related
I want to restart the setInterval for only -1 second every time I click insert any idea? how to make it restart and increase my value well running? For example clear the setInterval -1 second session from tick( ) and start a new -1 second session so the tick() wont keep looping the function every time I click it
var timeInSecs;
var ticker;
function startTimer() {
var newValues = document.getElementById("mm").value;
var secondInput = document.getElementById("secondsdown").value;
if (secondInput == null || secondInput == '') {
secondInput = '0';
} else {
secondInput = document.getElementById("secondsdown").value;
}
var secs = 60 * parseInt(newValues);
timeInSecs = parseInt(secs + parseInt(secondInput));
ticker = setInterval("tick()", 1000);
}
function tick() {
var secs = timeInSecs;
document.getElementById("secondsdown").value = secs;
if (secs > 0) {
timeInSecs--;
} else {
clearInterval(ticker);
}
var days = Math.floor(secs / 86400);
secs %= 86400;
var hours = Math.floor(secs / 3600);
secs %= 3600;
var mins = Math.floor(secs / 60);
secs %= 60;
var pretty = ((hours < 10) ? "0" : "") + hours + ":" + ((mins < 10) ? "0" : "") + mins + ":" + ((secs < 10) ? "0" : "") + secs;
document.getElementById("countdown").innerHTML = pretty;
}
<div class="master-slider ms-skin-light-2" id="masterslider">
<div class="ms-slide">
<input type="number" id="secondsdown"/>
<span id="countdown"></span>
<input id="mm" placeholder="分钟" type="number";/>
<input type="button" value="Click" onclick="startTimer()"/>
</div>
</div><!-- end of masterslider1 -->
I understand this line cause the issues but how to stop it increase from i++
ticker = setInterval(tick, 1000);
I guess it depends on how you look at it :) You've started alright, but the problem is your startTimer(), where upon every click, you always start a new interval.
This shouldn't really be necessary, so either:
always clear the interval before starting a new interval
only start the interval if no interval was active yet
As I'm not sure what your goal is, the easiest change was to consecutively call clearInterval and setInterval.
The only other thing I've changed, is to call tick() once inside the startTimer so that the user doesn't have to wait 1 second before a reaction comes from the UI ( which is a bit confusing :) )
var timeInSecs;
var ticker;
function startTimer() {
var newValues = document.getElementById("mm").value;
var secondInput = document.getElementById("secondsdown").value;
if (secondInput == null || secondInput == '') {
secondInput = '0';
} else {
secondInput = document.getElementById("secondsdown").value;
}
var secs = 60 * parseInt(newValues);
timeInSecs = parseInt(secs + parseInt(secondInput));
tick();
// clear any previous timers
clearInterval( ticker );
// start new timer
ticker = setInterval(tick, 1000);
}
function tick() {
var secs = timeInSecs;
document.getElementById("secondsdown").value = secs;
if (secs > 0) {
timeInSecs--;
} else {
clearInterval(ticker);
}
var days = Math.floor(secs / 86400);
secs %= 86400;
var hours = Math.floor(secs / 3600);
secs %= 3600;
var mins = Math.floor(secs / 60);
secs %= 60;
var pretty = ((hours < 10) ? "0" : "") + hours + ":" + ((mins < 10) ? "0" : "") + mins + ":" + ((secs < 10) ? "0" : "") + secs;
document.getElementById("countdown").innerHTML = pretty;
}
<div class="master-slider ms-skin-light-2" id="masterslider">
<div class="ms-slide">
<input type="number" id="secondsdown"/>
<span id="countdown"></span>
<input id="mm" placeholder="分钟" type="number";/>
<input type="button" value="Click" onclick="startTimer()"/>
</div>
</div><!-- end of masterslider1 -->
I have a function that converts ms to s and m and it will display as 0:00 but i want it to display it as 0:00.0. How would i do this?
function millisToMinutesAndSeconds(millis) {
var minutes = Math.floor(millis / 60000);
var seconds = ((millis % 60000) / 1000).toFixed(0);
return (seconds == 60 ? (minutes+1) + ":00" : minutes + ":" + (seconds < 10 ? "0" : "") + seconds);
}
console.log(
millisToMinutesAndSeconds(123456)
)
set toFixed() with the desired number of digits:
var seconds = ((millis % 60000) / 1000).toFixed(1);
sorry, I do not know where you got the code from, the code may look something like this. I suggest you close this question.
function millisToMinutesAndSeconds(millis) {
const minutes = Math.floor(millis / 60000);
const seconds = Math.floor((millis - (minutes * 60000))/ 1000);
const milliseconds = (millis - (minutes * 60000) - (seconds * 1000));
const mins = minutes < 10 ? "0" + minutes : "" + minutes;
const secs = seconds < 10 ? "0" + seconds : "" + seconds;
const msecs = milliseconds < 10 ? "00" + milliseconds : milliseconds < 100 ? "0" + milliseconds : "" + milliseconds;
return `${mins}:${secs}.${msecs}`;
}
console.log(
millisToMinutesAndSeconds(123456)
)
Could you please tell me how to run timer from 0 to 10 min in JavaScript?
Here is my code:
var secondsToMinutesAndSeconds = function (time) {
// Minutes and seconds
var mins = ~~(time / 60);
var secs = time % 60;
// Hours, minutes and seconds
var hrs = ~~(time / 3600);
var mins = ~~((time % 3600) / 60);
var secs = time % 60;
var ret = ""; //OUPUT: HH:MM:SS or MM:SS
if (hrs > 0) {
ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
}
ret += "" + mins + ":" + (secs < 10 ? "0" : "");
ret += "" + secs;
return ret;
};
// time given by server
var uitat = 600;
var jobSessionTime ;
function callAtInterval() {
if (parseInt(uitat) > 0) {
uitat = parseInt(uitat) - 1;
jobSessionTime = secondsToMinutesAndSeconds(uitat);
console.log(jobSessionTime)
} else {
console.log('=====')
}
}
// time given by server 600
jobSessionTime = secondsToMinutesAndSeconds(600);
var stop = setInterval(callAtInterval, 1000);
Currently it prints from 10:00 to 00:00 yet
i want it to print from 00:00 to 10:00.
https://jsbin.com/reqocerefa/3/edit?html,js,console
var secondsToMinutesAndSeconds = function (time) {
// Minutes and seconds
var mins = ~~(time / 60);
var secs = time % 60;
// Hours, minutes and seconds
var hrs = ~~(time / 3600);
var mins = ~~((time % 3600) / 60);
var secs = time % 60;
var ret = ""; //OUPUT: HH:MM:SS or MM:SS
if (hrs > 0) {
ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
}
ret += "" + mins + ":" + (secs < 10 ? "0" : "");
ret += "" + secs;
return ret;
};
// time given by server
var uitat = 0;
var jobSessionTime ;
function callAtInterval() {
if (parseInt(uitat) < 600) {
uitat = parseInt(uitat) + 1;
jobSessionTime = secondsToMinutesAndSeconds(uitat);
console.log(jobSessionTime)
} else {
clearInterval(stop);
}
}
// time given by server 600
jobSessionTime = secondsToMinutesAndSeconds(0);
var stop = setInterval(callAtInterval, 1000);
Try this:
var secondsToMinutesAndSeconds = function (time) {
// Minutes and seconds
var mins = ~~(time / 60);
var secs = time % 60;
// Hours, minutes and seconds
var hrs = ~~(time / 3600);
var mins = ~~((time % 3600) / 60);
var secs = time % 60;
var ret = ""; //OUPUT: HH:MM:SS or MM:SS
if (hrs > 0) {
ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
}
ret += "" + mins + ":" + (secs < 10 ? "0" : "");
ret += "" + secs;
return ret;
};
// time given by server
var uitat = 0;
var jobSessionTime ;
function callAtInterval() {
if (parseInt(uitat) < 600) {
uitat = parseInt(uitat) + 1;
jobSessionTime = secondsToMinutesAndSeconds(uitat);
console.log(jobSessionTime)
} else {
console.log('=====');
clearInterval(stop); // stop timer
}
}
// time given by server 0
jobSessionTime = secondsToMinutesAndSeconds(0);
var stop = setInterval(callAtInterval, 1000);
You would just make these changes to start at zero and count up to 600 seconds:
// ...
var uitat = 0; // Change `= 600` to `= 0` to start at 0 seconds
var jobSessionTime;
function callAtInterval() {
if (parseInt(uitat) < 600) { // Change `> 0` to `< 600` to stop at 600 seconds
uitat = parseInt(uitat) + 1; // Change `- 1` to `+ 1` to count up
// ...
Here is the complete code with the changes:
var secondsToMinutesAndSeconds = function(time) {
// Minutes and seconds
var mins = ~~(time / 60);
var secs = time % 60;
// Hours, minutes and seconds
var hrs = ~~(time / 3600);
var mins = ~~((time % 3600) / 60);
var secs = time % 60;
var ret = ""; //OUPUT: HH:MM:SS or MM:SS
if (hrs > 0) {
ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
}
ret += "" + mins + ":" + (secs < 10 ? "0" : "");
ret += "" + secs;
return ret;
};
// time given by server
var uitat = 0; // Change `= 600` to `= 0` to start at 0 seconds
var jobSessionTime;
function callAtInterval() {
if (parseInt(uitat) < 600) { // Change `> 0` to `< 600` to stop at 600 seconds
uitat = parseInt(uitat) + 1; // Change `- 1` to `+ 1` to count up
jobSessionTime = secondsToMinutesAndSeconds(uitat);
console.log(jobSessionTime);
} else {
console.log('=====')
}
}
// time given by server 600
jobSessionTime = secondsToMinutesAndSeconds(600);
var stop = setInterval(callAtInterval, 1000);
Here is the code with 600 held in a parameter:
var secondsToMinutesAndSeconds = function (time) {
// Minutes and seconds
var mins = ~~(time / 60);
var secs = time % 60;
// Hours, minutes and seconds
var hrs = ~~(time / 3600);
var mins = ~~((time % 3600) / 60);
var secs = time % 60;
var ret = ""; //OUPUT: HH:MM:SS or MM:SS
if (hrs > 0) {
ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
}
ret += "" + mins + ":" + (secs < 10 ? "0" : "");
ret += "" + secs;
return ret;
};
// time given by server
var uitat = 600;
var current = 0;
var jobSessionTime;
function callAtInterval() {
if (current < uitat) {
current += 1;
jobSessionTime = secondsToMinutesAndSeconds(current);
console.log(jobSessionTime)
} else {
console.log('=====')
clearInterval(stop);
}
}
jobSessionTime = secondsToMinutesAndSeconds(0);
var stop = setInterval(callAtInterval, 1000);
Suppose you wanted to set a timer to whatever time you want will be displayed in the form 00:00:00 minutes, seconds, and hundredths. How would you go about doing so? Please any help is greatly appreciated.
Here is the link in JSFiddle:
https://jsfiddle.net/mxpuejvz/2/
function decrement(){
var time = 600;
var mins = parseInt((time / 100) / 60);
var secs = parseInt((time / 100) % 60);
var hundredths = parseInt(time % 100);
if(mins < 10) {
mins = "0" + mins;
}
if(secs < 10) {
secs = "0" + secs;
}
if(hundredths < 10) {
hundredths = "0" + hundredths;
}
document.getElementById("output").innerHTML = mins + ":" + secs + ":" + hundredths;
if (hundredths === 0){
if(time ===0){
clearInterval(countdownTimer);
document.getElementById("output").innerHTML = "Time's Up.";
}else{
time--;
}
var countdownTimer = setInterval('decrement()', 10)
}
}
}
Three issues appear to need attention.
"time to go" needs to be stored outside the screen update function and decremented or calculated each time the screen is updated.
using parseInt to convert numbers to integer numbers is regarded as a hack by some. Math.floor() or integer calculation can be alternatives.
Timer call backs are not guaranteed to made exactly on time: counting the number of call backs for a 10msec time does not give the number of 1/100ths of elapsed time.
The following code is an example of how it could work, minus any pause button action.
var countdownTimer;
var endTime;
var counter = 0; // ** see reply item 3. **
function startCountDown( csecs) // hundredths of a second
{ endTime = Date.now() + 10*csecs; // endTime in millisecs
decrement();
countdownTimer = setInterval(decrement, 10);
counter = 0; // testing
}
function decrement()
{ var now, time, mins, secs, csecs, timeStr;
++ counter; // testing
now = Date.now();
if( now >= endTime)
{ time = 0;
timeStr = "Times up! counter = " + counter;
clearInterval( countdownTimer);
}
else
{ time = Math.floor( (endTime - now)/10); // unit = 1/100 sec
csecs = time%100;
time = (time-csecs)/100; // unit = 1 sec
secs = time % 60;
mins = (time-secs)/60; // unit = 60 secs
timeStr =
( (mins < 10) ? "0" + mins : mins) + ":" +
( (secs < 10) ? "0" + secs : secs) + ":" +
( (csecs < 10) ? "0" + csecs : csecs);
}
document.getElementById("output").innerHTML=timeStr;
}
The argument to startCountDown gives the number of 1/100ths of second for the count down. If the counter result is the same as the argument,try swapping browser tabs and back again during the countdown.
HTML to test:
<button type="button" onclick="startCountDown(600)">start</button>
<div id="output">
</div>
I'm working with javascript and loading some value from another file. I'm simply just using a value in the other file:
<head>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
//query the amountOfErrors variable every second
setInterval(function()
{
$('#getData').load("Test3.html"); //this only contains a number like 10029138
},1000);
});
</script>
</head>
<body>
<div id='getData'></div>
<div id='calculated'>
<script type="text/javascript">
var MachineActivityMS = document.getElementById('getData').innerHTML;
var MachineActivityS = MachineActivityMS / 1000; // omzetten naar secondes
var hours = parseInt( MachineActivityS / 3600 ) % 24; // uren
var minutes = parseInt( MachineActivityS / 60 ) % 60; // minuten
var seconds = Math.floor(MachineActivityS) % 60; // secondes
var resultActivity = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);
document.write(resultActivity);
</script>
</div>
</body>
</html>
Sadly this results in a NaN:NaN:NaN. And when I ParseInt() the number it doesn't show anything at all. The calculations are correct since when I replace
document.getElementById('getData').innerHTML;
it calculates the right value (for instance 122500 = 00:20:25).
How can I solve this?
Since you seem to have jquery included, why not try:
$('#getData').html()
instead of
document.getElementById('getData').innerHTML;
Inspect getData to see what it really contains in runtime. Also try to "parseInt" sooner, to force the type correctly:
var MachineActivityMS = parseInt($('#getData').html());
Update, remove the entire script-block in the body and replace the first script with this:
setInterval(function()
{
$('#getData').load("Test3.html", function () {
var MachineActivityMS = parseInt($('#getData').html());
var MachineActivityS = MachineActivityMS / 1000; // omzetten naar secondes
var hours = parseInt( MachineActivityS / 3600 ) % 24; // uren
var minutes = parseInt( MachineActivityS / 60 ) % 60; // minuten
var seconds = Math.floor(MachineActivityS) % 60; // secondes
var resultActivity = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);
$('#calculated').html(resultActivity);
});
},1000);
You're having
$('#getData').load("Test3.html");
run every second as soon as DOM is ready. The script below runs before that.
var MachineActivityMS = document.getElementById('getData').innerHTML;
var MachineActivityS = MachineActivityMS / 1000; // omzetten naar secondes
var hours = parseInt( MachineActivityS / 3600 ) % 24; // uren
var minutes = parseInt( MachineActivityS / 60 ) % 60; // minuten
var seconds = Math.floor(MachineActivityS) % 60; // secondes
var resultActivity = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);
document.write(resultActivity);
and misses the innerHTML of #getData since it runs only once. I'd wrap the entire code in setInterval function as follows.
$(document).ready(function()
{
$('#getData').load("Test3.html");
//query the amountOfErrors variable every second
setInterval(function()
{
$('#getData').load("Test3.html"); //this only contains a number like 10029138
var MachineActivityMS = document.getElementById('getData').innerHTML;
var MachineActivityS = MachineActivityMS / 1000; // omzetten naar secondes
var hours = parseInt( MachineActivityS / 3600 ) % 24; // uren
var minutes = parseInt( MachineActivityS / 60 ) % 60; // minuten
var seconds = Math.floor(MachineActivityS) % 60; // secondes
var resultActivity = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);
$('#calculated').html(resultActivity);
},1000);
});
Please note that we've used $('#calculated').html(resultActivity); this time. What's the point of loading the contents of the file in a div every second and doing calculations with the value once anyways?