News:

Join the Facebook Fan Page.

Main Menu

Live clock in header

Started by Joker™, September 02, 2010, 10:47:59 AM

Previous topic - Next topic

Chalky

#120
Please help, how do I:

a) display the day of the week? (3 letter format preferred)
b) change the month to three letter format?
c) display st or th after the date number? (low priority)

Currently my clock displays as

I wanted 24 hour format with the date in British order and didn't want to display the seconds, so I have played around and my code currently looks like this:


timeformat(time(),'%d %B %Y'), '
<font id="clock">Loading...</font>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
function refrClock()
{
var d=new Date();
var s=d.getSeconds();
var m=d.getMinutes();
var h=d.getHours();
var am_pm;
if (s<10) {s="0" + s}
if (m<10) {m="0" + m}
if (h<10) {h="0" + h}
document.getElementById("clock").innerHTML=h + ":" + m;
setTimeout("refrClock()",1000);
}
refrClock();
// ]]></script> </li>
</ul>';


I have tried adding the variable %D for the day, but that just gives the whole date again as "03/21/12", and %M which should be the three letter month just gives the arbitrary number 8, so I can't figure out which formatting system this is using.

Thanks.

Chalky

Bumpity-bump.  I'm sorry but this is really bugging me, we would rather have a static clock that shows the correct day rather than a live one that doesn't.  Please can anyone tell me what to do just to get the weekday showing, Thu, Fri, etc.?  It must be possible, but feeding in all the D and other letters I can find just isn't helping.

riou

#122
The code would be (of course you can change how it displays and such :p) :

<font id="clock">Loading...</font>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
function refrClock()
{
var d=new Date();
var s=d.getSeconds();
var m=d.getMinutes();
var h=d.getHours();
var day=new Array();
day[0]="Sun";
day[1]="Mon";
day[2]="Tue";
day[3]="Wed";
day[4]="Thu";
day[5]="Fri";
day[6]="Sat";
var a = day[d.getDay()];
var month=new Array();
month[0]="Jan";
month[1]="Feb";
month[2]="Mar";
month[3]="Apr";
month[4]="May";
month[5]="Jun";
month[6]="Jul";
month[7]="Aug";
month[8]="Sep";
month[9]="Oct";
month[10]="Nov";
month[11]="Dec";
var b = month[d.getMonth()];
var c=d.getFullYear();
var e=d.getDate();
var am_pm;
if (s<10) {s="0" + s}
if (m<10) {m="0" + m}
if (h<10) {h="0" + h}
document.getElementById("clock").innerHTML=h + ":" + m + ":" + s + " " + a + " " + b + " " + e + " " + c;
setTimeout("refrClock()",1000);
}
refrClock();
// ]]></script>

Chalky

Wonderful thank you  :D

I just woke up on the sofa so I shall have a play with this tomorrow - thank you :)

TheListener

Quote from: Sabrinova on March 24, 2012, 09:42:14 PM
Wonderful thank you  :D

I just woke up on the sofa so I shall have a play with this tomorrow - thank you :)

Whatever were ya doing on the sofa?

:-[

Chalky

Quote from: Old Fossil on March 24, 2012, 09:44:10 PM

Whatever were ya doing on the sofa?

:-[

Watching telly  - until I fell asleep O:)  :laugh:

riou

Oh as for the st/th I am sure you can do an Array like the day/month and just add like


var date=new Array();
date[21]="21st";
date[24]="24th";
date[25]="25th";
var whatever = date[d.getDate()];

etc,etc,etc for each date

Chalky

I have used your code and my clock is now working brilliantly - thank you  :D

Joker™

Apologies for not taking proper care of this topic. I haven't gone through all of the replies, but is anyone else seeking for help related to this topic?
Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved

TheListener

Dynamite Joker that's what ya need.

Joker™

Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved

ssullivan

I'm even considering adding it to my non-SMF sites as well... it's pretty sleek, and the code looks easy to maintain. Thanks a lot - if only I told you I was using w3schools' clock script (yeah... gonna microwave that code now :) )

PS. Yeah. Your signature made my day, as you could guess :)

Joker™

Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved

chia

So Im using this in my Clan Forum, Problem is, is that it is dynamic, i want it static to MSK Timezone, because that is was the servers / forums & majority of players are from, so we declare all times in MSK.
I know O Difference to Greenwich time (GMT) in hours Example: +0200
P Difference to Greenwich time (GMT) with colon between hours and minutes (added in PHP 5.1.3) Example: +02:00
T Timezone abbreviation Examples: EST, MDT ...
Z Timezone offset in seconds. The offset for timezones west of UTC is always negative, and for those east of UTC is always positive. -43200 through 50400

Are all option for setting a timezone, i am just confused as to where i am supposed to add it.
Atm i have it working as a 24 hour clock, in d, m, y format

    echo '

               <li>',timeformat(time(),'%d, %m, %Y'), '
</br>
<font id="clock">Loading...</font>

<script type="text/javascript">
function refrClock()
{
var d=new Date();
var s=d.getSeconds();
var m=d.getMinutes();
var H=d.getHours();
document.getElementById("clock").innerHTML=H + ":" + m + ":" + s;
setTimeout("refrClock()",1000);
}
refrClock();
</script>
      </li></ul>';

Joker™

Hi,chia

Wow just wow. Just wrote something similar today.

Code (Find:) Select

echo '
<li>', $context['current_time'], '</li>
</ul>';



Code (Replace it with:) Select
echo '

<li>',timeformat(time(),'%B, %d, %Y'), '
<li id="clock">Loading...</li>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
function refrClock()
{
d = new Date();
utc = d.getTime() + (d.getTimezoneOffset() * 60000);
nd = new Date(utc + (3600000*+2));
var s=nd.getSeconds();
var m=nd.getMinutes();
var h=nd.getHours();
var am_pm;
if (s<10) {s="0" + s}
if (m<10) {m="0" + m}
if (h>12) {h-=12;am_pm = "pm"}
else {am_pm="am"}
if (h<10) {h="0" + h}
document.getElementById("clock").innerHTML=h + ":" + m + ":" + s + am_pm;
setTimeout("refrClock()",1000);
}
refrClock();
// ]]></script>
</li></ul>';


Timezone difference between MST and GMT is +2?
Lets see if this can help you as I've bad memory of remembering codes :P.
Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved

kikwan


sayithoney

Quote from: Joker™ on September 09, 2010, 11:02:38 AM
see the original code , you just need to replace this much.

' , $context['current_time'], '

',timeformat(time(),'%B, %d, %Y'), '
<li id="clock">Loading...</li>
<script type="text/javascript">
function refrClock()
{
var d=new Date();
var s=d.getSeconds();
var m=d.getMinutes();
var h=d.getHours();
var am_pm;
if (s<10) {s="0" + s}
if (m<10) {m="0" + m}
if (h>12) {h-=12;am_pm = "pm"}
else {am_pm="am"}
if (h<10) {h="0" + h}
document.getElementById("clock").innerHTML=h + ":" + m + ":" + s + am_pm;
setTimeout("refrClock()",1000);
}
refrClock();
</script>
give it one more try ;)

Cool this works for me... But can u edit this script to show 24 hour format clock?

Joker™

Try this one (Make file backup before)

',timeformat(time(),'%B, %d, %Y'), '
<li id="clock">Loading...</li>
<script type="text/javascript">
function refrClock()
{
var d=new Date();
var s=d.getSeconds();
var m=d.getMinutes();
var h=d.getHours();
var am_pm;
if (s<10) {s="0" + s}
if (m<10) {m="0" + m}

if (h<10) {h="0" + h}
document.getElementById("clock").innerHTML=h + ":" + m + ":" + s;
setTimeout("refrClock()",1000);
}
refrClock();
</script>
Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved

sayithoney

Quote from: Joker™ on December 01, 2012, 02:19:53 PM
Try this one (Make file backup before)

',timeformat(time(),'%B, %d, %Y'), '
<li id="clock">Loading...</li>
<script type="text/javascript">
function refrClock()
{
var d=new Date();
var s=d.getSeconds();
var m=d.getMinutes();
var h=d.getHours();
var am_pm;
if (s<10) {s="0" + s}
if (m<10) {m="0" + m}

if (h<10) {h="0" + h}
document.getElementById("clock").innerHTML=h + ":" + m + ":" + s;
setTimeout("refrClock()",1000);
}
refrClock();
</script>


Yap it works just fine :D Thanks :D


Advertisement: