在线实例

默认

倒计时

使用方法

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. });