Belajar Javascrpt - Kali ini saya akan membagikan tutorial bagaimana cara membuat jam digital di halaman website dengan javascript. Buka kode editor anda saya menggunakan Adobe DreamWeaver.
Buat tag html seperti dibawah ini
<html>
<head>
<head>
<body>
</body>
</html>
Setelah itu kopikan kode javascript dibawah ini setelag tag
<body> :
<link type="text/css" rel="stylesheet" href="style.css" /><center>
<h2>Jam Digital by Arif AmStyle</h2>
<div id="clockDisplay" class="clockStyle">
</div>
<script type="text/javascript" language="javascript">
function renderTime(){
var currentTime = new Date();
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
if (h == 0){
h = 24;
}
if (h < 10){
h = "0" + h;
}
if (m < 10){
m = "0" + m;
}
if (s < 10){
s = "0" + s;
}
var myClock = document.getElementById('clockDisplay');
myClock.textContent = h + ":" + m + ":" + s + "";
setTimeout ('renderTime()',1000);
}
renderTime();
</script>
Untuk Mempercantik tampilan, sisipkan css dibawah ini
@charset "utf-8";
/* CSS Document */
.clockStyle{
background-color:#000;
border:#999 2px inset;
padding:6px;
color:#0FF;
font-family:"arial black";
font-size:16px
font-weight:bold;
letter-spacing:2px;
display:inline;
}
<html>
<head>
<head>
<body>
</body>
</html>
Setelah itu kopikan kode javascript dibawah ini setelag tag
<body> :
<link type="text/css" rel="stylesheet" href="style.css" /><center>
<h2>Jam Digital by Arif AmStyle</h2>
<div id="clockDisplay" class="clockStyle">
</div>
<script type="text/javascript" language="javascript">
function renderTime(){
var currentTime = new Date();
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
if (h == 0){
h = 24;
}
if (h < 10){
h = "0" + h;
}
if (m < 10){
m = "0" + m;
}
if (s < 10){
s = "0" + s;
}
var myClock = document.getElementById('clockDisplay');
myClock.textContent = h + ":" + m + ":" + s + "";
setTimeout ('renderTime()',1000);
}
renderTime();
</script>
Untuk Mempercantik tampilan, sisipkan css dibawah ini
@charset "utf-8";
/* CSS Document */
.clockStyle{
background-color:#000;
border:#999 2px inset;
padding:6px;
color:#0FF;
font-family:"arial black";
font-size:16px
font-weight:bold;
letter-spacing:2px;
display:inline;
}
EmoticonEmoticon