Pada artikel kali ini kita akan mencoba bereksperimen bagaimana cara
membuat jam digital dengan kode javascript. Jam digital yang akan kita
buat kali ini adalah bersifat live clock, jadi waktu yang ditampilkan
pada browser adalah sesuai dengan pengaturan waktu yang ada di komputer
kita/user (client side).
Jam digital ini akan menampilkan hari ini, bulan, tanggal, tahun, dan waktu saat ini dengan format “Hari mm/dd/yyyy jam:menit:detik PM/AM “.
Oke langsung saja kita tulis kode javascriptnya berikut ini :
Note: Kode dibawah ini ditaruh antara tag “<head>”dan”</head>”
Lalu kita buat lagi satu kode tambahan:
kode ini di taruh pada tag “<body” kode disini “>”
Nah, sekarang bagaimana cara menampilkanya pada halaman website?. Kita buat lagi satu kode berikut :
<div id=”time”></div>
Kode ini berfungsi untuk menampilkan jam digital pada halaman website. Anda tinggal menaruh kode tersebut pada halaman website yang telah ditentukan, tentunya harus diantara tag “<body>” dan “</body>”.
Untuk demo Jam digital yang sudah saya buat klik disini
Jam digital ini akan menampilkan hari ini, bulan, tanggal, tahun, dan waktu saat ini dengan format “Hari mm/dd/yyyy jam:menit:detik PM/AM “.
Oke langsung saja kita tulis kode javascriptnya berikut ini :
Note: Kode dibawah ini ditaruh antara tag “<head>”dan”</head>”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
| <script type="text/javascript">function getCurrentTime()//membuat fungsi baru{var now = new Date(); //membuat objek untuk mengambil waktu saat inivar mySecs = now.getSeconds(); //Untuk detikvar curHour = now.getHours();//untuk jamvar curMin = now.getMinutes();//untuk menitvar day = now.getDay();//untuk harivar date = now.getDate();//tanggalvar year = now.getFullYear();//untuk tahun YYYYvar month = now.getMonth();//untuk bulan “mm”var days = new Array();//membuat objek array untuk menampilkan nama haridays[0] = "Sunday";days[1] = "Monday";days[2] = "Tuesday";days[3] = "Wednesday";days[4] = "Thursday";days[5] = "Friday";days[6] = "Saturday";var suffix = "AM"; if(mySecs < 10){mySecs = "0" + mySecs;} if(curMin < 10){curMin = "0" + curMin;} if(curHour == 12 && curMin >= 1){suffix = "PM";} if(curHour == 24 && curMin >= 1){curHour-= 12;suffix = "AM";} if(curHour > 12){curHour-= 12;suffix = "PM";} document.getElementById('time').innerHTML=(days[day] + " " + (month +1) + "/" + date + "/" + year + " " + curHour + ":" + curMin + ":" + mySecs + " " + suffix);//menampilkan jam digital pada browser } </script> |
1
| onload="setInterval('getCurrentTime()', 1000);/*mengatur interval waktu agar diperbaruhi setiap 1 detik */ |
Nah, sekarang bagaimana cara menampilkanya pada halaman website?. Kita buat lagi satu kode berikut :
<div id=”time”></div>
Kode ini berfungsi untuk menampilkan jam digital pada halaman website. Anda tinggal menaruh kode tersebut pada halaman website yang telah ditentukan, tentunya harus diantara tag “<body>” dan “</body>”.
Untuk demo Jam digital yang sudah saya buat klik disini
0 Comments