Script ធ្វើ​ឲ្យ​មាន នាឡិកា និង​ថ្ងៃ-ខែ រត់​តាម​ Mouse Pointer នៅ​ក្នុង​ប្លុក

   កាល​ពី​លើក​មុន​យូរ​មក​ហើយ​នោះ ខ្ញុំ​ធ្លាប់​បាន​បង្ហាញ​ជូន​លោក​អ្នក​នូវ "របៀប​ដាក់​អក្សរ​រត់​តាម Mouse Pointer នៅ​ក្នុង​ប្លុក"។ ដោយ​សារ​តែ​ ម្សិល​មិញ ខ្ញុំ​បាន​រក​ឃើញ Script មួយ ដែល​មាន​លក្ខណៈ​ពិសេស គឺ​វា ធ្វើ​ឲ្យ​មាន​រូប​នាឡិកា (នាឡិកា ដើរ​តាម​ម៉ោង​ក្នុង​កុំព្យូទ័រ​របស់​អ្នក) និង​មាន ថ្ងៃ ខែ​ឆ្នាំ វិល​ព័ទ្ធ​ជុំ​វិញ ពិសេស គឺ​វា​រត់​តាម Mouse Pointer របស់​លោក​អ្នក។

   បន្ទាប់​ពី​បាន​អួត សរសើរ​យ៉ាង​អស់​ចិត្ត​អស់​ចង់​រួច​មក​ហើយ ខ្ញុំ​សូម​បង្ហាញ​ជូន​លោក​អ្នក​អំពី​របៀប​ដាក់​តែ​ម្ដង ដែល​មាន​របៀប​ដាក់​ងាយៗ មិន​ពិបាក​ឡើយ។ ហើយ​បើ​ចំពោះ​គុណ វិបត្តិ​វា​ដែល​កើត​ចំពោះ ប្លុក​វិញ ដូច​ជា​គ្មាន​អ្វី​ជា​ធ្ងន់​ធ្ងរ​នោះ​ឡើយ​បាទ! :D ។ ទោះ​ជា​យ៉ាង​ណា មុន​នឹង​អនុវត្ត សូម​លោក​អ្នក​ [ចុច​ទីនេះ] ដើម្បី​ចូល​ទៅ​មើល​លទ្ធផល​ជាក់​ស្ដែង​។

៙ របៀប​ដាក់​នាឡិកា និង​ថ្ងៃ-ខែ រត់​តាម​ Mouse Pointer នៅ​ក្នុង​ប្លុក ៖
- កត់ត្រា​ចូល​ (Log In) ​ក្នុង​គណនី​ Blogger របស់​លោក​អ្នក​​ជា​មុន​សិន។
- ​ចូល​ទៅ​កាន់​ផ្នែក Layout >> រួច​ចុច​លើ​តំណ​​អក្សរ Add a Gadget នៅ​ទីតាំង​ណាមួយ (ឧទាហរណ៍​សូម​មើល​រូប​ខាង​ក្រោម)

- រមូរ​​ចុះ (scroll down) រក​មើល gadget ដែល​មាន​ឈ្មោះ​ថា HTML/JavaScript រួច​ចុច​​លើ​វា​ដើម្បី​បើក (មើល​រូប​ខាង​ក្រោម​នេះ)

- ចម្លង​កូដ​​ខាង​ក្រោម​​នេះ យក​ទៅ​បិទភ្ជាប់​ក្នុង​ HTML/JavaScript Gadget ហើយ​ចុច​ប៊ូតុង Save។
* បន្ថែម ៖ ចំពោះ​ឈ្មោះ widget មិន​ចាំ​បាច់​ដាក់​​ទេ។

កូដ​ដែល​ត្រូវ​ដាក់​ក្នុង HTML/JavaScript

<style type="text/css">
<!--
/*Do not Alter these. Set for alignment*/
.css1{
position:absolute;top:0px;left:0px;
width:16px;height:16px;
font-family:Arial,sans-serif;
font-size:16px;
text-align:center;
font-weight:bold;
}
.css2{
position:absolute;top:0px;left:0px;
width:10px;height:10px;
font-family:Arial,sans-serif;
font-size:10px;
text-align:center;
}
//-->
</style>
<script language="JavaScript">
<!-- Mouse Follow Clock from Hackpanel -->
<!-- This script and many more from : -->
<!-- http://www.bdcyberspace.tk -->

<!-- Mouse Follow Clock from www.bdcyberspace.tk
//Hide from older browsers
if (document.getElementById&&!document.layers){

// *** Clock colours
dCol='#0000ff';   //date colour.
fCol='#0099ff';   //face colour.
sCol='#330000';   //seconds colour.
mCol='#9900ff';   //minutes colour.
hCol='#CC0000';   //hours colour.

// *** Controls
del=0.6;  //Follow mouse speed.
ref=40;   //Run speed (timeout).

//  Alter nothing below!  Alignments will be lost!
var ieType=(typeof window.innerWidth != 'number');
var docComp=(document.compatMode);
var docMod=(docComp && docComp.indexOf("CSS") != -1);
var ieRef=(ieType && docMod)
?document.documentElement:document.body;
theDays=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");
theMonths=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;
tmpdate=" "+theDays[date.getDay()]+" "+day+" "+theMonths[date.getMonth()]+" "+year;
D=tmpdate.split("");
N='3 4 5 6 7 8 9 10 11 12 1 2';
N=N.split(" ");
F=N.length;
H='...';
H=H.split("");
M='....';
M=M.split("");
S='.....';
S=S.split("");
siz=40;
eqf=360/F;
eqd=360/D.length;
han=siz/5.5;
ofy=-7;
ofx=-3;
ofst=70;
tmr=null;
vis=true;
mouseY=0;
mouseX=0;
dy=new Array();
dx=new Array();
zy=new Array();
zx=new Array();
tmps=new Array();
tmpm=new Array();
tmph=new Array();
tmpf=new Array();
tmpd=new Array();
var sum=parseInt(D.length+F+H.length+M.length+S.length)+1;
for (i=0; i < sum; i++){
dy[i]=0;
dx[i]=0;
zy[i]=0;
zx[i]=0;
}

algn=new Array();
for (i=0; i < D.length; i++){
algn[i]=(parseInt(D[i]) || D[i]==0)?10:9;
document.write('<div id="_date'+i+'" class="css2" style="font-size:'+algn[i]+'px;color:'+dCol+'">'+D[i]+'</div>');
tmpd[i]=document.getElementById("_date"+i).style;
}
for (i=0; i < F; i++){
document.write('<div id="_face'+i+'" class="css2" style="color:'+fCol+'">'+N[i]+'</div>');
tmpf[i]=document.getElementById("_face"+i).style;
}
for (i=0; i < H.length; i++){
document.write('<div id="_hours'+i+'" class="css1" style="color:'+hCol+'">'+H[i]+'</div>');
tmph[i]=document.getElementById("_hours"+i).style;
}
for (i=0; i < M.length; i++){
document.write('<div id="_minutes'+i+'" class="css1" style="color:'+mCol+'">'+M[i]+'</div>');
tmpm[i]=document.getElementById("_minutes"+i).style;
}
for (i=0; i < S.length; i++){
document.write('<div id="_seconds'+i+'" class="css1" style="color:'+sCol+'">'+S[i]+'</div>');
tmps[i]=document.getElementById("_seconds"+i).style;       
}

function onoff(){
if (vis){
 vis=false;
 document.getElementById("control").value="Clock On";
 }
else{
 vis=true;
 document.getElementById("control").value="Clock Off";
 Delay();
 }
kill();
}

function kill(){
if (vis)
 document.onmousemove=mouse;
else
 document.onmousemove=null;
}

function mouse(e){
var msy = (!ieType)?window.pageYOffset:0;
if (!e) e = window.event;  
 if (typeof e.pageY == 'number'){
  mouseY = e.pageY + ofst - msy;
  mouseX = e.pageX + ofst;
 }
 else{
  mouseY = e.clientY + ofst - msy;
  mouseX = e.clientX + ofst;
 }
if (!vis) kill();
}
document.onmousemove=mouse;

function winDims(){
winH=(ieType)?ieRef.clientHeight:window.innerHeight;
winW=(ieType)?ieRef.clientWidth:window.innerWidth;
}
winDims();
window.onresize=new Function("winDims()");

function ClockAndAssign(){
time = new Date();
secs = time.getSeconds();
sec = Math.PI * (secs-15) / 30;
mins = time.getMinutes();
min = Math.PI * (mins-15) / 30;
hrs = time.getHours();
hr = Math.PI * (hrs-3) / 6 + Math.PI * parseInt(time.getMinutes()) / 360;

for (i=0; i < S.length; i++){
 tmps[i].top=dy[D.length+F+H.length+M.length+i]+ofy+(i*han)*Math.sin(sec)+scrollY+"px";
 tmps[i].left=dx[D.length+F+H.length+M.length+i]+ofx+(i*han)*Math.cos(sec)+"px";
 }
for (i=0; i < M.length; i++){
 tmpm[i].top=dy[D.length+F+H.length+i]+ofy+(i*han)*Math.sin(min)+scrollY+"px";
 tmpm[i].left=dx[D.length+F+H.length+i]+ofx+(i*han)*Math.cos(min)+"px";
 }
for (i=0; i < H.length; i++){
 tmph[i].top=dy[D.length+F+i]+ofy+(i*han)*Math.sin(hr)+scrollY+"px";
 tmph[i].left=dx[D.length+F+i]+ofx+(i*han)*Math.cos(hr)+"px";
 }
for (i=0; i < F; i++){
 tmpf[i].top=dy[D.length+i]+siz*Math.sin(i*eqf*Math.PI/180)+scrollY+"px";
 tmpf[i].left=dx[D.length+i]+siz*Math.cos(i*eqf*Math.PI/180)+"px";
 }
for (i=0; i < D.length; i++){
 tmpd[i].top=dy[i]+siz*1.5*Math.sin(-sec+i*eqd*Math.PI/180)+scrollY+"px";
 tmpd[i].left=dx[i]+siz*1.5*Math.cos(-sec+i*eqd*Math.PI/180)+"px";
 }
if (!vis)clearTimeout(tmr);
}

buffW=(ieType)?80:90;
function Delay(){
scrollY=(ieType)?ieRef.scrollTop:window.pageYOffset;
if (!vis){
 dy[0]=-100;
 dx[0]=-100;
}
else{
 zy[0]=Math.round(dy[0]+=((mouseY)-dy[0])*del);
 zx[0]=Math.round(dx[0]+=((mouseX)-dx[0])*del);
}
for (i=1; i < sum; i++){
 if (!vis){
  dy[i]=-100;
  dx[i]=-100;
 }
 else{
  zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del);
  zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del);
 }
if (dy[i-1] >= winH-80) dy[i-1]=winH-80;
if (dx[i-1] >= winW-buffW) dx[i-1]=winW-buffW;
}

tmr=setTimeout('Delay()',ref);
ClockAndAssign();
}
window.onload=Delay;
}
//-->
</script>

* ជា​ទី​បញ្ចប់ ការ​ដាក់​ នាឡិកា និង​ថ្ងៃ-ខែ រត់​តាម​ Mouse Pointer នៅ​ក្នុង​ប្លុក របស់​លោក​អ្នក​បាន​ជោគ​ជ័យ​ហើយ​បាទ :D។ សូម​អរគុណ ចំពោះ​ការ​តាម​ដាន​ទស្សនា​ប្លុក​ដ៏​តូច​មួយ​នេះ។

អត្ថបទស្រដៀងគ្នា:

Tweet