افزودن ساعت ، روز ، ماه و سال به وبلاگ کار جالبی است خصوصا اگر این ساعت با افکتی جالب همراه با نشانگر ماوس حرکت کند که این کار به کمک کدهای جاوا اسکریپت انجام میشود من این کد را برای شما تهیه کرده ام شما میتوانید کدهای زیر را در داخل تگ وبلاگ خود کپی کنید تا این امکان به وبلاگ شما افزوده شود
من برای راحتی کار شما در کد زیر با زبان فارسی قسمت های اصلی ساعت را مشخص کرده ام تا در صورت تمایل آنرا ویرایش کنید و این امکان را ایده التر کنید
شما میتوانید با کمی دقت از خط 2 تا 35 را ویرایش کنید مثلا در خط دوم که مشخص کننده ی رنگ تاریخ میباشد به جای عبارت B012A8 کد هر رنگ دیگری را وارد کنید
<script type=text/javascript> dCol="B012A8";//رنگ تاریخ. fCol="18F21C";//رنگ شماره های ساعت. sCol="FA0519";//رنگ عقربه ی ثانیه. mCol="1920F7";//رنگ عقربه ی دقیقه. hCol="000000";//رنگ عقربه ی ساعت. ClockHeight=55;//ارتفاع ساعت. ClockWidth=55;//عرض ساعت. ClockFromMouseY=0;//yنسبت مرکز ساعت به نشانگر ماوس روی محور . ClockFromMouseX=80;//xنسبت مرکز ساعت به نشانگر ماوس روی محور. d=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY"); m=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"); date=new Date(); day=date.getDate(); year=date.getYear(); if (year < 2000) year=year+1900; TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year; D=TodaysDate.split(""); H="...";//کارکترهای عقربه ی ساعت. H=H.split(""); M="....";//کارکترهای عقربه ی دقیقه. M=M.split(""); S=".....";//کارکترهای عقربه ی ثانیه. S=S.split(""); Face="1 2 3 4 5 6 7 8 9 10 11 12"; font="Arial"; size=1;//اندازه فونت کارکترهای ساعت. speed=0.2;//سرعت دنبال کردن ساعت. ns=(document.layers); ie=(document.all); Face=Face.split(" "); n=Face.length; a=size*10; ymouse=0; xmouse=0; scrll=0; props="<font face="+font+" size="+size+" color="+fCol+"><B>"; props2="<font face="+font+" size="+size+" color="+dCol+"><B>"; Split=360/n; Dsplit=360/D.length; HandHeight=ClockHeight/4.5 HandWidth=ClockWidth/4.5 HandY=-7; HandX=-2.5; scrll=0; step=0.06; currStep=0; y=new Array();x=new Array();Y=new Array();X=new Array(); for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0} Dy=new Array();Dx=new Array();DY=new Array();DX=new Array(); for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0} if (ns){ for (i=0; i < D.length; i++) document.write("<layer name="nsDate"+i+"" top=0 left=0 height="+a+" width="+a+"><center>"+props2+D[i]+"</font></center></layer>"); for (i=0; i < n; i++) document.write("<layer name="nsFace"+i+"" top=0 left=0 height="+a+" width="+a+"><center>"+props+Face[i]+"</font></center></layer>"); for (i=0; i < S.length; i++) document.write("<layer name=nsSeconds"+i+" top=0 left=0 width=15 height=15><font face=Arial size=3 color="+sCol+"><center><b>"+S[i]+"</b></center></font></layer>"); for (i=0; i < M.length; i++) document.write("<layer name=nsMinutes"+i+" top=0 left=0 width=15 height=15><font face=Arial size=3 color="+mCol+"><center><b>"+M[i]+"</b></center></font></layer>"); for (i=0; i < H.length; i++) document.write("<layer name=nsHours"+i+" top=0 left=0 width=15 height=15><font face=Arial size=3 color="+hCol+"><center><b>"+H[i]+"</b></center></font></layer>"); } if (ie){ document.write("<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">"); for (i=0; i < D.length; i++) document.write("<div id="ieDate" style="position:absolute;top:0px;left:0;height:"+a+";width:"+a+";text-align:center">"+props2+D[i]+"</B></font></div>"); document.write("</div></div>"); document.write("<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">"); for (i=0; i < n; i++) document.write("<div id="ieFace" style="position:absolute;top:0px;left:0;height:"+a+";width:"+a+";text-align:center">"+props+Face[i]+"</B></font></div>"); document.write("</div></div>"); document.write("<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">"); for (i=0; i < H.length; i++) document.write("<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:"+hCol+";text-align:center;font-weight:bold">"+H[i]+"</div>"); document.write("</div></div>"); document.write("<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">"); for (i=0; i < M.length; i++) document.write("<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:"+mCol+";text-align:center;font-weight:bold">"+M[i]+"</div>"); document.write("</div></div>") document.write("<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">"); for (i=0; i < S.length; i++) document.write("<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:"+sCol+";text-align:center;font-weight:bold">"+S[i]+"</div>"); document.write("</div></div>") } (ns)?window.captureEvents(Event.MOUSEMOVE):0; function Mouse(evnt){ ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY; xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX; } (ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse; function ClockAndAssign(){ time = new Date (); secs = time.getSeconds(); sec = -1.57 + Math.PI * secs/30; mins = time.getMinutes(); min = -1.57 + Math.PI * mins/30; hr = time.getHours(); hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360; if (ie){ Od.style.top=window.document.body.scrollTop; Of.style.top=window.document.body.scrollTop; Oh.style.top=window.document.body.scrollTop; Om.style.top=window.document.body.scrollTop; Os.style.top=window.document.body.scrollTop; } for (i=0; i < n; i++){ var F=(ns)?document.layers["nsFace"+i]:ieFace[i].style; F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll; F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180); } for (i=0; i < H.length; i++){ var HL=(ns)?document.layers["nsHours"+i]:ieHours[i].style; HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll; HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs); } for (i=0; i < M.length; i++){ var ML=(ns)?document.layers["nsMinutes"+i]:ieMinutes[i].style; ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll; ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min); } for (i=0; i < S.length; i++){ var SL=(ns)?document.layers["nsSeconds"+i]:ieSeconds[i].style; SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll; SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec); } for (i=0; i < D.length; i++){ var DL=(ns)?document.layers["nsDate"+i]:ieDate[i].style; DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll; DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180); } currStep-=step; } function Delay(){ scrll=(ns)?window.pageYOffset:0; Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed); Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed); for (i=1; i < D.length; i++){ Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed); Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed); } y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed); x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed); for (i=1; i < n; i++) { y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed); x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed); } ClockAndAssign(); setTimeout("Delay()",40); } if (ns||ie)window.onload=Delay;</script>
برای راحتی بیشتر شما عزیزان من چند تا از کد رنگهای مختلف را در ادامه میاورم
سبز
قرمز
آبی
زرد
سیاه
سفید