Para sobat blogger yang hobi nya mendesain web ataupun seorang blogger mungkin tidak asing lagi dengan instilah javascript, itu lohhh yang rumusnya panjang dan susah abis. nah kali ini sayang akan memberikan code untuk tampilan jam Analog Statis menggunakan javascript yang bisa sobat gunakan untuk tanmbahan Gadget pada web maupun blog sobat. untuk lebih mudahnya sobat langsung aja copy script dibawah ini, dan bagi yang sudah ahli tinggal ganti-ganti perintahnya aja deh dijamin seruh abis.
<html>
<title>Jam AnaloG Statis</title>
<head>
</head>
<body>
<script language="JavaScript">
fJam='444444'; //warna jam
sJam='FF0000'; //warna untuk detik
mJam='444444'; //warna untuk menit
hJam='444444'; //warna untuk jam
Yjam=30; //Tinggi Jam
Xjam=30; //Lebar Jam
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
NS4=(document.layers);
NS6=(document.getElementById&&!document.all);
IE4=(document.all);
Ypos=0;
Xpos=0;
dots=12;
Split=360/dots;
if (NS6){
for (i=1; i < dots+1; i++){
document.write('<div id="n6Digits'+i+'" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:#'+fJam+';text-align:center;padding-top:10px">'+i+'</div>');
}
for (i=0; i < M.length; i++){
document.write('<div id="Ny'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+mJam+'"></div>');
}
for (i=0; i < H.length; i++){
document.write('<div id="Nz'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+hJam+'"></div>');
}
for (i=0; i < S.length; i++){
document.write('<div id="Nx'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+sJam+'"></div>');
}
}
if (NS4){
dgts='1 2 3 4 5 6 7 8 9 10 11 12';
dgts=dgts.split(' ')
for (i=0; i < dots; i++){
document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30 width=30><center><font face=Arial size=1 color='+fJam+'>'+dgts[i]+'</font></center></layer>');
}
for (i=0; i < M.length; i++){
document.write('<layer name=ny'+i+' top=0 left=0 bgcolor='+mJam+' clip="0,0,2,2"></layer>');
}
for (i=0; i < H.length; i++){
document.write('<layer name=nz'+i+' top=0 left=0 bgcolor='+hJam+' clip="0,0,2,2"></layer>');
}
for (i=0; i < S.length; i++){
document.write('<layer name=nx'+i+' top=0 left=0 bgcolor='+sJam+' clip="0,0,2,2"></layer>');
}
}
if (IE4){
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=1; i < dots+1; i++){
document.write('<div id="ieDigits" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:'+fJam+';text-align:center;padding-top:10px">'+i+'</div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++){
document.write('<div id=y style="position:absolute;width:2px;height:2px;font-size:2px;background:'+mJam+'"></div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++){
document.write('<div id=z style="position:absolute;width:2px;height:2px;font-size:2px;background:'+hJam+'"></div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++){
document.write('<div id=x style="position:absolute;width:2px;height:2px;font-size:2px;background:'+sJam+'"></div>');
}
document.write('</div></div>')
}
function jamanalog(){
waktu = new Date ();
detik = waktu.getSeconds();
dtk = -1.57 + Math.PI * detik/30;
menit = waktu.getMinutes();
mnt = -1.57 + Math.PI * menit/30;
jam = waktu.getHours();
jams = -1.57 + Math.PI * jam/6 + Math.PI*parseInt(waktu.getMinutes())/360;
if (NS6){
Ypos=window.pageYOffset+window.innerHeight-Yjam-25;
Xpos=window.pageXOffset+window.innerWidth-Xjam-30;
for (i=1; i < dots+1; i++){
document.getElementById("n6Digits"+i).style.top=Ypos-15+Yjam*Math.sin(-1.56 +i *Split*Math.PI/180)
document.getElementById("n6Digits"+i).style.left=Xpos-15+Xjam*Math.cos(-1.56 +i*Split*Math.PI/180)
}
for (i=0; i < S.length; i++){
document.getElementById("Nx"+i).style.top=Ypos+i*Yjam/4.1*Math.sin(dtk);
document.getElementById("Nx"+i).style.left=Xpos+i*Xjam/4.1*Math.cos(dtk);
}
for (i=0; i < M.length; i++){
document.getElementById("Ny"+i).style.top=Ypos+i*Yjam/4.1*Math.sin(mnt);
document.getElementById("Ny"+i).style.left=Xpos+i*Xjam/4.1*Math.cos(mnt);
}
for (i=0; i < H.length; i++){
document.getElementById("Nz"+i).style.top=Ypos+i*Yjam/4.1*Math.sin(jams);
document.getElementById("Nz"+i).style.left=Xpos+i*Xjam/4.1*Math.cos(jams);
}
}
if (NS4){
Ypos=window.pageYOffset+window.innerHeight-Yjam-20;
Xpos=window.pageXOffset+window.innerWidth-Xjam-30;
for (i=0; i < dots; ++i){
document.layers["nsDigits"+i].top=Ypos-5+Yjam*Math.sin(-1.045 +i*Split*Math.PI/180)
document.layers["nsDigits"+i].left=Xpos-15+Xjam*Math.cos(-1.045 +i*Split*Math.PI/180)
}
for (i=0; i < S.length; i++){
document.layers["nx"+i].top=Ypos+i*Yjam/4.1*Math.sin(dtk);
document.layers["nx"+i].left=Xpos+i*Xjam/4.1*Math.cos(dtk);
}
for (i=0; i < M.length; i++){
document.layers["ny"+i].top=Ypos+i*Yjam/4.1*Math.sin(mnt);
document.layers["ny"+i].left=Xpos+i*Xjam/4.1*Math.cos(mnt);
}
for (i=0; i < H.length; i++){
document.layers["nz"+i].top=Ypos+i*Yjam/4.1*Math.sin(jams);
document.layers["nz"+i].left=Xpos+i*Xjam/4.1*Math.cos(jams);
}
}
if (IE4){
Ypos=document.body.scrollTop+window.document.body.clientHeight-Yjam-20;
Xpos=document.body.scrollLeft+window.document.body.clientWidth-Xjam-20;
for (i=0; i < dots; ++i){
ieDigits[i].style.pixelTop=Ypos-15+Yjam*Math.sin(-1.045 +i *Split*Math.PI/180)
ieDigits[i].style.pixelLeft=Xpos-15+Xjam*Math.cos(-1.045 +i *Split*Math.PI/180)
}
for (i=0; i < S.length; i++){
x[i].style.pixelTop =Ypos+i*Yjam/4.1*Math.sin(dtk);
x[i].style.pixelLeft=Xpos+i*Xjam/4.1*Math.cos(dtk);
}
for (i=0; i < M.length; i++){
y[i].style.pixelTop =Ypos+i*Yjam/4.1*Math.sin(mnt);
y[i].style.pixelLeft=Xpos+i*Xjam/4.1*Math.cos(mnt);
}
for (i=0; i < H.length; i++){
z[i].style.pixelTop =Ypos+i*Yjam/4.1*Math.sin(jams);
z[i].style.pixelLeft=Xpos+i*Xjam/4.1*Math.cos(jams);
}
}
setTimeout('jamanalog()',100);
}
jamanalog();
</script>
</body>
</html>
<title>Jam AnaloG Statis</title>
<head>
</head>
<body>
<script language="JavaScript">
fJam='444444'; //warna jam
sJam='FF0000'; //warna untuk detik
mJam='444444'; //warna untuk menit
hJam='444444'; //warna untuk jam
Yjam=30; //Tinggi Jam
Xjam=30; //Lebar Jam
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
NS4=(document.layers);
NS6=(document.getElementById&&!document.all);
IE4=(document.all);
Ypos=0;
Xpos=0;
dots=12;
Split=360/dots;
if (NS6){
for (i=1; i < dots+1; i++){
document.write('<div id="n6Digits'+i+'" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:#'+fJam+';text-align:center;padding-top:10px">'+i+'</div>');
}
for (i=0; i < M.length; i++){
document.write('<div id="Ny'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+mJam+'"></div>');
}
for (i=0; i < H.length; i++){
document.write('<div id="Nz'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+hJam+'"></div>');
}
for (i=0; i < S.length; i++){
document.write('<div id="Nx'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+sJam+'"></div>');
}
}
if (NS4){
dgts='1 2 3 4 5 6 7 8 9 10 11 12';
dgts=dgts.split(' ')
for (i=0; i < dots; i++){
document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30 width=30><center><font face=Arial size=1 color='+fJam+'>'+dgts[i]+'</font></center></layer>');
}
for (i=0; i < M.length; i++){
document.write('<layer name=ny'+i+' top=0 left=0 bgcolor='+mJam+' clip="0,0,2,2"></layer>');
}
for (i=0; i < H.length; i++){
document.write('<layer name=nz'+i+' top=0 left=0 bgcolor='+hJam+' clip="0,0,2,2"></layer>');
}
for (i=0; i < S.length; i++){
document.write('<layer name=nx'+i+' top=0 left=0 bgcolor='+sJam+' clip="0,0,2,2"></layer>');
}
}
if (IE4){
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=1; i < dots+1; i++){
document.write('<div id="ieDigits" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:'+fJam+';text-align:center;padding-top:10px">'+i+'</div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++){
document.write('<div id=y style="position:absolute;width:2px;height:2px;font-size:2px;background:'+mJam+'"></div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++){
document.write('<div id=z style="position:absolute;width:2px;height:2px;font-size:2px;background:'+hJam+'"></div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++){
document.write('<div id=x style="position:absolute;width:2px;height:2px;font-size:2px;background:'+sJam+'"></div>');
}
document.write('</div></div>')
}
function jamanalog(){
waktu = new Date ();
detik = waktu.getSeconds();
dtk = -1.57 + Math.PI * detik/30;
menit = waktu.getMinutes();
mnt = -1.57 + Math.PI * menit/30;
jam = waktu.getHours();
jams = -1.57 + Math.PI * jam/6 + Math.PI*parseInt(waktu.getMinutes())/360;
if (NS6){
Ypos=window.pageYOffset+window.innerHeight-Yjam-25;
Xpos=window.pageXOffset+window.innerWidth-Xjam-30;
for (i=1; i < dots+1; i++){
document.getElementById("n6Digits"+i).style.top=Ypos-15+Yjam*Math.sin(-1.56 +i *Split*Math.PI/180)
document.getElementById("n6Digits"+i).style.left=Xpos-15+Xjam*Math.cos(-1.56 +i*Split*Math.PI/180)
}
for (i=0; i < S.length; i++){
document.getElementById("Nx"+i).style.top=Ypos+i*Yjam/4.1*Math.sin(dtk);
document.getElementById("Nx"+i).style.left=Xpos+i*Xjam/4.1*Math.cos(dtk);
}
for (i=0; i < M.length; i++){
document.getElementById("Ny"+i).style.top=Ypos+i*Yjam/4.1*Math.sin(mnt);
document.getElementById("Ny"+i).style.left=Xpos+i*Xjam/4.1*Math.cos(mnt);
}
for (i=0; i < H.length; i++){
document.getElementById("Nz"+i).style.top=Ypos+i*Yjam/4.1*Math.sin(jams);
document.getElementById("Nz"+i).style.left=Xpos+i*Xjam/4.1*Math.cos(jams);
}
}
if (NS4){
Ypos=window.pageYOffset+window.innerHeight-Yjam-20;
Xpos=window.pageXOffset+window.innerWidth-Xjam-30;
for (i=0; i < dots; ++i){
document.layers["nsDigits"+i].top=Ypos-5+Yjam*Math.sin(-1.045 +i*Split*Math.PI/180)
document.layers["nsDigits"+i].left=Xpos-15+Xjam*Math.cos(-1.045 +i*Split*Math.PI/180)
}
for (i=0; i < S.length; i++){
document.layers["nx"+i].top=Ypos+i*Yjam/4.1*Math.sin(dtk);
document.layers["nx"+i].left=Xpos+i*Xjam/4.1*Math.cos(dtk);
}
for (i=0; i < M.length; i++){
document.layers["ny"+i].top=Ypos+i*Yjam/4.1*Math.sin(mnt);
document.layers["ny"+i].left=Xpos+i*Xjam/4.1*Math.cos(mnt);
}
for (i=0; i < H.length; i++){
document.layers["nz"+i].top=Ypos+i*Yjam/4.1*Math.sin(jams);
document.layers["nz"+i].left=Xpos+i*Xjam/4.1*Math.cos(jams);
}
}
if (IE4){
Ypos=document.body.scrollTop+window.document.body.clientHeight-Yjam-20;
Xpos=document.body.scrollLeft+window.document.body.clientWidth-Xjam-20;
for (i=0; i < dots; ++i){
ieDigits[i].style.pixelTop=Ypos-15+Yjam*Math.sin(-1.045 +i *Split*Math.PI/180)
ieDigits[i].style.pixelLeft=Xpos-15+Xjam*Math.cos(-1.045 +i *Split*Math.PI/180)
}
for (i=0; i < S.length; i++){
x[i].style.pixelTop =Ypos+i*Yjam/4.1*Math.sin(dtk);
x[i].style.pixelLeft=Xpos+i*Xjam/4.1*Math.cos(dtk);
}
for (i=0; i < M.length; i++){
y[i].style.pixelTop =Ypos+i*Yjam/4.1*Math.sin(mnt);
y[i].style.pixelLeft=Xpos+i*Xjam/4.1*Math.cos(mnt);
}
for (i=0; i < H.length; i++){
z[i].style.pixelTop =Ypos+i*Yjam/4.1*Math.sin(jams);
z[i].style.pixelLeft=Xpos+i*Xjam/4.1*Math.cos(jams);
}
}
setTimeout('jamanalog()',100);
}
jamanalog();
</script>
</body>
</html>
Untuk sobat yang pengen jam Analog statis nya sesuai dengan selerah dapat mengganti pengaturan umunya pada script
fJam='444444'; //warna jam
sJam='FF0000'; //warna untuk detik
mJam='444444'; //warna untuk menit
hJam='444444'; //warna untuk jam
Yjam=30; //Tinggi Jam
Xjam=30; //Lebar Jam
sJam='FF0000'; //warna untuk detik
mJam='444444'; //warna untuk menit
hJam='444444'; //warna untuk jam
Yjam=30; //Tinggi Jam
Xjam=30; //Lebar Jam
yang telah ada pada javascript diatas, semoga bermanfaat bagi para sobat.
