html+css+js卡通版时间特效

1、新建html文档。

2、书写hmtl代艨位雅剖码。<div class="wrapper"><p>倒计时</p><div id="led0" class="autosize" style="background:#333"></div><p>显示随机数</p><div id="led1" class="autosize" style="background:#333"></div><p>显示时间 (格式 — hh:mm)</p><div id="led2" class="autosize"></div><p>显示时间 (格式 — hh:mm:ss)</p><div id="led3" class="autosize"></div></div>

3、书写css代码。<style>html, body { width : 100%; hei爿讥旌护ght : 100%; margin : 0; padding : 0; }.wrapper { position : relative; width : 420px; margin : 0 auto; padding : 0; font-size : 0; }.icon { position : relative; display : inline-block; width : 100px; height : 100px; margin : 20px; border-radius : 18px; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; box-sizing : border-box; }body { font: normal 12px/24px '微软雅黑', tahoma; }.wrapper { margin: 0px auto; padding: 0px 20px 20px 20px; border: 1px solid #CCC; width: 665px; font-size: 12px; }.autosize { font-size: 0; background: #000; display: table; }</style>

4、书写并添加js代码。<script src="js/jquery.js"></script><script src=&鳎溻趄酃quot;js/lrtk.js"></script><script src="js/jquery.uled.js"></script><script>$(document).ready(function() { var l0 = new uLED({ id : "led0",//对应div的id type : "countdown",//显示类型，可取值 "countdown", "random" , "time". format : "ddd:hh:mm:ss",//数字显示格式 color : "#eee",//数字颜色 bgcolor : "#000",//背景颜色 size : 5,//led点大小 rounded : 1//led点圆角大小 }); var l1 = new uLED({ id : "led1", type : "random", length : 7,//随机数长度 color : "#af0", bgcolor : "#101a10", size : 10, rounded : 6 }); var l2 = new uLED({ id : "led2", type : "time", format : "hh:mm", color : "#f0a", bgcolor : "#222", size : 22, rounded : 4 }); var l3 = new uLED({ id : "led3", type : "time", format : "hh:mm:ss", hourformat : 12,//小时显示格式，可取值 "12" , "24" color : "#fa0", bgcolor : "#222", size : 12, rounded : 0 });});</script>

5、代码整体结构。

6、查看效果。