计数循环和条件循环_使用TimeCircles创建循环计数器

最新推荐文章于 2024-05-02 21:17:26 发布

cuken7684698822

最新推荐文章于 2024-05-02 21:17:26 发布

阅读量514

点赞数

文章标签： java python css javascript js ViewUI

原文链接：https://www.script-tutorials.com/creating-circular-counter-with-timecircles/

版权

计数循环和条件循环

Creating circular counter with TimeCircles Today we will talk about new jQuery plugin – TimeCircles, this is truly remarkable jQuery plugin that allows counting up and down (from a certain time) in a modern looking way. The plugin provides a simple yet dynamic instrument that makes it very easy to provide your visitors an attractive timer (or countdown). In our tutorial we will give you several examples of using the TimeCircles. It is pretty easy to initialize the timer, but it can be more difficult if you want to use additional features of the plugin (there are many options).

使用TimeCircles创建循环计数器今天，我们将讨论新的jQuery插件– TimeCircles，这是一款了不起的jQuery插件，它允许以一种现代的方式向上或向下(从特定时间开始)计数。该插件提供了一种简单而又动态的工具，可以非常轻松地为您的访客提供吸引人的计时器(或倒计时)。在我们的教程中，我们将为您提供一些使用TimeCircles的示例。初始化计时器非常容易，但是如果您想使用插件的其他功能(有很多选项)，则可能会更加困难。

现场演示

初始化 (Initialization)

步骤1 –包含必要的文件 (Step 1 – include necessary files)

To start with, we need download the latest sources of the plugin here, then we can include jQuery library, TimeCircles plugin library and stylesheet file:

首先，我们需要在此处下载插件的最新资源，然后我们可以包括jQuery库，TimeCircles插件库和样式表文件：


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="TimeCircles.js"></script>
<link href="TimeCircles.css" rel="stylesheet">


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="TimeCircles.js"></script>
<link href="TimeCircles.css" rel="stylesheet">

After we have included all the neccesary files, we can continue setting up TimeCircles on your page. We need to target the element you wish to use with jQuery, and initialize the TimeCircles on it. So it will create TimeCircles instance object inside the targeted element, counting up from zero (when the page is loaded).

包含所有必要文件后，我们可以继续在您的页面上设置TimeCircles。我们需要定位要与jQuery一起使用的元素，并在其上初始化TimeCircles。因此，它将在目标元素内创建TimeCircles实例对象，从零开始计数(加载页面时)。

Pay attention: TimeCircles automatically makes it self the size of whatever element you place it in. If you have not adjusted the height of your object, it will try to define the height, based on the element’s width. For the best results, we recommended to set both: width and height.

请注意： TimeCircles会自动使它自己成为放置它的任何元素的大小。如果您尚未调整对象的高度，它将尝试根据元素的宽度定义高度。为了获得最佳效果，我们建议同时设置：宽度和高度。

步骤2 –设定参考时间 (Step 2 – set reference time)

Obviously, you might not want to start counting up from zero. Perhaps you are counting down the time until a celebration, or alternatively counting how long you have been with your girlfriend (or whatever else). The TimeCircles is most useful, if you are using it with some reference date and/or time. Setting up your reference date and time is also simple. The best way to do it is to simply include it in the html element you have added aside for TimeCircles. You just need to create an attribute, that is called ‘data-date’ and provide a value in the format of yyyy-mm-dd hh:mm:ss

显然，您可能不想从零开始计数。也许您正在倒计时直到庆祝的时间，或者在倒计时您与女友在一起的时间(或其他时间)。如果您使用带有某些参考日期和/或时间的TimeCircles，则它是最有用的。设置参考日期和时间也很简单。最好的方法是将其简单地包含在为TimeCircles添加的html元素中。您只需要创建一个称为“数据日期”的属性，并以yyyy-mm-dd hh:mm:ss的格式提供一个值


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


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

步骤3 –制作秒表 (Step 3 – building a stopwatch)

You might want to use TimeCircles to count down a specific amount of time, like 30 minutes. It works similarly as creating a reference time, though here another attribute ‘data-timer’ is used, and the value is the time to count down from (in seconds).

您可能想使用TimeCircles倒数特定时间，例如30分钟。它的作用类似于创建参考时间，尽管这里使用了另一个属性“数据计时器”，并且该值是从(秒)开始倒计时的时间。


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


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

参量 (Parameters)

By default, TimeCircles comes in red, green, blue and yellow colors, but we always can customize it. There are also a lot of other things that we can customize. To customize TimeCircles to fit what you are looking for, you can use the following options. Below, you can have a look to all available options:

默认情况下，TimeCircles具有红色，绿色，蓝色和黄色，但我们始终可以对其进行自定义。我们还可以自定义许多其他内容。要自定义TimeCircles以适合您的需求，可以使用以下选项。在下面，您可以查看所有可用选项：

Parameter	Default value	Description
start	true	This option determines whether or not TimeCircles should start immediately. If for example you wish to create a stopwatch that starts when the users clicks a button, you will want to set this to false. `$(".example").TimeCircles({start: false});`
animation	"smooth"	The way the circles animate can be either a constant gradual rotating, slowly moving from one second to the other. Or it can be set to jump from one unit to the next, only changing the circle when the number within it also changes. The first type is called `"smooth"`, the second type is called `"ticks"`. `$(".example").TimeCircles({animation_interval: "smooth"});`
count_past_zero	true	This option is only really useful for when counting down. What it does is either give you the option to stop the timer, or start counting up after you have hit the predefined date (or your stopwatch hits zero). `$(".example").TimeCircles({count_past_zero: false});`
circle_bg_color	"#60686F"	This option determines the color of the background circle. `$(".example").TimeCircles({circle_bg_color: "#000000"});`
use_background	true	This options sets whether any background circle should be drawn at all. Disabling this option could be used in isolation, or you could use a background of your own to place behind TimeCircles. `$(".example").TimeCircles({use_background: false});`
fg_width	0.1	This option sets the width of the foreground circle. The width is set relative to the size of the circle as a whole. A value of 0.1 means 10%, so if your TimeCircles are 100 pixels high, the foreground circle will be 10 percent of that (10 pixels). `$(".example").TimeCircles({fg_width: 0.05});`
bg_width	1.2	This option sets the width of the backgroundground circle. The width of the background is set relative to the width of the foreground. A value of 1 means 100%, so a value of 1 would mean having a width equal to your foreground ring. Higher and you get wider, lower you get thinner. `$(".example").TimeCircles({bg_width: 0.5});`
text_size	0.07	This option sets the font size of the text in the circles. The size is set relative to the size of the circle as a whole. A value of 1 means 100%, so a value of 1 would mean having a width equal to your foreground ring. `$(".example").TimeCircles({text_size: 0.1});`
total_duration	"Auto"	This option can be set to change how much time will fill the largest visible circle. Normally this is the Days circle, but this can be any of the other circles depending on visible settings. Valid for this variable are “Auto”, “Years”, “Months”, “Days”, “Hours”, “Minutes” or any numeric value (ie: 30 for thirty seconds). `$(".example").TimeCircles({total_duration: "Auto"});`
direction	“Clockwise”	This option can be set to change the direction in which the circles fill up. Valid values for this are “Clockwise”, “Counter-clockwise” or “Both”. `$(".example").TimeCircles({direction: "Clockwise"});`
start_angle	0	This option can be set to change the starting point from which the circles will fill up. This should be an integer value between 0 and 360. 0 is from the top, 90 from the right, 180 from the bottom and 270 from the left. `$(".example").TimeCircles({start_angle: 0});`
time		The time option is actually a group of options that allows you to control the options of each time unit independently. As such, within time each unit of time has its own sub-category. These categories are: Days, Hours, Minutes, and Seconds. The options available within each category are as follows: show: Determines whether the time unit should be shown at all text: Determines the text shown below the time. Useful for use on non-English websites color: Determines the color of the foreground circle of the time unit `$(".example").TimeCircles({ time: { Days: { color: "#C0C8CF" }, Hours: { color: "#C0C8CF" }, Minutes: { color: "#C0C8CF" }, Seconds: { color: "#C0C8CF" } }});`

参数	默认值	描述
开始	真正	此选项确定TimeCircles是否应立即启动。例如，如果您希望创建一个在用户单击按钮时启动的秒表，则需要将其设置为false。 `$(".example").TimeCircles({start: false});`
动画	“光滑”	圆圈的动画方式可以是恒定的逐渐旋转，从一秒钟缓慢地移动到另一秒钟。或者可以将其设置为从一个单位跳到下一单位，仅当其中的数字也更改时才更改圆圈。第一种称为`"smooth"` ，第二种称为`"ticks"` 。 `$(".example").TimeCircles({animation_interval: "smooth"});`
count_past_zero	真正	此选项仅在递减计数时才真正有用。它的作用是让您选择停止计时器，或者在达到预定义的日期(或者秒表达到零)之后开始计时。 `$(".example").TimeCircles({count_past_zero: false});`
circle_bg_color	“＃60686F”	此选项确定背景圆圈的颜色。 `$(".example").TimeCircles({circle_bg_color: "#000000"});`
use_background	真正	此选项设置是否要绘制任何背景圆。禁用此选项可以单独使用，也可以使用自己的背景放置在TimeCircles之后。 `$(".example").TimeCircles({use_background: false});`
fg_width	0.1	此选项设置前景圆的宽度。宽度是相对于整个圆的大小设置的。值0.1表示10％，因此，如果您的TimeCircles高100像素，则前景圆将是该像素的10％(10像素)。 `$(".example").TimeCircles({fg_width: 0.05});`
bg_width	1.2	此选项设置背景圆的宽度。相对于前景的宽度设置背景的宽度。值1表示100％，因此值1表示宽度等于您的前景环。越高，您变得越宽，越低，您变得越薄。 `$(".example").TimeCircles({bg_width: 0.5});`
字体大小	0.07	此选项设置圆圈中文本的字体大小。相对于整个圆的大小设置大小。值1表示100％，因此值1表示宽度等于您的前景环。 `$(".example").TimeCircles({text_size: 0.1});`
total_duration	“汽车”	可以设置此选项以更改将填充最大可见圆圈的时间。通常，这是“天”圈子，但这可以是其他任何圈子，具体取决于可见的设置。对于此变量有效的是“ Auto”，“ Years”，“ Months”，“ Days”，“ Hours”，“ Minutes”或任何数字值(例如：30表示三十秒)。 `$(".example").TimeCircles({total_duration: "Auto"});`
方向	“顺时针”	可以设置此选项以更改圆的填充方向。有效的值为“顺时针”，“逆时针”或“两者”。 `$(".example").TimeCircles({direction: "Clockwise"});`
start_angle	0	可以设置此选项以更改圆将填充的起点。这应该是介于0到360之间的整数值。0从顶部开始，从右侧开始90，从底部开始180，从左侧开始270。 `$(".example").TimeCircles({start_angle: 0});`
时间		时间选项实际上是一组选项，允许您独立控制每个时间单位的选项。因此，在时间范围内，每个时间单位都有自己的子类别。这些类别是：天，小时，分钟和秒。每个类别中可用的选项如下： show：确定是否完全显示时间单位文字：确定时间下方显示的文字。有用在非英语网站上使用 color：确定时间单位的前景色的颜色 `$(".example").TimeCircles({ time: { Days: { color: "#C0C8CF" }, Hours: { color: "#C0C8CF" }, Minutes: { color: "#C0C8CF" }, Seconds: { color: "#C0C8CF" } }});`

功能 (Functions)

Functions let us interact with the TimeCircles during runtime. Briefly, this functionality is most often used by other developers who want their own javascript to interact with TimeCircles. However, if you are not a developer yourself, there are still a few functions that are quite simple to use and should not be too hard to tackle.

函数使我们可以在运行时与TimeCircles进行交互。简而言之，此功能最经常由其他希望自己JavaScript与TimeCircles进行交互的开发人员使用。但是，如果您自己不是开发人员，那么仍然有一些功能非常易于使用，并且处理起来也不难。

Before we go into what each function does however, it should be pointed out how these functions can be used. Unlike quite a lot of other jQuery plugins, TimeCircles does not return a jQuery object after instantiating. Instead, it returns a TimeCircles object. This means that function chaining will work slightly differently than it does for other jQuery plugins. To find out more about how to chain other jQuery plugins and functions, have a look at the end() function.

但是，在介绍每个功能之前，应该指出如何使用这些功能。与很多其他jQuery插件不同，TimeCircles在实例化后不会返回jQuery对象。而是返回一个TimeCircles对象。这意味着函数链接的工作方式将与其他jQuery插件略有不同。要了解有关如何链接其他jQuery插件和函数的更多信息，请查看end()函数。

TimeCircles functions themselves (with the exception of the end() function) will return the TimeCircles object. This allows you to chain several functions into each other. IE: You could chain start() straight into addEventListener(callback).

TimeCircles函数本身( end()函数除外)将返回TimeCircles对象。这使您可以将多个功能相互链接。 IE：您可以将start()直接链接到addEventListener(callback) 。

start()，stop()和restart() (start() , stop() and restart())

These are the most basic functions provided. They allow you to temporarily stop TimeCircles or restart it. Start will unpause the timer when it is stopped, restart will restart it from it is original value. If you are using TimeCircles to count down to a certain point in the future, upon unpausing the countdown will jump ahead.

这些是所提供的最基本的功能。它们使您可以暂时停止TimeCircles或重新启动它。启动将在计时器停止时取消暂停它，重新启动将从它的原始值重新启动它。如果您正在使用TimeCircles倒数到将来的某个时间点，则在取消暂停时倒数会向前跳。

Html

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>


<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

Java脚本


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


$(".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())

If for some reason, you need to get rid of your TimeCircles, or you want to allow users remove them at the click of a button; you can do that with destroy.

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


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


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

重建() (rebuild())

Some options or variables are only initialized once, at the time of creating TimeCircles (For example, the width and height, or which circles are being shown). If you change these settings later on, you can have everything reinitialized anew by using .rebuild()

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


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


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

getTime() (getTime())

Retrieves the number seconds left (or since) the zero point. Values until zero are positive, values after zero are negative.

检索距离零点(或自零点以来)的秒数。直到零为止的值为正，零之后的值为负。


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


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

addListener `(callback, type = "visible")` (addListener `(callback, type = "visible")`)

The most powerful interactions with TimeCircles can be achieved using listeners. Using listeners, you can make a ticking sound play every second, or you can make a sound whenever a minute passes. You could even use it to trigger some alarm or whole other javascript when the timer hits zero.

与TimeCircles的最强大的交互可以使用侦听器来实现。使用听众，您可以每秒播放一次滴答声，或者每隔一分钟便发出声音。当计时器为零时，您甚至可以使用它来触发一些警报或整个其他JavaScript。

The type parameter allows you to listen to either only the events from the visible TimeCircles, or all TimeCircles. Correct values are “visible” or “all”. The default value is “visible”, but through using “all” you can listen to the circles you are hiding (if you are hiding any of course).

使用type参数，您可以仅侦听可见的TimeCircles中的事件，也可以侦听所有TimeCircles中的事件。正确的值是“可见”或“全部”。默认值为“可见”，但是通过使用“全部”，您可以收听您隐藏的圆圈(当然，如果您隐藏了任何圆圈)。

To add a listener, use the addEventListener(callback, type) function. Callback is a function you pass to the event listener. The callback will then be triggered for each event. Three parameters are passed to your callback function, namely:

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

unit: The time unit in string format. So, “Days”/”Hours”/”Minutes”/”Seconds”.
unit：字符串形式的时间单位。因此，“天” /“小时” /“分钟” /“秒”。
value: The new value of the time unit that changed. I.e.: 15.
value：更改的时间单位的新值。即：15。
total: This is the total time left (or elapsed) since the zero point.
total：这是自零点以来剩余(或经过)的总时间。

结束() (end())

To allow you to chain TimeCircles to other jQuery functions, you can use the end() function. The end function returns the jQuery object and allows you to trigger jQuery function as desired.

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


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


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

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

翻译自: https://www.script-tutorials.com/creating-circular-counter-with-timecircles/

计数循环和条件循环

cuken7684698822

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
计数循环和条件循环_使用TimeCircles创建循环计数器

计数循环和条件循环Creating circular counter with TimeCircles Today we will talk about new jQuery plugin – TimeCircles, this is truly remarkable jQuery plugin that allows counting up and down (from a certain t...
复制链接

扫一扫