ước 1: Dùng mã Javascript để cài đặt hiệu ứng
Code
<!--[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
Code
<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ề
coolclock.js
excanvas.js
moreskins.js