Cara menggunakan jam analog php

Hallo teman-teman Dumet School, Kembali lagi dengan saya Shelli Ripati di kursus web design. Kali ini saya akan membahas tentang Cara Membuat Jam Analog Dengan Menggunakan Javascript Part 2. Kemarin kita sudah membahas tentang cara membuat tampilan jam analog dengan javascript part 1 dan kali ini kita akan membuat arah jarum jam, menit dan detiknya ya teman-teman.

Langsung saja untuk dapat mengetahui Cara Membuat Jam Analog Dengan Menggunakan Javascript Part 2, kita buat langsung javascriptnya sebagai berikut.

functiondrawClock(){

drawFace(ctx,radius);

drawNumbers(ctx,radius);

drawTime(ctx, radius);

}

Kemarin kita sudah membuat function drawClock, nah disini ada sedikit tambahan di bagian terakhir yaitu drawTimenya. Kemudian jika sudah dilengkapi function drawClocknya, teman-teman bisa langsung membuat function drawTime seperti script di bawah ini teman-teman bisa salin scriptnya.

functiondrawTime(ctx,radius){

varnow=newDate();

varhour= now.getHours();

varminute=now.getMinutes();

varsecond= now.getSeconds();

//hour

hour=hour%12;

hour=(hour*Math.PI/6)+

(minute*Math.PI/(6*60))+

(second*Math.PI/(360*60));

drawHand(ctx,hour,radius*0.5,radius*0.07);

//minute

minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));

drawHand(ctx, minute,radius*0.8,radius*0.07);

// second

second=(second*Math.PI/30);

drawHand(ctx, second,radius*0.9,radius*0.02);

}

Dan langkah terakhir untuk membuat jam analog dengan menggunakan javascript part 2 teman-teman bisa buat function drawHand seperti script di bawah ini.

functiondrawHand(ctx,pos,length,width){

ctx.beginPath();

ctx.lineWidth =width;

ctx.lineCap="round";

ctx.moveTo(0,0);

ctx.rotate(pos);

ctx.lineTo(0,-length);

ctx.stroke();

ctx.rotate(-pos);

}

Nah teman-teman bisa perhatikan scriptnya, jika sudah sesuai semua teman-teman bisa langsung di simpan dengan format html dan lalu di jalankan di browser masing-masing. maka tampilannya akan tampak seperti pada gambar di bawah ini.

Disini kita sudah membahas cara membuat tampilan jam analog dengan menggunakan javascript. Tidak akan sempurna jika jam tersebut berjalan, maka dari itu di pertemuan selanjutnya kita akan membahas tentang cara menjalankan jamnya mulai dari detik, menit dan jam sesuai zona waktunya.

Demikian artikel tentang Cara Membuat Jam Analog Dengan Menggunakan Javascript Part 2. Sampai bertemu lagi di pembahasan berikutnya yaitu tentang Cara Membuat Jam Analog Dengan Menggunakan Javascript Part 3. Semoga ilmu yang saya share dapat bermanfaat dan selamat mencoba teman-teman.

kode php

Cara menggunakan jam analog php

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social