NeoTech
Administrator
Number of posts : 119
Age : 34
Location : BeYoND The gOdLiKE....xD
Job/hobbies : xD....WebSItING,cHAttiNG
Shoutout : PleaSe rEGistER to ouR foRUM......xD
<b><font color=blue>Reputation</col :
<b><font color=red>Violation</color :
Registration date : 2008-08-26
 |  Subject: How to make a WEBCLOCK  Sat Aug 30, 2008 9:29 am | |
| Clock Preview: http://clock.fileave.com/clock3.html Step 1: Pixel an image to use as a base for your WebClock.
You can use any Image Editor Softwares like Photoshop.
You can also use a normal image for the base.
Ive made an image already in this tutorial,
And we will be using this: Step2:
Save the contents of this 2 files in your webhosting site like Ripway.
(Clock.HTML and Clock.JS)CLOCK.JS (No need to edit anything here) | Spoiler: | | | ///////////////////////////////////////////////////////////
// "Live Clock" script (3.0)
// By Mark Plachetta (astroboy@zip.com.au)
///////////////////////////////////////////////////////////
var LC_Style=[
"Arial", // clock font
"2", // font size
"black", // font colour
"white", // background colour
"", // html before time
"", // html after time
300, // clock width
0, // 12(1) or 24(0) hour?
1, // update never(0) secondly(1) minutely(2)
3, // no date(0) dd/mm/yy(1) mm/dd/yy(2) DDDD MMMM(3) DDDD MMMM YYYY(4)
0, // abbreviate days/months yes(1) no(0)
null // gmt offset (null to disable)
];
///////////////////////////////////////////////////////////
var LC_IE=(document.all);
var LC_NS=(document.layers);
var LC_N6=(window.sidebar);
var LC_Old=(!LC_IE && !LC_NS && !LC_N6);
var LC_Clocks=new Array();
var LC_DaysOfWeek=[
["Sunday","Sun"],
["Monday","Mon"],
["Tuesday","Tue"],
["Wednesday","Wed"],
["Thursday","Thu"],
["Friday","Fri"],
["Saturday","Sat"]
];
var LC_MonthsOfYear=[
["January","Jan"],
["February","Feb"],
["March","Mar"],
["April","Apr"],
["May","May"],
["June","Jun"],
["July","Jul"],
["August","Aug"],
["September","Sep"],
["October","Oct"],
["November","Nov"],
["December","Dec"]
];
var LC_ClockUpdate=[0,1000,60000];
///////////////////////////////////////////////////////////
function LC_CreateClock(c) {
if(LC_IE||LC_N6){clockTags=''}
else if(LC_NS){clockTags=''}
if(!LC_Old){document.write(clockTags)}
else{LC_UpdateClock(LC_Clocks.length-1)}
}
function LC_InitializeClocks(){
LC_OtherOnloads();
if(LC_Old){return}
for(i=0;i
LC_UpdateClock(i);
if (LC_Clocks[i].Update) {
eval('var '+LC_Clocks[i].Name+'=setInterval("LC_UpdateClock("+'+i+'+")",'+LC_ClockUpdate[LC_Clocks[i].Update]+')');
}
}
}
function LC_UpdateClock(Clock){
var c=LC_Clocks[Clock];
var t=new Date();
if(!isNaN(c.GMT)){
var offset=t.getTimezoneOffset();
if(navigator.appVersion.indexOf('MSIE 3') != -1){offset=offset*(-1)}
t.setTime(t.getTime()+offset*60000);
t.setTime(t.getTime()+c.GMT*3600000);
}
var day=t.getDay();
var md=t.getDate();
var mnth=t.getMonth();
var hrs=t.getHours();
var mins=t.getMinutes();
var secs=t.getSeconds();
var yr=t.getYear();
if(yr<1900){yr+=1900}
if(c.DisplayDate>=3){
md+="";
abbrev="th";
if(md.charAt(md.length-2)!=1){
var tmp=md.charAt(md.length-1);
if(tmp==1){abbrev="st"}
else if(tmp==2){abbrev="nd"}
else if(tmp==3){abbrev="rd"}
}
md+=abbrev;
}
var ampm="";
if(c.Hour12==1){
ampm="AM";
if(hrs>=12){ampm="PM"; hrs-=12}
if(hrs==0){hrs=12}
}
if(hrs<=9){hrs="0"+hrs}
if(mins<=9){mins="0"+mins}
if(secs<=9){secs="0"+secs}
var html = '';
html+=c.OpenTags;
html+=hrs+':'+mins;
if(c.Update==1){html+=':'+secs}
if(c.Hour12){html+=' '+ampm}
if(c.DisplayDate==1){html+=' '+md+'/'+(mnth+1)+'/'+yr}
if(c.DisplayDate==2){html+=' '+(mnth+1)+'/'+md+'/'+yr}
if(c.DisplayDate>=3){html+=' on '+LC_DaysOfWeek[day][c.Abbreviate]+', '+md+' '+LC_MonthsOfYear[mnth][c.Abbreviate]}
if(c.DisplayDate>=4){html+=' '+yr}
html+=c.CloseTags;
html+='';
if(LC_NS){
var l=document.layers[c.Name+"Pos"].document.layers[c.Name].document;
l.open();
l.write(html);
l.close();
}else if(LC_N6||LC_IE){
document.getElementById(c.Name).innerHTML=html;
}else{
document.write(html);
}
}
function LiveClock(a,b,c,d,e,f,g,h,i,j,k,l){
this.Name='LiveClock'+LC_Clocks.length;
this.FntFace=a||LC_Style[0];
this.FntSize=b||LC_Style[1];
this.FntColor=c||LC_Style[2];
this.BackColor=d||LC_Style[3];
this.OpenTags=e||LC_Style[4];
this.CloseTags=f||LC_Style[5];
this.Width=g||LC_Style[6];
this.Hour12=h||LC_Style[7];
this.Update=i||LC_Style[8];
this.Abbreviate=j||LC_Style[10];
this.DisplayDate=k||LC_Style[9];
this.GMT=l||LC_Style[11];
LC_Clocks[LC_Clocks.length]=this;
LC_CreateClock(this);
}
///////////////////////////////////////////////////////////
LC_OtherOnloads=(window.onload)?window.onload:new Function;
window.onload=LC_InitializeClocks;
|
Clock.HTML | Spoiler: | | |
http://clock.fileave.com/CLOCK.SWF">
5; top: 10; width: 80; ; height: 31; ;">
|
Step3&4: Edit the Clock.HTML and there is an instruction to change the variables in your clock.
Change the font color, size, link backs and the co-ordinates to determine the position of the text/time on your clock.
(No need to edit anything with the CLOCK.JS)Step5: Thats it!
Your clock is ready!
Here is the clock we made while writing this tutorial.http://clock.fileave.com/clock3.html My works, http://clock.fileave.com/clock2.html http://clock.fileave.com/clock3.html http://clock.fileave.com/clock4.html http://clock.fileave.com/clock5.html http://clock.fileave.com/clock6.html Just post your works here and we will see if tis tutorial helps you. Credits: Mark Plachetta - For the codes, And Of course, ME - For writing this tutorial. Thats all! Hope it helps. CREDITS TO: NOSIOJ OF THE CRADLE FORUM thnx^^ | |
|
breaker2
Number of posts : 137
Age : 29
Location : Sto. Nino,Meycauayan,Bulacan,PhiliPpInES
Job/hobbies : Surfing Net,Design layout,DoTa
Shoutout : =((........wawa tlga aq
<b><font color=blue>Reputation</col :
<b><font color=red>Violation</color :
Registration date : 2008-08-29
| | Subject: Re: How to make a WEBCLOCK Sun Aug 31, 2008 1:12 am | |
| | |
|
E-june
Number of posts : 20
Age : 32
Location : Ilocos sur
Job/hobbies : drawing/painting/sketching
Shoutout : boom
<b><font color=blue>Reputation</col :
<b><font color=red>Violation</color :
Registration date : 2008-08-31
| | Subject: Re: How to make a WEBCLOCK Tue Sep 02, 2008 3:16 am | |
| can we change the style?
tnx 4 sharing...^^ | |
|
Lead4eva
Number of posts : 11
<b><font color=blue>Reputation</col :
<b><font color=red>Violation</color :
Registration date : 2008-08-26
| | Subject: Re: How to make a WEBCLOCK Wed Sep 03, 2008 9:02 am | |
| | |
|
Sponsored content
| | Subject: Re: How to make a WEBCLOCK | |
| |
|
