Self Adjusting Javascript Countdown - javascript

Is there a way to create a countdown timer using javascript that will automatically adjust to a different countdown once it reaches 0? (Example: countdown from current time until New Year of 2012 and once it reaches 0 it will change to a countdown to a birthday that is in March) (this could be used as a countdown for a schedule for an event. you could have a schedule and a countdown to the next part of the schedule once it finishes counting down to the first part)

var timeForNextFunction = false;
function firstFunction(){
//set timeForNextFunction = true when its time for the next function.
};
function nextFunction(){};
var tick = 100; //milliseconds
document.setInterval(function(){
if (timeForNextFunction)
nextFunction();
else
firstFucntion();
}, tick);

You can have an array of Date, for example:
function newDate(seconds){
var d=new Date();
d.setTime(new Date().getTime()+1000*seconds);
return d;
}
var events=[newDate(10),newDate(40)];
And then
var currentEvent=0,
cntdwn=document.getElementById('seconds');
refreshEvent();
var timer=setInterval(display,1000);
function display(){
var seconds=Math.ceil((events[currentEvent].getTime()-new Date().getTime())/1000);
if(seconds>=0){
cntdwn.innerHTML=seconds;
}else{
if(currentEvent<events.length-1){
currentEvent++;
refreshEvent();
}else{
clearTimeout(timer);
// Finished
}
}
}
function refreshEvent(){
document.getElementById('currentDate').innerHTML=events[currentEvent];
}
See it here: http://jsfiddle.net/epUG4/

Sure, out of many countdowns, you can try jCounter and set its fallback to launch another instance of the plugin with another date.
This how you'd do it in jCounter:
$('.counterClass').jCounter({
date: '31 december 2012 23:59:59',
format: 'dd:hh:mm:ss', // display days, hours, minutes and seconds, you can choose here what to display
fallback: function() { $('.counterClass').jCounter({ // fallback for the next countdown
date: '31 march 2013 00:00:00',
format: 'dd:hh:mm:ss', // format
fallback : function() { alert("Happy Birthday!") } // second fallback
}); }
});
Take note that jCounter relies on server-side timezone, the default is 'Europe/London', you can change it by adding (among the other settings), timezone: 'Europe/Oslo', or whatever you please.

Related

Run function on a specific UTC +5:30 Time once

I have a function main().
I want to run this function at times 9:25,1:25,5:25 (considering 12 hour clock time-means 9:30 in the morning as well as at the night).
As the clock hits any of the times mentioned above, the function should run once. Then the function should wait for next time.
Like function runs at 9:30 in the morning (but only once and then stops) then it should wait for 1:25 in the afternoon. I want all this to be coded in Javascript. Is there any scheduler which will help me...
Do something like this:
var times = [[9, 25], [1, 25], [5, 25]];
var lastrun;
function checktime(){
now = new Date(); // Get the current time
if (lastrun != null){
if (now-lastrun > 60000) return; // Wait until a minute has elapsed
// (In order to avoid the function running twice within the same minute)
}
ok = false;
for (time of times){ // Iterate through target times
target = new Date(); // Create a new date where the target time will be held
target.setHours(time[0]); // Set the hour and minute to the target time
target.setMinutes(time[1]);
if (now.getTime() >= target.getTime()){ // Check if the target time has been reached
ok = true;
break;
}
}
if (ok){
lastrun = now; // Store the time when the function was last run
main(); // Run the main function if 'ok' is true
}
}
setInterval(checktime, 1000);

Check if NaN without real variable

I have a TIMER (JSFiddle), that takes a date and time and then counts the hours from the starting date / time the current date / time.
In my fiddle it just counts away from January 01, 2020 14:00:00, but on my website the user is able to change this date. – When he enters invalid information the timer outputs NaN.
When the users enters information, the timer is run again and the user get a new output. – When this happens, I would like to check, if the output is NaN, if so, I would like for another function to ben run, let's call it: timerError() – With this I will reset the timer and tell the user, that his input was invalid.
I know about isNaN(variable), but I don't really have a variable here, so don't know how to check, if the timer output is NaN…
This is my JS:
// TIMER Styling START
function styleChars(targetEl) {
const val = targetEl.textContent;
const chars = val.split('');
targetEl.innerHTML = chars.map(c => `<span class="digit">${c}</span>`).join('');
}
const target = document.querySelector('.value_timer');
console.log(target);
styleChars(target);
// TIMER Styling END
// TIMER START
var timerDate = "January 01, 2020 14:00:00";
function setTimer() {
// Month Day, Year Hour:Minute:Second, id-of-element-container.
countUpFromTime(timerDate, 'countup1');
};
window.onload = setTimer();
function countUpFromTime(countFrom, id) {
let countDate = new Date(countFrom);
let now = new Date();
let timeDifference = (now.getTime() - countDate.getTime());
let value_timer = Math.floor(timeDifference / 1000 / 60 / 60);
let idEl = document.getElementById(id);
idEl.innerHTML = value_timer;
styleChars(idEl); // Pass element to styling function.
clearTimeout(countUpFromTime.interval);
countUpFromTime.interval = setTimeout(function () {
countUpFromTime(countFrom, id);
}, 1000);
}
// TIMER END
The problem is that if timerDate is not a valid date string format, new Date(timerDate) will return an InvalidDate.
In your code, you need to check if countDate which is new Date(timerDate) is an Invalid Date. If so, handle the error accordingly.
You can check by verifying isNaN(countDate.getTime()). It should be true if the Date is invalid.
EDIT: I have created a Fiddle that makes your code compliant with the changes.

javascript compare current time to variable every minute

I have a start date defined in a database and I need to know when the start date is greater then the current time. I've tried using setInterval, but I can't access the updated time outside the setInterval function.
This is what I need to compare the current time to the database variable:
if(startDate > now) {
var status = 'pre';
}
I've tried using setInterval as follows, but I can't access the updated (current time) outside of the setInterval function.
setInterval(function(){
now = moment(new Date()).format();
console.log('time1 ', now); // this works
}, 1000);
console.log('time2 ', now); // this doesn't
What am I doing wrong?
Try this..
var now = new Date();
setInterval(function(){
now = new Date();
console.log('time1 ', now.getHours()+":"+now.getMinutes()+":"+now.getSeconds());
}, 1000);
console.log('time2 ', now.getHours()+":"+now.getMinutes()+":"+now.getSeconds());
});
I ended up using react-interval https://github.com/nkbt/react-interval to accomplish this.

How to check condition on time

Hi i want to put condition on time that only time between 9:00 AM to 5:00 PM has to access.
here is my javascript code for it.
var time = document.getElementsByName('s_time')[0].value;
if user enter tie before 9:00 AM or after 5:00 PM it should give alert. Please help me
User enterd time by using jquery picker.
This is not complete solution, But hope this will help you
Get current time Get in milliseconds,
the time difference between
next execution time minus current time Settimeout with result
millisecons
Here is simple example
You just need to calculate the difference between the current time and the target time and use setTimeout() with that value.
For example, depending on how your target browsers parse dates, you could do the following:
function alert3pm() {
alert("It's 3PM!");
}
var timeAt3pm = new Date("1/31/2011 03:00:00 PM").getTime()
, timeNow = new Date().getTime()
, offsetMillis = timeAt3pm - timeNow;
setTimeout(alert3pm, offsetMillis);
Or rather, instaed of parsing a date (since that's really inconsistent between browsers) you could do something like this:
function getTimeAtHour(hour) {
var t = new Date();
t.setHours(hour);
t.setMinutes(0);
t.setSeconds(0);
t.setMilliseconds(0);
return t;
}
http://www.w3schools.com/jsref/jsref_obj_date.asp
var time = document.getElementsByName('s_time')[0].value || new Date().getTime();
var d = new Date(time);
var currentHour = d.getHours();
if (currentHour < 9 || currentHour >= 17) {
alert('something');
}

In JavaScript, how can I have a function run at a specific time?

I have a website that hosts a dashboard: I can edit the JavaScript on the page and I currently have it refreshing every five seconds.
I am trying to now get a window.print() to run every day at 8 AM.
How could I do this?
JavaScript is not the tool for this. If you want something to run at a specific time every day, you're almost certainly looking for something that runs locally, like python or applescript.
However, let's consider for a moment that JavaScript is your only option. There are a few ways that you could do this, but I'll give you the simplest.
First, you'll have to to create a new Date() and set a checking interval to see whether the hour is 8 (for 8 AM).
This will check every minute (60000 milliseconds) to see if it is eight o'clock:
window.setInterval(function(){ // Set interval for checking
var date = new Date(); // Create a Date object to find out what time it is
if(date.getHours() === 8 && date.getMinutes() === 0){ // Check the time
// Do stuff
}
}, 60000); // Repeat every 60000 milliseconds (1 minute)
It won't execute at exactly 8 o'clock (unless you start running this right on the minute) because it is checking once per minute. You could decrease the interval as much as you'd like to increase the accuracy of the check, but this is overkill as it is: it will check every minute of every hour of every day to see whether it is 8 o'clock.
The intensity of the checking is due to the nature of JavaScript: there are much better languages and frameworks for this sort of thing. Because JavaScript runs on webpages as you load them, it is not meant to handle long-lasting, extended tasks.
Also realize that this requires the webpage that it is being executed on to be open. That is, you can't have a scheduled action occur every day at 8 AM if the page isn't open doing the counting and checking every minute.
You say that you are already refreshing the page every five seconds: if that's true, you don't need the timer at all. Just check every time you refresh the page:
var date = new Date(); // Create Date object for a reference point
if(date.getHours() === 8 && date.getMinutes() === 0 && date.getSeconds() < 10){ // Check the time like above
// Do stuff
}
With this, you also have to check the seconds because you're refreshing every five seconds, so you would get duplicate tasks.
With that said, you might want to do something like this or write an Automator workflow for scheduled tasks on OS X.
If you need something more platform-agnostic, I'd seriously consider taking a look at Python or Bash.
As an update, JavaScript for Automation was introduced with OS X Yosemite, and it seems to offer a viable way to use JavaScript for this sort of thing (although obviously you're not using it in the same context; Apple is just giving you an interface for using another scripting language locally).
If you're on OS X and really want to use JavaScript, I think this is the way to go.
The release notes linked to above appear to be the only existing documentation as of this writing (which is ~2 months after Yosemite's release to the public), but they're worth a read. You can also take a look at the javascript-automation tag for some examples.
I've also found the JXA Cookbook extremely helpful.
You might have to tweak this approach a bit to adjust for your particular situation, but I'll give a general overview.
Create a blank Application in Automator.
Open Automator.app (it should be in your Applications directory) and create a new document.
From the dialog, choose "Application."
Add a JavaScript action.
The next step is to actually add the JavaScript that will be executed. To do that, start by adding a "Run JavaScript" action from the sidebar to the workflow.
Write the JavaScript.
This is where you'll have to know what you want to do before proceeding. From what you've provided, I'm assuming you want to execute window.print() on a page loaded in Safari. You can do that (or, more generally, execute arbitrary JS in a Safari tab) with this:
var safari = Application('Safari');
safari.doJavaScript('window.print();', { in: safari.windows[0].currentTab });
You might have to adjust which of the windows you're accessing depending on your setup.
Save the Application.
Save (File -> Save or ⌘+S) the file as an Application in a location you can find (or iCloud).
Schedule it to run.
Open Calendar (or iCal).
Create a new event and give it an identifiable name; then, set the time to your desired run time (8:00 AM in this case).
Set the event to repeat daily (or weekly, monthly, etc. – however often you'd like it to run).
Set the alert (or alarm, depending on your version) to custom.
Choose "Open file" and select the Application file that you saved.
Choose "At time of event" for the alert timing option.
That's it! The JavaScript code that you wrote in the Application file will run every time that event is set to run. You should be able to go back to your file in Automator and modify the code if needed.
function every8am (yourcode) {
var now = new Date(),
start,
wait;
if (now.getHours() < 7) {
start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 8, 0, 0, 0);
} else {
start = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 8, 0, 0, 0);
}
wait = start.getTime() - now.getTime();
if(wait <= 0) { //If missed 8am before going into the setTimeout
console.log('Oops, missed the hour');
every8am(yourcode); //Retry
} else {
setTimeout(function () { //Wait 8am
setInterval(function () {
yourcode();
}, 86400000); //Every day
},wait);
}
}
To use it:
var yourcode = function () {
console.log('This will print evryday at 8am');
};
every8am(yourcode);
Basically, get the timestamp of now, the timestamp of today 8am if run in time, or tomorrow 8am, then set a interval of 24h to run the code everyday. You can easily change the hour it will run by setting the variable start at a different timestamp.
I don t know how it will be useful to do that thought, as other pointed out, you ll need to have the page open all day long to see that happen...
Also, since you are refreshing every 5 seconds:
function at8am (yourcode) {
var now = new Date(),
start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 8, 0, 0, 0);
if (now.getTime() >= start.getTime() - 2500 && now.getTime() < start.getTime() + 2500) {
yourcode();
}
}
Run it the same way as every8am, it look if 8am is 2.5second ahead or behind, and run if it does.
I try to give my answer hoping it could help:
function startJobAt(hh, mm, code) {
var interval = 0;
var today = new Date();
var todayHH = today.getHours();
var todayMM = today.getMinutes();
if ((todayHH > hh) || (todayHH == hh && todayMM > mm)) {
var midnight = new Date();
midnight.setHours(24,0,0,0);
interval = midnight.getTime() - today.getTime() +
(hh * 60 * 60 * 1000) + (mm * 60 * 1000);
} else {
interval = (hh - todayHH) * 60 * 60 * 1000 + (mm - todayMM) * 60 * 1000;
}
return setTimeout(code, interval);
}
With the startJobAt you can execute only one the task you wish, but if you need to rerun your task It's up to you to recall startJobAt.
bye
Ps
If you need an automatic print operation, with no dialog box, consider to use http://jsprintsetup.mozdev.org/reference.html plugin for mozilla or other plugin for other bowsers.
I will suggest to do it in Web Worker concept, because it is independent of other scripts and runs without affecting the performance of the page.
Create a web worker (demo_worker.js)
var i = 0;
var date = new Date();
var counter = 10;
var myFunction = function(){
i = i + 1;
clearInterval(interval);
if(date.getHours() === 8 && date.getMinutes() === 0) {
counter = 26280000;
postMessage("hello"+i);
}
interval = setInterval(myFunction, counter);
}
var interval = setInterval(myFunction, counter);
Use the web worker in Ur code as follows.
var w;
function startWorker() {
if (typeof(Worker) !== "undefined") {
if (typeof(w) == "undefined") {
w = new Worker("demo_worker.js");
w.onmessage = function(event) {
window.print();
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support HTML5 Web Workers";
}
}
}
I think it will help you.
I have written function which
allows expressing delay in seconds, new Date() format and string's new Date format
allows cancelling timer
Here is code:
"use strict"
/**
This function postpones execution until given time.
#delay might be number or string or `Date` object. If number, then it delay expressed in seconds; if string, then it is parsed with new Date() syntax. Example:
scheduleAt(60, function() {console.log("executed"); }
scheduleAt("Aug 27 2014 16:00:00", function() {console.log("executed"); }
scheduleAt("Aug 27 2014 16:00:00 UTC", function() {console.log("executed"); }
#code function to be executed
#context #optional `this` in function `code` will evaluate to this object; by default it is `window` object; example:
scheduleAt(1, function(console.log(this.a);}, {a: 42})
#return function which can cancel timer. Example:
var cancel=scheduleAt(60, function(console.log("executed.");});
cancel();
will never print to the console.
*/
function scheduleAt(delay, code, context) {
//create this object only once for this function
scheduleAt.conv = scheduleAt.conv || {
'number': function numberInSecsToUnixTs(delay) {
return (new Date().getTime() / 1000) + delay;
},
'string': function dateTimeStrToUnixTs(datetime) {
return new Date(datetime).getTime() / 1000;
},
'object': function dateToUnixTs(date) {
return date.getTime() / 1000;
}
};
var delayInSec = scheduleAt.conv[typeof delay](delay) - (new Date().getTime() / 1000);
if (delayInSec < 0) throw "Cannot execute in past";
if (debug) console.log('executing in', delayInSec, new Date(new Date().getTime() + delayInSec * 1000))
var id = setTimeout(
code,
delayInSec * 1000
);
//preserve as a private function variable setTimeout's id
return (function(id) {
return function() {
clearTimeout(id);
}
})(id);
}
Use this as follows:
scheduleAt(2, function() {
console.log("Hello, this function was delayed 2s.");
});
scheduleAt(
new Date().toString().replace(/:\d{2} /, ':59 '),
function() {
console.log("Hello, this function was executed (almost) at the end of the minute.")
}
);
scheduleAt(new Date(Date.UTC(2014, 9, 31)), function() {
console.log('Saying in UTC time zone, we are just celebrating Helloween!');
})
setInterval(() => {
let t = `${new Date().getHours() > 12 ? new Date().getHours() - 12 : new Date().getHours()}:${new Date().getMinutes().length < 2 ? '0' + new Date().getMinutes() : new Date().getMinutes()}:${new Date().getSeconds().length < 2 ? '0' + new Date().getSeconds() : new Date().getSeconds()} ${new Date().getHours()>12?"pm":"am"}`
console.log(t);
}, 1000);

Categories