html+css+js卡通版时间特效
1、新建html文档。
2、书写hmtl代码。
<div class="wrapper">
倒计时
<div id="led0" class="autosize" style="background:#333"></div>
显示随机数
<div id="led1" class="autosize" style="background:#333"></div>
显示时间 (格式 — hh:mm)
<div id="led2" class="autosize"></div>
显示时间 (格式 — hh:mm:ss)
<div id="led3" class="autosize"></div>
</div>
3、书写css代码。
<style>
html, body { width : 100%; height : 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="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、查看效果。
