4 Replies - 1692 Views - Last Post: 07 June 2012 - 05:09 AM

#1 Joepiooo1988  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 07-June 12

Clock that display text at certain time (loop every day)

Posted 07 June 2012 - 12:04 AM

Hello,

I'm a bit new to jQuery and I have a question. I want to make a clock on my website that wil display the time (prefer analog).

The clock keeps counting 24/7 but at certain times I want to show a message.

Lets say I have some trucks that wil start driving at a specific time. Truck 1 starts at 10:00 (The next truck wil start driving in about an hour) after 10:00 (The truck has left), Truck 2 starts at 13:00 (The next truck will start driving in about 3 hours) and so on...

Is their a way to do this? I dont know where to start...

Thanks for any help:)

Is This A Good Question/Topic? 0
  • +

Replies To: Clock that display text at certain time (loop every day)

#2 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,236
  • Joined: 08-June 10

Re: Clock that display text at certain time (loop every day)

Posted 07 June 2012 - 01:35 AM

Javascript is not the best suited language for a scheduler, though there are more or less efficient ways of doing that.

if you know that the page will be open all the time an appropriate setTimeout() would do it.

since you’re already running a clock, you could check every time the clock counts (i.e. on every tick) if the current time matches the scheduled time (be aware that this takes a lot of resources).

I wonder if a custom event would be a suitable idea ...
Was This Post Helpful? 0
  • +
  • -

#3 Joepiooo1988  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 07-June 12

Re: Clock that display text at certain time (loop every day)

Posted 07 June 2012 - 03:49 AM

Hi

I now got something like this:

        <script type="text/javascript">
		
function show() {
var nowhrs = new Date().getHours();
var nowmins = new Date().getMinutes();
var hrsmins = nowhrs + (nowmins/60);  // decimals of an hour

var schedule = [
['Message 1',[12],[12.7]],  // times are expressed as hours + decimals of an hour, e.g. 30 minutes is .5 hours.
['Message 2',[18],[21.5]],
['Message 3',[19.5],[20.25]]
]

var themessage = "";
for (var i =0; i <schedule.length; i++) {
if ((hrsmins >= schedule[i][1]) && (hrsmins < schedule[i][2])) {
themessage += schedule[i][0]  + "<br>";
document.getElementById("mymessage").innerHTML = themessage;
}
}

}

function startTime() {
showTime();
t = setInterval('showTime()',1000);
}

function showTime() {
var today=new Date();
var hrs=today.getHours();
var mins=today.getMinutes();
var secs=today.getSeconds();
// add a zero in front of numbers < 10
hrs = checkTime(hrs);
mins=checkTime(mins);
document.getElementById('txt').innerHTML=hrs+":"+mins+":"+secs;
}

function checkTime(j) {
if (j<10) {
j="0" + j;
}
return j;
}

</script>


This to load it:

<body onload="startTime(); show(); setInterval(show,60000)">


And this to show it:

<div id="txt"></div>
<div id = "mymessage">No message at the present time</div>


The current time is working and after a certain time when I refresh my page the message is updated. But I want that it updates automatic after a certain time...

The interval is not working. Can somebody help me out?

And I got another question too:)

Is it possible that I have a count down too?

When I set a message on a time and for example the message is shown in an hour he displays : The message wil be shown in 00:59:50.

Thank for any help:)
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,236
  • Joined: 08-June 10

Re: Clock that display text at certain time (loop every day)

Posted 07 June 2012 - 04:40 AM

View PostJoepiooo1988, on 07 June 2012 - 12:49 PM, said:

The current time is working and after a certain time when I refresh my page the message is updated. But I want that it updates automatic after a certain time...

sounds like a job for AJAX.


View PostJoepiooo1988, on 07 June 2012 - 12:49 PM, said:

The interval is not working.

any time you refresh, the countdown starts anew. (I said that scheduling is not that easy)


View PostJoepiooo1988, on 07 June 2012 - 12:49 PM, said:

Is it possible that I have a count down too?

that is actually one of the better approaches you can do.

a countdown means that you have a backward going clock and when that reaches 0, show the message.
Was This Post Helpful? 0
  • +
  • -

#5 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,236
  • Joined: 08-June 10

Re: Clock that display text at certain time (loop every day)

Posted 07 June 2012 - 05:09 AM

untested
// date - a Date object giving the scheduled time
// fn - a function to execute when the time is ready
function CountdownScheduler(date, fn)
{
	// check data types
	if (typeof fn != "function") {
		throw new Error("no message given");
	}
	if (!(date instanceof Date)) {
		throw new Error("no date given");
	}
	if (new Date().getTime() >= date.getTime()) {
		throw new Error("date already overdue");
	}
	// scheduled time in ms
	this.endDate     = date.getTime();
	// function to execute when finished
	this.showMessage = fn;
	// function to display the current time
	// needs to be defined separately (if at all)
	this.displayTime = function() {};
	// interval for countdown
	this.intervalID  = window.setInterval(this.check.bind(this), 1000);
}

CountdownScheduler.prototype.check = function() {
	// if now is at scheduled time (or later)
	if (Date.now() >= this.endDate) {
		// show the scheduler message
		this.showMessage();
		// kill interval countdown
		window.clearInterval(this.intervalID);
	}
	// call time display function
	this.displayTime();
};

Was This Post Helpful? 1
  • +
  • -

Page 1 of 1