阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.TimeCircles 中文 API 文档

      插件 jQuery.TimeCircles 中文 API 文档 https://github.com/wimbarelds/TimeCircles

      jQuery 插件显示自特定时间以来的时间或时间

      TimeCircles 文档

      TimeCircles 是一个 jQuery 插件,它提供了一种漂亮的方式,可以倒计时到某个时间,也可以从某个时间算起来。TimeCircles 的目标是提供一个简单而动态的工具,使访客能够非常轻松地为访客提供有吸引力的倒计时或计时器。

      本文档将提供有关如何使用 TimeCircles 的一些示例。TimeCircles 的使用可以非常简单,但对于那些愿意工作稍微努力的人来说,也可以提供更复杂的功能。这些示例旨在提供关于如何使用各种功能而不会使事情过于复杂的良好基本概念。

      一般使用

      首先要做的是包含 jQuery 和 TimeCircles 的 JavaScript 文件,以及 TimeCircles 样式表。理想情况下,这些应包含在 html 文件的头部。

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script type="text/javascript" src="TimeCircles.js"></script>
      <link href="TimeCircles.css" rel="stylesheet">
      

      当包含必要的文件时,在页面上设置 TimeCircles 非常简单,只需将您希望与 jQuery 一起使用的元素作为目标,然后在其上执行 TimeCircles 功能。这将在目标元素中创建 TimeCircles,从 0 开始计数(打开页面时)。

      重要提示: TimeCircles 将自动调整其所放置元素的大小。如果没有设置高度,它将尝试根据元素的宽度确定高度。但是,为了获得最佳效果,建议设置宽度和高度。

      设置参考时间

      当然,你可能不想从 0 开始算起来。也许你正在计算婚礼前的时间,或者计算你和女朋友在一起的时间(或其他任何真正的东西)。实际上,如果您在一些参考时间和 / 或日期使用它,TimeCircles 最有用。

      设置参考日期和时间也非常简单。最好的方法是将它包含在为 TimeCircles 预留的 html 元素中。创建一个名为的属性,data-date 并提供格式为的值 yyyy-mm-dd hh:mm:ss

      <div class="example" data-date="2014-01-01 00:00:00"></div>
      
      

      制作秒表

      您也可能希望使用 TimeCircles 倒计时特定的时间,例如 15 分钟。这与创建引用时间的工作方式类似,但是这里使用属性 data-timer,值是从(以秒为单位)倒计时的时间。

      <div class="example" data-timer="900"></div>
      

      选项

      TimeCircles 有黄色,绿色,蓝色和红色,这很好 - 但如果它出现在你自己网站的颜色主题中,它会不会更好?或者,如果你能改变其外观的其他方面,那不是很好吗?也许将文本的语言改为你想要的任何东西?

      要自定义 TimeCircles 以适合您正在寻找的内容,您可以使用这些选项。在本节中,我们将研究可用的选项以及每个选项的含义。

      开始 (default: true)

      此选项确定 TimeCircles 是否应立即启动。例如,如果您希望创建一个在用户单击按钮时启动的秒表,则需要将其设置为 false。

      $(".example").TimeCircles({start: false});
      

      动画 (default: “smooth”)

      圆形动画的方式可以是恒定的逐渐旋转,从一秒钟缓慢移动到另一秒。或者它可以设置为从一个单位跳到下一个单位,只有在其中的数字也发生变化时才更改圆圈。调用第一种类型,调用"smooth"第二种类型"ticks"。

      $(".example").TimeCircles({animation_interval: "smooth"});
      

      count_past_zero (default: true)

      此选项仅在倒计时时非常有用。它的作用是让你选择停止计时器,或者在你达到预定日期后(或你的秒表达到零)开始计数。

      $(".example").TimeCircles({count_past_zero: false});
      

      circle_bg_color (default: “#60686F”)

      此选项确定背景圆的颜色。

      $(".example").TimeCircles({circle_bg_color: "#000000"});
      

      use_background (default: true)

      此选项设置是否应绘制任何背景圆。禁用此选项可以单独使用,也可以使用自己的背景放置在 TimeCircles 之后。

      $(".example").TimeCircles({use_background: false});
      

      fg_width (default: 0.1)

      此选项设置前景圆的宽度。宽度相对于整个圆的大小设置。值 0.1 表示 10%,因此如果您的 TimeCircles 为 100 像素高,则前景圆将为 10%(10 像素)。

      $(".example").TimeCircles({fg_width: 0.05});
      

      bg_width (default: 1.2)

      此选项设置背景圆的宽度。背景圆的宽度相对于前景圆的宽度设置。值 1 表示 100%,因此值 1 表示宽度等于前景环。越高越好,越低越瘦。

      $(".example").TimeCircles({bg_width: 0.5});
      

      字体大小 (default: 0.07)

      此选项设置圆圈中文本的字体大小(天 / 小时 / 分钟 / 等)。大小相对于整个圆的大小设置。值 1 表示 100%,因此值 1 表示宽度等于前景环。

      $(".example").TimeCircles({text_size: 0.1});
      

      number_size (default: 0.28)

      此选项设置圆圈中数字的字体大小。大小相对于整个圆的大小设置。值 1 表示 100%,因此值 1 表示宽度等于前景环。

      $(".example").TimeCircles({number_size: 0.25});
      

      total_duration (default: “Auto”)

      可以设置此选项以更改填充最大可见圆的时间。通常这是天圈,但这可以是任何其他圈子,具体取决于可见设置。对此变量有效的是“自动”,“年”,“月”,“天”,“小时”,“分钟”或任何数值(即 30 秒 30 秒)。

      $(".example").TimeCircles({total_duration: "Auto"});
      

      方向 (default: “Clockwise”)

      可以设置此选项以更改圆圈填充的方向。有效值为“顺时针”,“逆时针”或“两者”。

      $(".example").TimeCircles({direction: "Clockwise"});
      

      start_angle (default: 0)

      可以设置此选项以更改圆圈填充的起点。这应该是 0 到 360 之间的整数值。0 从顶部开始,从右边开始 90,从底部开始 180,从左边开始 270。

      $(".example").TimeCircles({start_angle: 0});
      

      时间

      时间选项实际上是一组选项,允许您独立控制每个时间单位的选项。因此,在每个时间单位内都有自己的子类别。这些类别包括:天,小时,分钟和秒。每个类别中可用的选项如下:

      • show:确定是否应显示时间单位 text:确定时间下方显示的文本。适用于非英语网站 color:确定时间单位前景圆的颜色
          $(".example").TimeCircles({ time: {
              Days: { color: "#C0C8CF" },
              Hours: { color: "#C0C8CF" },
              Minutes: { color: "#C0C8CF" },
              Seconds: { color: "#C0C8CF" }
          }});
      

      功能

      函数将允许您在 TimeCircles 运行时与它们进行交互。一般来说,此功能最常被其他想要自己的 JavaScript 与 TimeCircles 交互的开发人员使用。但是,如果您自己不是开发人员,仍然有一些功能非常简单易用,并且不应该太难解决。

      然而,在我们讨论每个函数所做的事情之前,应该指出如何使用这些函数。与很多其他 jQuery 插件不同,TimeCircles 在实例化后不返回 jQuery 对象。相反,它返回一个 TimeCircles 对象。这意味着函数链将与其他 jQuery 插件略有不同。要了解有关如何链接其他 jQuery 插件和函数的更多信息,请查看该 end() 函数。

      TimeCircles 函数本身(函数除外 end())将返回 TimeCircles 对象。这允许您将多个功能链接到一起。IE:你可以 start() 直接进入 addEventListener(callback)。

      start() , stop() and restart()

      这些是提供的最基本功能。它们允许您暂时停止 TimeCircles 或重新启动它。启动将在计时器停止时取消暂停,重启将从原始值重新启动计时器。如果您正在使用 TimeCircles 来计算未来的某个点,那么在取消暂停后,倒计时将会超前。

      HTML

      <div class="example stopwatch" data-timer="900"></div>
      <button class="btn btn-success start">Start</button>
      <button class="btn btn-danger stop">Stop</button>
      <button class="btn btn-info restart">Restart</button>
      

      JavaScript

      $(".example.stopwatch").TimeCircles();
      $(".start").click(function(){ $(".example.stopwatch").TimeCircles().start(); });
      $(".stop").click(function(){ $(".example.stopwatch").TimeCircles().stop(); });
      $(".restart").click(function(){ $(".example.stopwatch").TimeCircles().restart(); });
      

      destroy()

      如果由于某种原因,您需要摆脱 TimeCircles,或者您希望允许用户通过单击按钮将其删除;你可以用破坏来做到这一点。

      $(".example").TimeCircles().destroy();

      rebuild()

      某些选项或变量仅在创建 TimeCircles 时初始化一次(例如,宽度和高度,或显示哪些圆)。如果您稍后更改这些设置,则可以通过使用重新初始化所有内容。rebuild()

      $(".example").TimeCircles().rebuild();
      
      

      getTime()

      检索零点的剩余秒数(或之后)。零到零的值是正的,零后的值是负的。

      $(".example").TimeCircles().getTime();
      

      addListener (callback, type = “visible”)

      可以使用侦听器实现与 TimeCircles 最强大的交互。使用听众,你可以每秒钟发出一个滴答声,或者你可以在一分钟过去时发出声音。当计时器达到零时,您甚至可以使用它来触发某些警报或其他整个 JavaScript。

      该 type 参数允许您仅侦听来自可见 TimeCircles 或所有 TimeCircles 的事件。正确的值是“可见的”或“全部的”。默认值为“可见”,但通过使用“全部”,您可以收听您隐藏的圈子(如果您当然隐藏任何一个)。

      要添加侦听器,请使用该 addListener(callback, type) 功能。回调是您传递给事件侦听器的函数。然后将为每个事件触发回调。三个参数传递给您的回调函数,即:

      • unit:字符串格式的时间单位。所以,“天”/“小时”/“分钟”/“秒”。
      • value:更改的时间单位的新值。即:15。
      • 总计:这是自零点以来剩余(或经过)的总时间。
      $(".example").TimeCircles({count_past_zero: false}).addListener(countdownComplete);
      
      function countdownComplete(unit, value, total){
      	if(total<=0){
      		$(this).fadeOut('slow').replaceWith("<h2>Time's Up!</h2>");
      	}
      }
      

      end()

      要允许您将 TimeCircles 链接到其他 jQuery 函数,可以使用 end()函数。end 函数返回 jQuery 对象,并允许您根据需要触发 jQuery 函数。

      $(".example").TimeCircles().end().fadeOut();
      
      目录
      目录