jQuery TimeCircles 倒计时

在线实例

使用方法

<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery计时器插件TimeCircles演示1</h1>
<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>

 $(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
                });
            });

云盘内容

注意：示例只是当前的内容，【下载】的是全部jQuery插件一起打包后的文件。