CoolClock - Đồng hồ kim tuyệt đẹp với JavaScript

JavaScriptBank

New member
Với hiệu ứng đồng hồ kim bằng JavaScript tuyệt đẹp này, bạn sẽ dễ dàng trang trí cho trang web của mình một bộ hiển thị giờ cực đẹp, bởi hiệu ứng đ?... tại


Demo:
|

Cách cài đặt

Bước 1: Dùng mã JavaScript để cài đặt hiệu ứng
JavaScript
Mã:
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script src="coolclock.js" type="text/javascript"></script>
<script src="moreskins.js" type="text/javascript"></script>

Bước 2: Đặt mã HTML bên dưới vào phần BODY
HTML
Mã:
<table align="center">
<tbody><tr><td rowspan="2">
	<canvas style="width: 170px; height: 170px;" height="170" width="170" id="c1" class="CoolClock"></canvas>
	<br>
	<canvas style="width: 170px; height: 170px;" height="170" width="170" id="c2" class="CoolClock:chunkySwiss"></canvas>
	<br>
	<canvas style="width: 170px; height: 170px;" height="170" width="170" id="c4" class="CoolClock:machine"></canvas>
</td><td>
	<canvas style="width: 380px; height: 380px;" height="380" width="380" id="c5" class="CoolClock:fancy:190"></canvas>
</td></tr><tr><td align="center">
	<table><tbody><tr>
  <td align="center">New York<br><canvas style="width: 60px; height: 60px;" height="60" width="60" id="c6" class="CoolClock:chunkySwiss:30:noSeconds:-4 leftRightPad"></canvas></td>
  <td align="center">London<br><canvas style="width: 60px; height: 60px;" height="60" width="60" id="c7" class="CoolClock::30:noSeconds:+1 leftRightPad"></canvas></td>
  <td align="center">Townsville<br><canvas style="width: 60px; height: 60px;" height="60" width="60" id="c8" class="CoolClock:fancy:30:noSeconds:+10 leftRightPad"></canvas></td>
	</tr></tbody></table>
</td></tr>
</tbody></table>

Bước 3: Tải các file bên dưới về
Files






Bạn có thể xem các mã tương tự bên dưới
-
-
-


Một vài nhãn tương tự: , , , , , ,
Bạn có thể xem thêm nhiều JavaScript khác về




- -
 
Back
Top