jQuery TimeCircles 倒计时

在线实例

使用方法

1. <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery计时器插件TimeCircles演示1</h1>
2. <p style="width: 580px; margin: 0 auto; text-align: center;">离2014年1月1日还有（2014年1月1日已过）</p>
3. <div id="someTimer1" class="someTimer" data-date="2014-01-01 00:00:00" style="width: 700px; margin: 0 auto;"></div>
4. <p style="width: 580px; margin: 0 auto; text-align: center;">倒计时10秒后结束</p>
5. <div id="someTimer2" class="someTimer" data-timer="10" style="width: 700px; margin: 0 auto;"></div>
6. <p style="width: 580px; margin: 0 auto; text-align: center;">页面开始时计时</p>
7. <div id="someTimer3" class="someTimer" style="width: 700px; margin: 0 auto;"></div>

1.  $(function() {
2.                 $('#someTimer1').TimeCircles({
3.                     time: {
4.                         Days: {
5.                             show: false,
6.                             text: "天",
7.                             color: "#FC6"
8.                         },
9.                         Hours: {
10.                             show: false,
11.                             text: "时",
12.                             color: "#9CF"
13.                         },
14.                         Minutes: {
15.                             show: false,
16.                             text: "分",
17.                             color: "#BFB"
18.                         },
19.                         Seconds: {
20.                             show: false,
21.                             text: "秒",
22.                             color: "#F99"
23.                         }
24.                     }
25.                 });
26.                 $('#someTimer2').TimeCircles({
27.                     time: {
28.                         Days: {
29.                             show: false,
30.                             text: "天",
31.                             color: "#FC6"
32.                         },
33.                         Hours: {
34.                             show: false,
35.                             text: "时",
36.                             color: "#9CF"
37.                         },
38.                         Minutes: {
39.                             show: false,
40.                             text: "分",
41.                             color: "#BFB"
42.                         },
43.                         Seconds: {
44.                             show: false,
45.                             text: "秒",
46.                             color: "#F99"
47.                         }
48.                     },
49.                     refresh_interval: 0.1,
50.                     count_past_zero: false,
51.                     circle_bg_color: "#ddd",
52.                     fg_width: 0.03,
53.                     bg_width: 0.2
54.                 });
55.                 $('#someTimer3').TimeCircles({
56.                     time: {
57.                         Days: {
58.                             show: false,
59.                             text: "天",
60.                             color: "#FC6"
61.                         },
62.                         Hours: {
63.                             show: false,
64.                             text: "时",
65.                             color: "#9CF"
66.                         },
67.                         Minutes: {
68.                             show: false,
69.                             text: "分",
70.                             color: "#BFB"
71.                         },
72.                         Seconds: {
73.                             show: false,
74.                             text: "秒",
75.                             color: "#F99"
76.                         }
77.                     },
78.                     refresh_interval: 0.1,
79.                     count_past_zero: true,
80.                     circle_bg_color: "#eee",
81.                     fg_width: 0.05,
82.                     bg_width: 1
83.                 });
84.             });