Menampilkan Tanggal dan Waktu (Aktif) dengan JavaScript

Saat ini kita akan mencoba menampilkannya dengan JavaScript. Dengan JavaScript waktu yang akan kita tampilkan akan terlihat berjalan atau aktif.

Silahkan teman-teman ketik source code seperti dibawah ini:

Cara 1 :

<!DOCTYPE html>
<html>
<head>
 <title>Jam (Aktif) With JavaScript</title>
</head>
<body>
 <!-- Menampilkan Jam (Aktif) -->
 <div id="clock">
</div>
<script type="text/javascript">
  <!--
  function showTime() {
      var a_p = "";
      var today = new Date();
      var curr_hour = today.getHours();
      var curr_minute = today.getMinutes();
      var curr_second = today.getSeconds();
      if (curr_hour < 12) {
          a_p = "AM";
      } else {
          a_p = "PM";
      }
      if (curr_hour == 0) {
          curr_hour = 12;
      }
      if (curr_hour > 12) {
          curr_hour = curr_hour - 12;
      }
      curr_hour = checkTime(curr_hour);
      curr_minute = checkTime(curr_minute);
      curr_second = checkTime(curr_second);
   document.getElementById('clock').innerHTML=curr_hour + ":" + curr_minute + ":" + curr_second + " " + a_p;
      }

  function checkTime(i) {
      if (i < 10) {
          i = "0" + i;
      }
      return i;
  }
  setInterval(showTime, 500);
  //-->
  </script>

  <!-- Menampilkan Hari, Bulan dan Tahun -->
  <br>
  <script type='text/javascript'>
   <!--
   var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
   var myDays = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum'at', 'Sabtu'];
   var date = new Date();
   var day = date.getDate();
   var month = date.getMonth();
   var thisDay = date.getDay(),
       thisDay = myDays[thisDay];
   var yy = date.getYear();
   var year = (yy < 1000) ? yy + 1900 : yy;
   document.write(thisDay + ', ' + day + ' ' + months[month] + ' ' + year);
   //-->
  </script>

</body>
</html>

Mungkin agak sedikit membingungkan bagi teman-teman yang baru mengenal JavaScript.

Dari contoh diatas saya mencoba menampilkan jam (aktif) serta skript pada baris berikutnya saya mencoba menampilkan hari, tanggal bulan dan tahun.

Cara 2 :

<script>
    var mydate=new Date()
    var year=mydate.getYear()
    if (year < 1000)
    year+=1900
    var day=mydate.getDay()
    var month=mydate.getMonth()
    var daym=mydate.getDate()
    if (daym<10)
    daym="0"+daym
    var dayarray=new Array ("Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu")
    var montharray=new Array("Januari","Februari","Maret","April","Mei", "Juni","Juli", "Agustus","September","Oktober","November","Desember")
    document.write("<p>"+dayarray[day]+", "+daym+" "+montharray[month]+" "+year+"</p>
")
    </script>

<span id="Variasiblogger"></span>
    <script type="text/javascript">
    //<![CDATA[
    function showclock(){
    var digital = new Date();
    var hours=digital.getHours();
    var minutes=digital.getMinutes();
    var seconds=digital.getSeconds();
    var dn='AM';
    if (hours>12) {
    dn='PM';
    hours=hours-12;
    }
    if (hours==0) hours=12;
    if (minutes<=9) minutes='0'+minutes;
    if (seconds<=9) seconds='0'+seconds;

    miReloj='<b><span style="color:#000;font-size:12px;">'
    + hours + '</span> : <span style="color:#000;font-size:12px;">'
    + minutes + '</span> : <span style="color:#000;font-size:12px;">'
    + seconds + '</span></b><span style="color:#000;font-size:12px;margin-left:5px;">'
    + dn + '</span>';
    document.getElementById('Variasiblogger').innerHTML=miReloj;
    //
    setTimeout('showclock()',1000);
    }
    window.onload=showclock
    //]]>
    </script>

Kemudian silahkan sobat pilih kode script di atas akan menambahkan widget jam dan tanggal diposisi sebelah mana ? ,Untuk cara menambahkan widget di blogspot ini saya akan memberikan contoh misalnya sobat ingin menambahkan Gadget tersebut di sidebar , Caranya adalah sebagai berikut :

- kemudian klik Tata Letak pada Dashboard blogs sobat

- klik Tambahkan Gadget lalu klik HTML/JavaScript , Nah disitu silahkan pada kotak Gadget HTML Copy paste kode script widget jam dan tanggal di atas, dan jangan lupa klik simpan.

Demikian penjelasan saya mengenai Bagaimana Cara Memasang widget Jam dan Tanggal di blogs dan web, dengan adanya widget jam dan tanggal tersebut di web atau blogs sobat , sekarang sudah mempunyai jam sebagai penunjuk waktu dan juga mempunyai sebuah kalender yang menghiasi blogs dan web untuk mengingatkan tanggal kepada sobat.

Semoga artikel ini bisa bermanfaat untuk sobat yang sedang belajar desain atau menghiasi blogs dan web nya, dan untuk contoh widget Jam dan Tanggalnya sobat bisa klik DEMO, agar bisa mengetahui tampilan widget tersebut.

Teman-teman dapat mencobanya, sampai berjumpa lagi di tutorial berikutnya ya 🙂

Labels

Technology

Breaking News

Menampilkan Tanggal dan Waktu (Aktif) dengan JavaScript

Post a Comment

MKRdezign

Contact Form