TUTORIAL

Cara Membuat Jam Analog dengan Jquery

シックス , TUTORIAL
0
5092

Jquery adalah library javascript atau kumpulan script fungsi-fungsi javascript, bisa disebut juga sebagai frameworknya javascript, dengan Jquery kita dapat membuat website yang lebih interaktif dan lebih bagus. Salah satunya dengan mempercantik tampilan website atau blog dengan jam analog atau jam dinding bukanlah menjadi hal yang rumit karena terdapat plugins jquery yang biasa disebut Cool Clock Jquery.


Dengan memanfaatkan fremwork jquery excanvas ini kita dengan mudah mendesign dan membuat Jam analog dengan mudah. Untuk membuatnya pertama kita membuat file html misal dengan nama analog.html, kemudian dibagian bawah title kita selipkan fungsi jquerynya:



<head>
	<title>CoolClock Demo</title>
	<script src="jquery.js"></script>
        <script src="excanvas.js"></script>
	<script src="coolclock.js"></script>
	<script src="moreskins.js"></script>
		<style type="text/css">
			body { font-family:sans-serif; }
			div { padding-bottom:1em; }
		</style>
</head>

Setelah menyematkan Jquery Script tinggal kita memangil ID yang mau kita beri fungsi, caranya adalah dengan memanggil ID dan memanggil Classnya.

<table>
<h2>sixghakreasi.com</h2>
		<canvas style="width: 400px; height: 400px;" height="400" width="400" id="_coolclock_auto_id_0" class="CoolClock:chunkySwiss"></canvas>
 
		<canvas style="width: 400px; height: 400px;" height="400" width="400" id="_coolclock_auto_id_1" class="CoolClock:Tor"></canvas><br />
 
		<canvas style="width: 400px; height: 400px;" height="400" width="400" id="_coolclock_auto_id_2" class="CoolClock:Sun"></canvas>
 
		<canvas style="width: 400px; height: 400px;" height="400" width="400" id="_coolclock_auto_id_3" class="CoolClock:Sand"></canvas> 
		<tr><td>
<table> 

Dari script code diatas akan menghasilkan tampilan seperti dibawah ini :

 

By <a href="http://sixghakreasi.com/">sixghakreasi.com</a>:<br/>
	<canvas id="u22" class="CoolClock:classic"></canvas>
	<canvas id="u33" class="CoolClock:modern"></canvas>
	<canvas id="u44" class="CoolClock:simple"></canvas>
	</td></tr><tr><td>
	
	<table><tr><td> 
	By <a href="http://sixghakreasi.com/">sixghakreasi.com</a>:<br/>
	<canvas id="s01" class="CoolClock:securephp"></canvas>
	<canvas id="s02" class="CoolClock:Tes2"></canvas>
	<canvas id="s03" class="CoolClock:Lev"></canvas>
	<canvas id="s04" class="CoolClock:Sand"></canvas>
	<br/>
	<canvas id="s05" class="CoolClock:Sun"></canvas>
	<canvas id="s06" class="CoolClock:Tor"></canvas>
	<canvas id="s07" class="CoolClock:Cold"></canvas>
	<canvas id="s08" class="CoolClock:Babosa"></canvas>
	<br/>
	<canvas id="s09" class="CoolClock:Tumb"></canvas>
	<canvas id="s10" class="CoolClock:Stone"></canvas>
	<canvas id="s11" class="CoolClock:Disc"></canvas>
    </td></tr></table>

Dari script code diatas akan menghasilkan tampilan seperti dibawah ini :

 

Diatas ini adalah salah satu cara pemberian fungsi dengan memangil casvas ID HTMLnya, jadi salah satu cara memberikan Jquery function pada HTML adalah dengan melakukan panggilan pada Canvas ID nya.

<table>
<tr><td rowspan="2">
	<canvas id="c1" class="CoolClock"></canvas>
	<br/>
	<canvas id="c2" class="CoolClock:chunkySwiss"></canvas>
	<br/>
	<canvas id="c4" class="CoolClock:machine"></canvas>
</td><td>
	<canvas id="c5" class="CoolClock:fancy:190"></canvas>
</td></tr><tr><td align="center">
	<table><tr>
  <td align="center">New York<br/><canvas id="c6" class="CoolClock:chunkySwiss:30:noSeconds:-4 leftRightPad"></canvas></td>
  <td align="center">London<br/><canvas id="c7" class="CoolClock::30:noSeconds:+1 leftRightPad"></canvas></td>
  <td align="center">Townsville<br/><canvas id="c8" class="CoolClock:fancy:30:noSeconds:+10 leftRightPad"></canvas></td>
	</tr></table>
</td></tr>
</table>

Dari script code diatas akan menghasilkan tampilan seperti dibawah ini :

 

Dan Berikut kami share link download Source Codenya :

DOWNLOAD

0 Comments

×