Refresh javascript time

Asked by Jaap Bos

If have implemented these lines of code in order to get the date including time (via embedded html). The problem is that the time does not automatically refreshes, i understand that i can use the duration option but then the the time is never truly accurate and it flikkers all the time. Is there an option to overcome this problem in order to get the real time?

<script type="text/javascript">
<!--
var TheFontFace = "Arial";
var TheFontColor = "#000000";
var TheFontSize = "3";
var TheFontStyle = "";
var TheFontSizeTime = "5";
var TheFontStyleTime = "bold";
var FontTagLeft = "";
var FontTagRight = "";

if (TheFontStyle == "bold"){
    FontTagLeft = "<b>";
    FontTagRight ="</b>";}

if (TheFontStyle == "italic"){
    FontTagLeft = "<i>";
    FontTagRight ="</i>";}

if (TheFontStyle == "bolditalic"){
    FontTagLeft = "<b><i>";
    FontTagRight = "</i></b>";}

if (TheFontStyleTime == "bold"){
    FontTagLeftTime = "<b>";
    FontTagRightTime ="</b>";}

if (TheFontStyleTime == "italic"){
    FontTagLeftTime = "<i>";
    FontTagRightTime ="</i>";}

if (TheFontStyleTime == "bolditalic"){
    FontTagLeftTime = "<b><i>";
    FontTagRightTime = "</i></b>";}

var tijd_datum = new Date();
var dag = tijd_datum.getDay(); //dag in woorden
var dag2 = tijd_datum.getDate(); // dag in getal
var maand = tijd_datum.getMonth()+1; // +1 want js begint bij 0 te tellen
var jaar = tijd_datum.getFullYear();

var uur = tijd_datum.getHours();
var minuten = tijd_datum.getMinutes();
var seconden = tijd_datum.getSeconds();

var maandarray = new Array('januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december');
var dagarray = new Array('zondag','maandag','dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag');

var D = "";
D += "<font color='"+TheFontColor+"' face='"+TheFontFace+"' size='"+TheFontSize+"'>";
D += FontTagLeft+(dagarray[dag]+" "+dag2+" "+maandarray[maand]+" "+jaar)+FontTagRight;
D += "</font>";
D += "<font color='"+TheFontColor+"' face='"+TheFontFace+"' size='"+TheFontSizeTime+"'>";
D += FontTagLeftTime+" <br> "+uur+":"+minuten+"</br>"+FontTagRightTime;
D += "</font>";

document.write(D);

//-->
</script>

Question information

Language:
English Edit question
Status:
Solved
For:
Xibo Edit question
Assignee:
No assignee Edit question
Solved by:
Alex Harrington
Solved:
Last query:
Last reply:
Revision history for this message
Alex Harrington (alexharrington) said :
#1

Most people use a flash clock for that. Otherwise you need to add some
kind of timer that ticks periodically and updates your clock text.

I'm not a Javascript expert. You'd probably get more help on a forum
dedicated to that.

Alex

Revision history for this message
Alex Harrington (alexharrington) said :
#2
Revision history for this message
Best Alex Harrington (alexharrington) said :
#3

Or better still this example:
http://www.mikesdotnetting.com/Article/32/Javascript-24-hour-clock

Note that you can't use the onload handler - we provide a method that
does the same job in the script section of the embedded HTML.

So this works for me:

In the Embedded HTML section:
<span id="clock"></span>

And in the script section:
<script type="text/javascript">
function EmbedInit()
{
 // Init will be called when this page is loaded in the client.
 clock();
}

var tick;

function stop() {
  clearTimeout(tick);
}

function clock() {
  var ut=new Date();
  var h,m,s;
  var time=" ";
  h=ut.getHours();
  m=ut.getMinutes();
  s=ut.getSeconds();
  if(s<=9) s="0"+s;
  if(m<=9) m="0"+m;
  if(h<=9) h="0"+h;
  time+=h+":"+m+":"+s;
  document.getElementById('clock').innerHTML=time;
  tick=setTimeout("clock()",1000);
}
</script>

Alex

Revision history for this message
Jaap Bos (mp3speler) said :
#4

Thanks for the tip!
I used the following line of code:

setTimeout("history.go(0);",10000);

and.. It works!

Revision history for this message
Jaap Bos (mp3speler) said :
#5

oh no, the above proposed solution does not entirely solves the problem since the flikkering is now every 10 seconds. i will just use the duration function and set it to 60 seconds, a difference of max. one minute is no problem.

Revision history for this message
Alex Harrington (alexharrington) said :
#6

Why don't you use the code I sent over a few minutes ago - that doesn't
flicker at all and is correct to the second.

Alex

Revision history for this message
Jaap Bos (mp3speler) said :
#7

Sorry for my ignorance! I did not read the part about the script section. This did the trick! I have used the following code to put into the script section (might be interesting to Dutch Xibo users):

<script type="text/javascript">
function EmbedInit()
{
 // Init will be called when this page is loaded in the client.
 clock();
}

var tick;

function stop() {
  clearTimeout(tick);
}

function clock() {
var TheFontFace = "Arial";
var TheFontColor = "#000000";
var TheFontSize = "3";
var TheFontStyle = "";
var TheFontSizeTime = "5";
var TheFontStyleTime = "bold";
var FontTagLeft = "";
var FontTagRight = "";

if (TheFontStyle == "bold"){
    FontTagLeft = "<b>";
    FontTagRight ="</b>";}

if (TheFontStyle == "italic"){
    FontTagLeft = "<i>";
    FontTagRight ="</i>";}

if (TheFontStyle == "bolditalic"){
    FontTagLeft = "<b><i>";
    FontTagRight = "</i></b>";}

if (TheFontStyleTime == "bold"){
    FontTagLeftTime = "<b>";
    FontTagRightTime ="</b>";}

if (TheFontStyleTime == "italic"){
    FontTagLeftTime = "<i>";
    FontTagRightTime ="</i>";}

if (TheFontStyleTime == "bolditalic"){
    FontTagLeftTime = "<b><i>";
    FontTagRightTime = "</i></b>";}

var tijd_datum = new Date();
var dag = tijd_datum.getDay(); //dag in woorden
var dag2 = tijd_datum.getDate(); // dag in getal
var maand = tijd_datum.getMonth()+1; // +1 want js begint bij 0 te tellen
var jaar = tijd_datum.getFullYear();

var uur = tijd_datum.getHours();
var minuten = tijd_datum.getMinutes();
var seconden = tijd_datum.getSeconds();

var maandarray = new Array('januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december');
var dagarray = new Array('zondag','maandag','dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag');

var D = "";
D += "<font color='"+TheFontColor+"' face='"+TheFontFace+"' size='"+TheFontSize+"'>";
D += FontTagLeft+(dagarray[dag]+" "+dag2+" "+maandarray[maand]+" "+jaar)+FontTagRight;
D += "</font>";
D += "<font color='"+TheFontColor+"' face='"+TheFontFace+"' size='"+TheFontSizeTime+"'>";
D += FontTagLeftTime+" <br> "+uur+":"+minuten+"</br>"+FontTagRightTime;
D += "</font>";

document.getElementById('clock').innerHTML=D;
tick=setTimeout("clock()",1000);
}
</script>

Revision history for this message
Jaap Bos (mp3speler) said :
#8

Thanks Alex Harrington, that solved my question.