Artikel

javacript tutorial

Membuat Jam Analog

Oke!! setelah kemarin kita buat hit counter walaupun belum berhasil tapi karena tugas berdasarkan permintaan sang suhu aku lampiran aja yang butuh ama ini jam analog buat variasi di web kamu aja!!!

Ni ada script untuk menampilkan jam analog, semua’a dibuat menggunakan karakter-karakter, tidak menggunakan image.Copy script ini ke notepad and save dengan ektensi html..

<html>
<head>
<title>Jam Analog</title>
<style type=”text/css”>
.jarum{
font-family:’Times New Roman’;
font-size:20px;
font-weight:bold;
position:absolute;
top:0px;
left:0px;
z-index:10;
}
.angka{
font-family:arial;
font-size:9px;
font-weight:bold;
position:absolute;
top:0px;
left:0px;
text-align:center;
z-index:10;
}
</style> <script type=”text/javascript”>
var rdetik=new Array(0,9,18,27,36);
var rmenit=new Array(0,7,14,21,28);
var rjam= new Array(0,6,12,18,24);
var pi=Math.PI;
var yd=new Array;
var xd=new Array;
var ym=new Array;
var xm=new Array;
var yj=new Array;
var xj=new Array;
var ypos=50;
var xpos=60;

sudutdetik=0;
var xdetik=0;
var ydetik=0;

sudutmenit=0;
var xmenit=0;
var ymenit=0;

sudutjam=0;
var xjam=0;
var yjam=0;

function jam(){
var waktu=new Date();
var detik=waktu.getSeconds();
var menit=waktu.getMinutes();
var jam=waktu.getHours();

sudutdetik=-(pi/180*90)+(pi/30*detik);
sudutmenit=-(pi/180*90)+(pi/30*menit);
sudutjam=-(pi/180*90)+(pi/6*jam)+(pi/360*menit);

for(i=0;i<rdetik.length;i++){
yd[i]=Math.round(rdetik[i]*Math.sin(sudutdetik));
xd[i]=Math.round(rdetik[i]*Math.cos(sudutdetik));
ym[i]=Math.round(rmenit[i]*Math.sin(sudutmenit));
xm[i]=Math.round(rmenit[i]*Math.cos(sudutmenit));
yj[i]=Math.round(rjam[i]*Math.sin(sudutjam));
xj[i]=Math.round(rjam[i]*Math.cos(sudutjam));
}

for(i=0;i<rdetik.length;i++){
ydetik=yd[i]+ypos;
xdetik=xd[i]+xpos;
ymenit=ym[i]+ypos;
xmenit=xm[i]+xpos;
yjam=yj[i]+ypos;
xjam=xj[i]+xpos;
eval(‘document.all.iddetik’+i+’.style.top=’+ydetik);
eval(‘document.all.iddetik’+i+’.style.left=’+xdetik);
eval(‘document.all.idmenit’+i+’.style.top=’+ymenit);
eval(‘document.all.idmenit’+i+’.style.left=’+xmenit);
eval(‘document.all.idjam’+i+’.style.top=’+yjam);
eval(‘document.all.idjam’+i+’.style.left=’+xjam);
}

waktu=null;
detik=null;
menit=null;
jam=null;
setTimeout(“jam()”,1000);
}

function angkajam(){
var x=0;
var y=0;
var radius=40;
var sudutangka=150;
for(i=1;i<=12;i++){
x=radius*Math.sin(sudutangka*pi/180);
x+=xpos-2;
y=radius*Math.cos(sudutangka*pi/180);
y+=ypos+10;
sudutangka-=30;
eval(‘document.all.angka’+i+’.style.top=’+y);
eval(‘document.all.angka’+i+’.style.left=’+x);
}
jam();
}
</script>
</head> <body onLoad=”angkajam()”>
<!– ANGKA –>
<div class=”angka” id=”angka1″>1</div>
<div class=”angka” id=”angka2″>2</div>
<div class=”angka” id=”angka3″>3</div>
<div class=”angka” id=”angka4″>4</div>
<div class=”angka” id=”angka5″>5</div>
<div class=”angka” id=”angka6″>6</div>
<div class=”angka” id=”angka7″>7</div>
<div class=”angka” id=”angka8″>8</div>
<div class=”angka” id=”angka9″>9</div>
<div class=”angka” id=”angka10″>10</div>
<div class=”angka” id=”angka11″>11</div>
<div class=”angka” id=”angka12″>12</div>
<!– JAM –>
<div class=”jarum” id=”idjam0″ style=”color:red”>.</div>
<div class=”jarum” id=”idjam1″ style=”color:red”>.</div>
<div class=”jarum” id=”idjam2″ style=”color:red”>.</div>
<div class=”jarum” id=”idjam3″ style=”color:red”>.</div>
<div class=”jarum” id=”idjam4″ style=”color:red”>.</div>
<!– MENIT –>
<div class=”jarum” id=”idmenit0″ style=”color:blue”>.</div>
<div class=”jarum” id=”idmenit1″ style=”color:blue”>.</div>
<div class=”jarum” id=”idmenit2″ style=”color:blue”>.</div>
<div class=”jarum” id=”idmenit3″ style=”color:blue”>.</div>
<div class=”jarum” id=”idmenit4″ style=”color:blue”>.</div>
<!– DETIK –>
<div class=”jarum” id=”iddetik0″ style=”color:black”>.</div>
<div class=”jarum” id=”iddetik1″ style=”color:black”>.</div>
<div class=”jarum” id=”iddetik2″ style=”color:black”>.</div>
<div class=”jarum” id=”iddetik3″ style=”color:black”>.</div>
<div class=”jarum” id=”iddetik4″ style=”color:black”>.</div>
</body>
</html>

%d blogger menyukai ini: