Develop Reference

JS/TypeScript Generate times between hours

So let's say we have two times:
7:30 - 12:00
So my question is how can I generate an array with times like this:
7:30, 8:00, 8:30, 9:00, 9:30, 10:00, 10:30, 11:00, 11:30
I need this for a booking, so let's say the business will open at 7:30 and every booking that you can make will be 30 min(this time can change, could be one hour or more)
Whats the best way to generate something like this in JS?

Little verbose utility, you can use it..
var getTimeIntervals = function (time1, time2, slotInMinutes, workingHourStart, workingHourEnd) {
time1.setMinutes(0); time1.setSeconds(0);
var arr = [];
var workingHoursStart = workingHourStart;
var workingHourEnds = workingHourEnd;
var workingHourStartFloat = parseFloat("7:30");
var workingHourEndFloat = parseFloat("12:00");
while(time1 < time2){
var generatedSlot = time1.toTimeString().substring(0,5);
var generatedSlotFloat = parseFloat(generatedSlot);
time1.setMinutes(time1.getMinutes() + slotInMinutes);
if(generatedSlotFloat >= workingHourStartFloat && generatedSlotFloat < workingHourEndFloat){
var generatedObject = {
slot: time1.toTimeString().substring(0,5),
timeStamp: new Date(time1.getTime())
};
arr.push(generatedObject);
}
}
return arr;
}
var today = new Date();
var tomrorow = new Date().setDate(today.getDate()+1);
console.log(getTimeIntervals(today, tomorrow, 30, "7:30", "12:00"));
Function getTimeIntervals expects startDate, endDate, slotDurationInMinutes, workingHoursStart and workingHourEnd.
Why I am returning object is because you may need the timestamp of selected slot in your further application use.
Fiddle - https://jsfiddle.net/rahulrulez/t8ezfj2q/

As the comment in the code says, you can remove the 0 before the hours if you don't want it, by removing that line.
If you don't want the end in the array just replace the <= by <in the for loop
function timeArray(start, end){
var start = start.split(":");
var end = end.split(":");
start = parseInt(start[0]) * 60 + parseInt(start[1]);
end = parseInt(end[0]) * 60 + parseInt(end[1]);
var result = [];
for ( time = start; time <= end; time+=30){
result.push( timeString(time));
}
return result;
}
function timeString(time){
var hours = Math.floor(time / 60);
var minutes = time % 60;
if (hours < 10) hours = "0" + hours; //optional
if (minutes < 10) minutes = "0" + minutes;
return hours + ":" + minutes;
}
console.log(timeArray("7:30", "12:00"));

A shorter version:
timeArray = [];
....
let i = 0;
let hour = 8;
let odd: boolean;
do {
odd = false;
if (i % 2 === 0) {
odd = true;
hour--;
}
this.timeArray.push(hour.toString() + (odd ? ":30" : ":00"));
i++;
hour++;
} while (i < 12);
....
Demo

Javascript countdown timer can't set half past hour

I'm trying to use a countdown timer to count to a certain time everyday (monday to friday). So far everything works, except it can only be set to count to a certain hour (based on the 24 hour clock) without a half hour included. So for example, if I wanted to count to 4PM, I'd set var target = 16; but if I wanted 4:30 and I tried to set var target = 1630; it doesn't work. Unfortunately I don't have much experience with javascript, but I believe the problem is either with the way it's evaluating the target time using the getHours function but not sure where to take it from there.
if (document.getElementById('countdownTimer')) {
pad = function(n, len) { // leading 0's
var s = n.toString();
return (new Array( (len - s.length + 1) ).join('0')) + s;
};
function countDown() {
var now = new Date();
if ( (now.getDay() >= 1) && (now.getDay() <= 5) ) { // Monday to Friday only
var target = 15; // 15:00hrs is the cut-off point
if (now.getHours() < target) { // don't do anything if we're past the cut-off point
var hrs = (target - 1) - now.getHours();
if (hrs < 0) hrs = 0;
var mins = 59 - now.getMinutes();
if (mins < 0) mins = 0;
var secs = 59 - now.getSeconds();
if (secs < 0) secs = 0;
var str = pad(hrs, 2) + ':' + pad(mins, 2) + '.<small>' + pad(secs, 2) + '</small>';
document.getElementById('countdownTimer').innerHTML = str;
}
}
}
var timerRunning = setInterval('countDown()', 1000);
}

If you're ok with considering another method, the following javascript will count down (in seconds) to any date in the future (and count up after the date has passed).
// new Date(year, month, day, hours, minutes, seconds, milliseconds)
var target = new Date(2014, 0, 30, 12, 30, 0, 0)
function countdown(id, targetDate){
var today = new Date()
targetDate.setDate(today.getDate())
targetDate.setFullYear(today.getFullYear())
targetDate.setMonth(today.getMonth())
var diffMillis = targetDate - today
if (diffMillis >= 0){
document.getElementById(id).innerHTML = millisToString(diffMillis)
}
}
setInterval(function(){countdown('seconds', target)},1000)
It uses the javascript date object, so you can literally use any date.
Updated example to do:
format the countdown using hours:minutes:seconds etc
stop the timer after the date is reached
Updated: updated code to override the targetDate to today's date.
Example: http://jsfiddle.net/kKx7h/5/

For 4:30PM, try var target = 16.5 instead of var target = 1630;

You now need to add another variable for the minutes. We can have target as an object literal rather than declare two variables for time:
var target={hour: 15, minute:30};
if ( (now.getHours() < target.hour) && () now.getMinutes() < target.minute ){

Javascript Countdown with PHP

I want to have a countdown associated with a particular button on my PHP page and i am using following code based on javascript
But,it resets the target value on page reload,so how to have the same without the target value getting reset.Can i do something with session ??
<html>
<body>
<p>Time remaining: <span id="countdownTimer"><span>00:00.<small>00</small></span></p>
<script type="text/javascript">
if (document.getElementById('countdownTimer')) {
pad = function(n, len) { // leading 0's
var s = n.toString();
return (new Array( (len - s.length + 1) ).join('0')) + s;
};
function countDown() {
var now = new Date();
if ( (now.getDay() >= 0) && (now.getDay() <= 6) ) { // Monday to Friday only
var target = 23; // 15:00hrs is the cut-off point
if (now.getHours() < target) { // don't do anything if we're past the cut-off point
var hrs = (target - 1) - now.getHours();
if (hrs < 0) hrs = 0;
var mins = 59 - now.getMinutes();
if (mins < 0) mins = 0;
var secs = 59 - now.getSeconds();
if (secs < 0) secs = 0;
var str = pad(hrs, 2) + ':' + pad(mins, 2) + '.<small>' + pad(secs, 2) + '</small>';
document.getElementById('countdownTimer').innerHTML = str;
}
}
}
var timerRunning = setInterval('countDown()', 1000);
}
</script>
</body>
</html>

Instead of evaluating your variable 'now' as such:
var now = new Date();
Evaluate it like this (assuming our browser supports LocalStorage):
if (!localStorage.myDate)
localStorage.myDate = (new Date()).toString();
var now = new Date(localStorage.myDate);
This way, we only ever evaluate the current date on first load. After that, we refer to a serialized string version of that date and pass that as an argument when we create our 'now' variable.
If we want to support older browser (cough IE), we can use userData or simply do something very similar with cookies.

So essentially, you want to capture 'now' once, and not have that change, correct?
function getNow(){ //call this rather than use var now = new Date();
if (window.localStorage){
if (!localStorage.now){
localStorage.now = new Date();
}
return localStorage.now;
}else{
return new Date();
}
}
Pardon if I've got a bit of syntax out (I'm not sure if you'd have to convert a date to store it in localStorage), but that's the gist of it. For IE7 and below support you'd need to use cookies, but the concept remains the same.
Also, I think you have a mistake in:
if ( (now.getDay() >= 0) && (now.getDay() <= 6) )
That will always be true, try:
if ( (now.getDay() > 0) && (now.getDay() < 6) )

Show a countdowntimer-script with DOM

I'm fairly new to DOM and the whole HTML and PHP Stuff so I'm seeking some information on how to do this. What I have until now is a Javascript. Now I want/have to use DOM to show this script. (FYI: I'm implementing something for Moodle and this has be done like this)
What I have found out about DOM is that I can change values of different Nodes. The problem I've found myself in is that all the examples I found were like. Click on a button and something happens. That's ok but now I want my script to run every second so I can the person who needs it can see that the time is running down.
I hope I gave you enough information and I hope you can help me. Thank you for trying to help me.
var running = false
var endTime = null
var timerID = null
// totalMinutes the amount of minutes is put into
var totalMinutes = 3;
function startTimer() {
// running is being started and the current time is put into the variable
running = true
now = new Date()
now = now.getTime()
// Variable endTime gets the time plus the maximum time
endTime = now + (1000 * 60 * totalMinutes);
showCountDown()
}
function showCountDown() {
// same as startTimer, time is saved in variable now
var now = new Date()
now = now.getTime()
if (endTime - now <= 0) {
// Variable timerID gets clearTimeout -->http://de.selfhtml.org/javascript/objekte/window.htm#clear_timeout
clearTimeout(timerID)
// boolean running set to false
running = false
alert("Ihr Resultat wird nun ausgewertet!")
} else {
// delta is being calculated
var delta = new Date(endTime - now)
var theMin = delta.getMinutes()
var theSec = delta.getSeconds()
var theTime = theMin
// show seconds and minutes
theTime += ((theSec < 10) ? ":0" : ":") + theSec
document.getElementById('CheckResults').innerHTML = " (Übung in " + theTime + " Minuten abgelaufen)"
if (running) {
timerID = setTimeout("showCountDown()",900)
}
}
}
</script>

You might want to use window.setInterval for a start. Here is a short example. Create a blank html page, put the script into the head section, and the markup into the body section. I wasn't able to post it with proper html and body tags
<script>
function countDownTimer(msecGranularity, output) {
var secRunningTime, startTime, endTime, onFinish, interval;
function heartBeat() {
var diff = endTime - new Date();
output.innerHTML = diff / 1000;
if (diff < 0) {
window.clearInterval(interval);
onFinish();
};
};
this.start = function (secRunningTime, finishHandler) {
onFinish = finishHandler;
startTime = new Date();
endTime = startTime.setSeconds(startTime.getSeconds() + secRunningTime);
interval = window.setInterval(heartBeat, msecGranularity);
}
};
function startTimer(duration, granularity) {
var output = document.createElement("div");
document.getElementById("timerOutputs").appendChild(output);
var t = new countDownTimer(granularity, output);
t.start(duration, function () { output.innerHTML = 'TIMER FINISHED' });
};
</script>
In the HTML place these to start the timer class.
<button onclick="startTimer(60,100)">Start a new 60 seconds timer with 100 msec granularity</button><br />
<button onclick="startTimer(600,1000)">Start a new 600 seconds timer with 1000 msec granularity</button>
<div id="timerOutputs">
</div>

Javascript Countdown Timer for every other Tuesday

I run the site for a radio show that airs every other Tuesday from 6 to 7am.
I'm trying to make a Javascript that will countdown the days, hours, minutes, and seconds till our show is live.
Then, when our show is live, I'd like to replace the countdown timer with an image using PHP. One hour later at 7am, our show is over; then I'd like the PHP script to return to the countdown timer.
I've tried to search around for countdown scripts that auto-update, but haven't found anything so far.
How would I make these scripts?

About a few hours ago i finished developing a javascript timer.
It should do the trick.
function miniTimer(s,callback,opt){
function getParam(value,defaultValue){
return typeof value == 'undefined' ? defaultValue : value;
}
this.s = getParam(s,0);
this.callback = getParam(callback,null);// a callback function that takes the current time in seconds as the first parameter and the formated time as the second
var opt = getParam(opt,{});
this.settings = {
masterCallback : getParam(opt.masterCallback,null),// same as above, but this one is called when the miniTimer finishes it's work (if maxPaceDuration or limitValue is set)
autoplay : getParam(opt.autoplay,false),
limitValue : getParam(opt.limitValue,null),
maxPaceCount : getParam(opt.maxPaceCount,null),
paceDuration : getParam(opt.paceDuration,1000),//milisec,
paceValue : getParam(opt.paceValue,1)//increment with only one second; set to -1 to countdown
};
this.interval = 0;
this.paceCount = 0;
if(this.settings.autoplay)
this.start();
return this;
}
miniTimer.prototype = {
toString : function(){
var d = Math.floor(this.s / (24 * 3600));
var h = Math.floor((this.s - d* 24 * 3600) / 3600);
var m = Math.floor((this.s - d* 24 * 3600 - h * 3600) / 60);
var s = this.s % 60;
if(h <= 9 && h >= 0)
h = "0"+h;
if(m <= 9 && m >= 0)
m = "0"+m;
if(s <= 9 && s >= 0)
s = "0"+s;
var day = d != 1 ? "days" : "day";
return d+" "+day+" "+h+":"+m+":"+s;
},
nextPace : function(){
if((this.settings.maxPaceCount != null && this.settings.maxPaceCount <= this.paceCount)
|| (this.settings.limitValue != null && this.settings.limitValue == this.s))
{
this.stop();
if(this.settings.masterCallback != null)
this.settings.masterCallback(this.s,this.toString());
return;
}
this.paceCount++;
var aux = this.s + this.settings.paceValue;
this.s += this.settings.paceValue;
if(this.callback != null)
this.callback(this.s,this.toString());
return this;
},
start : function(){
var $this = this;
this.interval = setInterval(function(){$this.nextPace();},this.settings.paceDuration);
return this;
},
stop : function(){
clearInterval(this.interval);
return this;
}
}
Now all you have to do is configure the proper callback function:
var el = document.getElementById('timer');
function getNextTuesday(){
var nextTuesday = new Date();
var t = nextTuesday.getDay();
t = t > 2 ? 9 - t : 2 - t;
nextTuesday.setDate(nextTuesday.getDate() + t);
return nextTuesday;
}
var showDuration = 2 * 60 * 60;//2h
var t = new miniTimer(Math.floor((getNextTuesday() - new Date())/1000),function(date,string){
if(date > 0)
el.innerHTML = string;
else
{
if(date <= -showDuration)
t.s = Math.floor((getNextTuesday() - new Date())/1000);
el.innerHTML = "<img src='http://t2.gstatic.com/images?q=tbn:ANd9GcT3CEVtaAYQJ4ALZRmgMHsCA8CG5tdpauLqSMhB66HJP_A0EDPPXw'>";
}
},{autoplay:true,paceValue : -1});
here's a working example : http://jsfiddle.net/gion_13/8wxLP/1/

You'll need to find the GMT time for 7am on the first tuesday the show is on,
and use new Date on the client to convert it to the user's local time.
Once you do that, it is like any other count down.
This example assumes EDT and April 5 for the first show.
(Date.UTC(2011, 3, 5, 11))
<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Small Page</title>
<script>
function counttoShow(){
var A= [], x, d, diff,cd=document.getElementById('countdown'),
cdimg=document.getElementById('onAir'),
onair= new Date(Date.UTC(2011, 3, 5, 11)), now= new Date();
while(onair<now) onair.setDate(onair.getDate()+14);
diff= (onair-now);
if(diff<3600000){
cdimg.style.visibility='visible';
cd.style.visibility='hidden';
}
else{
x= Math.abs(diff-3600000);
d= Math.floor(x/86400000);
if(d> 1){
A.push( d + " days");
x%= 86400000;
}
x= Math.floor(x/1000);
if(x> 3600){
d= Math.floor(x/3600);
A.push(d + " hour" +(d> 1? "s": ""));
x%= 3600;
}
if(x> 60){
d= Math.floor(x/60);
A.push(d + " minute" +(d> 1? "s": ""));
x%= 60;
}
if(x> 0) A.push(x + " second" +(x> 1? "s": ""));
cdimg.style.visibility='hidden';
cd.value= A.join(", ");
}
}
window.onload=function(){
var cdtimer=setInterval(counttoShow,1000);
document.body.ondblclick=function(){
if(cd.timer){
clearInterval(cdtimer);
cdtimer=null;
}
else cdtimer=setInterval(counttoShow,1000);
}
}
</script>
</head>
<body>
<h1>Radio Show</h1>
<p><img id="onAir" src="onair.gif">
<input id="countdown" type="text" size="40" readOnly style="border:none"> until show time.
</p>
</div>
</body>
</html>

This will get you the number of seconds until your next show (assuming your next show is tomorrow). Then you need to find the time from there.
var now = new Date(),
then = new Date( 2011, 3, 9 ),
diff = new Date();
diff.setTime( Math.abs( then.getTime() - now.getTime() ) );
diff.getTime();
From that point, you can set a timeout to run every second to recude the number of seconds displayed by 1, for example.
setTimeout( reduceSeconds );