你的位置:首页 > Java教程

[Java教程]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.             });
复制

 


下载