Membuat Widget Jam Analog Dengan CSS

Membuat Widget Jam Analog Dengan CSS - Cara menampilkan widget pengukur waktu seperti ini, mungkin sudah sering Anda lihat pada beberapa blog yang menggunakannya. Sekarang coba lihat halaman depan di HP (Hand Phone) Anda, saya yakin pasti menggunakan widget seperti ini juga, hanya versi yang berbeda seperti (stopwatch second dan analog style). Sehingga Inspirasi pada tutorial kali ini, saya mengambil tema tentang "Bagaimana cara Memindahkan Jam Dinding Di rumah Anda, untuk kita tempatkan pada halaman widget di blog" seperti tampilan gambar berikut:

Baca juga - 10 Pilihan Efek Loading Blog



Hal yang tersulit dalam Membuat Widget Jam Analog seperti ini adalah membuat gerakan detik layaknya sebuah jam, yang bergerak berputar melintasi angka-angka pada jam tersebut, dan saya coba membuat gerakan tersebut dengan css-animasi, dan berhasil, akan tetapi waktu yang ditunjukkan pada widget tidak sesuai dengan jam pada laptop saya. Akhirnya saya hapus kembali, dan mendesain ulang dengan penggunaan perintah script untuk mendapatkan GMT-waktu setempat sesuai lokasi Negara dengan kode seperti ini:

<script type="text/javascript">
var oClockAnalog = {
    aSecond:         [],
    dtDate:          new Date(),
    iCurrSecond:     -1,
    iHourRotation:   -1,
    iMinuteRotation: -1,
    iStepSize:       10,
    iTimerAnimate:   setInterval("oClockAnalog.fAnimate()", 20),
    iTimerUpdate:    setInterval("oClockAnalog.fUpdate()", 1000),

    fAnimate:       function() {
        if (this.aSecond.length > 0) {
            this.fRotate("analogsecond", this.aSecond[0]);
            this.aSecond = this.aSecond.slice(1);
        }
    },
</script>

Dan hasilnya sesuai harapan seperti ini:




DEMO SHOW



Bagaimana? terlihat keren dan menarik bukan tampilan jam ini.!, buat sahabat semua pecinta SAHABAT BLOGGER 77 yang ingin Membuat Widget Jam Analog seperti ini, versi kode jam analog dengan lengkap sudah saya siapkan untuk Anda copy dan letakkan pada formulir halaman HTML/javascript di widget blog Anda.
Kode lengkapnya seperti ini:

<style type="text/css">
.watch {
  background: #34495e;
  border-radius: 50%;
  height: 20em;
  left: 50%;
  margin-left: -10em;
  margin-top: -10em;
  position: absolute;
  top: 150%;
  width: 20em;}

.watch:after, .watch:before {
  content: '';
  background-color: #bfbfbf;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFBFBFBF', endColorstr='#FFECF0F1');
  background-image: -moz-linear-gradient(top, #bfbfbf 0%, #ecf0f1 100%);
  background-image: -webkit-linear-gradient(top, red 0%, red 100%);
  background-image: linear-gradient(to bottom, #C0C0C0 0%, #FFF8DC 100%);
  border-radius: 50%;
  position: absolute;
  height: 22em;left: -1em;
  top: -1em;width: 22em;z-index: -1;}

.watch:before {
  box-shadow: -0.2em -0.4em 0.5em rgba(0, 0, 0, 0.2);
  height: 24em;left: -2em;
  transform: rotate(180deg);
  top: -2em;width: 24em;}

.watch-face {border-radius: 50%;height: 100%;width: 100%;}
.watch-face ul {list-style: none;}
.watch-face ul li {
  background: #34495e;
  border-radius: 50%;
  color: #ecf0f1;
  font-size: 2.8em;
  height: 1.5em;
  line-height: 1.5;
  position: absolute;
  text-align: center;
  text-shadow: 0.05em 0.05em 0.1em rgba(0, 0, 0, 0.3);
  width: 1.5em;}

.watch-face ul li:first-child {top:0;left:50%;margin-left:-0.75em;}
.watch-face ul li:nth-child(2) {margin-top:-0.75em;right:0;top:50%;}
.watch-face ul li:nth-child(3) {bottom:0;left:50%;margin-left:-0.75em;}
.watch-face ul li:nth-child(4) {margin-top:-0.75em;left:0;top:50%;}

.watch-face:after {
  content: '';
  background-image: -moz-linear-gradient(left bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.1) 60%);
  background-image: -webkit-linear-gradient(left bottom, rgba(55, 45, 155, 0) 0%, rgba(55, 45, 155, 0) 60%, rgba(55, 45, 155, 0.1) 60%);
  background-image: linear-gradient(to right top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.1) 60%);
  box-shadow: inset 0.5em 1em 2em rgba(0, 50, 136, 0.3), inset -0.5em -1em 2em rgba(0, 50, 136, 0.1);
  border-radius: 50%;
  position: absolute;
  height: 20em;left: 0;top: 0;
  width: 20em;z-index: 5;}

.watch-face:before {
  border-radius: 50%;
  border: 0.25em solid #ecf0f1;
  box-shadow: 0.05em 0.05em 0.1em rgba(0, 50, 136, 0.9), inset 0.05em 0.05em 0.1em rgba(0, 50, 136, 0.3), inset -0.05em -0.05em 0.1em rgba(0, 50, 136, 0.9), -0.05em -0.05em 0.1em rgba(0, 50, 136, 0.3);
  content: '';
  height: 80%;left: 9.5%;
  position: absolute;top: 9.5%;width: 80%;}

[class*="watch-hand"] {
  background: #bfbfbf;
  border-radius: 0.4em 0.4em 0 0;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
  left: 9.8em;
  position: absolute;top: 2em;
  z-index: 4;transform-origin: 50% 100%;}

.watch-hand-second {width:0.2em;top:0.9em;height:9em;left:50%;}
.watch-hand-minute {width: 0.4em;top: 2.1em;height: 8em;}
.watch-hand-hour {width: 0.6em;top: 4em;height: 6em;}

.watch-center-circle {
  background: #FAEBD7;
  box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  height: 1.5em;
  left: 50%;
  margin-left: -0.75em;
  margin-top: -0.75em;
  position: absolute;top: 50%;
  width: 1.5em;z-index: 5;}

.watch-center-circle:after {
  background: #7f8c8d;
  border-radius: 50%;
  content: '';
  height: 0.9em;left: 0.3em;
  position: absolute;
  top: 0.3em;width: 0.9em;}

.stop-watch {
  position:relative !important;
  background:#fff;
  color:#222;
  text-align:center;
  margin:24.6em auto;
  border:2px inset red;
  width:65px;
  font:bold 9px/normal arial;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var oClockAnalog = {
    aSecond:         [],
    dtDate:          new Date(),
    iCurrSecond:     -1,
    iHourRotation:   -1,
    iMinuteRotation: -1,
    iStepSize:       10,
    iTimerAnimate:   setInterval("oClockAnalog.fAnimate()", 20),
    iTimerUpdate:    setInterval("oClockAnalog.fUpdate()", 1000),

    fAnimate:       function() {
        if (this.aSecond.length > 0) {
            this.fRotate("analogsecond", this.aSecond[0]);
            this.aSecond = this.aSecond.slice(1);
        }
    },
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/analog-clock.js"></script>
<div class="watch">
  <div id="cssclock">
    <div id="clockanalog">
      <div class="watch-center-circle"></div>
<div class="watch-hand-second" id="analogsecond"></div>
<div class="watch-hand-minute" id="analogminute"></div>
<div class="watch-hand-hour" id="analoghour"></div>
    </div>
       <div class="watch-face">
         <ul>
           <li>12</li>
           <li>3</li>
           <li>6</li>
           <li>9</li>
         </ul>
       </div>
  </div>
</div>
<div class="stop-watch">
<h2>
<time id="clock"></time>
<script type="text/javascript">
(function() {
    var clock = document.getElementById('clock');
    setInterval(function() {
        var time = new Date().toString().split(' ')[4];
        clock.innerHTML = time;
    }, 13);
})();
</script></h2>
</div>

Jam ini saya jual Rp. 50.000,- saja, gak terlalu mahal kok, karena otomatis tanpa penggunaan battray, hehhe...!! Selamat berInspirasi, good night..**

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Widget Jam Analog Dengan CSS
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>

http://sahabatblogger77.blogspot.com/2014/09/membuat-widget-jam-analog-dengan-css.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77