HTML
<p style="width: 580px; margin: 0 auto; text-align: center;">离2014年1月1日还有(2014年1月1日已过)</p> <div id="someTimer1" class="someTimer" data-date="2014-01-01 00:00:00" style="width: 700px; margin: 0 auto;"></div> <p style="width: 580px; margin: 0 auto; text-align: center;">倒计时10秒后结束</p> <div id="someTimer2" class="someTimer" data-timer="10" style="width: 700px; margin: 0 auto;"></div> <p style="width: 580px; margin: 0 auto; text-align: center;">页面开始时计时</p> <div id="someTimer3" class="someTimer" style="width: 700px; margin: 0 auto;"></div>
引入jQuery库和TimeCircles相关组件
<script type="text/javascript" src="jquery.js"></script>
<script src="js/TimeCircles.js"></script>
jQuery
$(function() {
$('#someTimer1').TimeCircles({
time: {
Days: {
show: false,
text: "天",
color: "#FC6"
},
Hours: {
show: false,
text: "时",
color: "#9CF"
},
Minutes: {
show: false,
text: "分",
color: "#BFB"
},
Seconds: {
show: false,
text: "秒",
color: "#F99"
}
}
});
$('#someTimer2').TimeCircles({
time: {
Days: {
show: false,
text: "天",
color: "#FC6"
},
Hours: {
show: false,
text: "时",
color: "#9CF"
},
Minutes: {
show: false,
text: "分",
color: "#BFB"
},
Seconds: {
show: false,
text: "秒",
color: "#F99"
}
},
refresh_interval: 0.1,
count_past_zero: false,
circle_bg_color: "#ddd",
fg_width: 0.03,
bg_width: 0.2
});
$('#someTimer3').TimeCircles({
time: {
Days: {
show: false,
text: "天",
color: "#FC6"
},
Hours: {
show: false,
text: "时",
color: "#9CF"
},
Minutes: {
show: false,
text: "分",
color: "#BFB"
},
Seconds: {
show: false,
text: "秒",
color: "#F99"
}
},
refresh_interval: 0.1,
count_past_zero: true,
circle_bg_color: "#eee",
fg_width: 0.05,
bg_width: 1
});
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791