Cara Membuat Jam Digital di Website dengan Javascript

Hello World..
Semangat Pagi,,

Selamat datang di blog saya, kali ini share tentang cara membuat jam digital di website dengan javascript.

Pengertian JavaScript

JavaScript adalah bahasa pemrograman web yang bersifat Client Side Programming Language. Client Side Programming Language adalah tipe bahasa pemrograman yang pemrosesannya dilakukan oleh client. Aplikasi client yang dimaksud merujuk kepada web browser seperti Google Chrome dan Mozilla Firefox.
Jenis bahasa pemrograman Client Side berbeda dengan bahasa pemrograman Server Side seperti PHP, dimana untuk server side seluruh kode program dijalankan di sisi server.
Untuk menjalankan JavaScript, kita hanya membutuhkan aplikasi text editor, dan web browser. JavaScript memiliki fitur: high-level programming language, client-side, loosely tiped, dan berorientasi objek.

Latar Belakang:

Beberapa tahun belakangan ini, JavaScript kembali bersinar berkat kemudahan yang ditawari oleh komunitas programmer yang membuat library JavaScript seperti jQuery. Library ini memudahkan kita membuat program JavaScript untuk semua web browser, dan membuat fitur-fitur canggih yang sebelumnya membutuhkan ribuan baris kode program menjadi sederhana.

Kedepannya, JavaScript akan tetap menjadi kebutuhan programmer, apalagi untuk situs saat ini yang mengharuskan punya banyak fitur modern sebagai standar.

Alat dan Bahan:

Laptop / Komputer.
Sublime text.

Maksud dan Tujuan:

Maksud dan tujuan share materi kali ini, untuk membuat efek rollover baik di gambar maupun teks, dan yang penting juga adalah untuk membuat AJAX.^[8]

Langkah - langkah Pembuatan :

Buat tag html seperti dibawah ini
<html>
<head>

<head>
<body>

</body>
</html>

Setelah itu kopikan kode javascript dibawah ini setelag tag <body> :

<h2>Jam Digital by Dreams Files</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 :

<style>
.clockStyle{cursor: pointer;
    padding: 8px 18px 8px 18px;
    background: #95a5a6;
    color: #fff;
    border: 9px solid #ddd;
    border-radius: 2px;
}

Refrensi: