Smart Timer And Counter 是一个 jQuery 插件,可用于向网页添加计时器和时钟。 插件可通过自定义皮肤(可视组件)、模式(时钟/计时器逻辑)和语言(翻译标签)进行高度配置和扩展。
所有样式都是使用 CSS(和用于圆形皮肤的 Canvas)完成的,所有包含的样式都是纯 CSS,不使用图像。 控件是响应式的,使用媒体查询来更改计数器大小,并且它可以在较小的屏幕上分成多行。
插件在当前的 Android 浏览器、iPhone 和 iPad Safari 和 Chrome,所有现代桌面浏览器(IE8 和 IE9 不会显示与一些更复杂的皮肤相关的大部分样式)上进行了测试。 它需要 JavaScript 和 jQuery 支持才能工作。
无尽的造型可能性
时钟和计数器模式,自定义布局
插件可以用作时钟或计数器。 如果用作时钟,您可以显示当前日期/时间,也可以从任何日期开始。 时钟模式可以 24 小时制(默认)或 12 小时制(带有 AM/PM 标志)显示时间。 计数器可以倒计时到任何日期,倒计时任意秒数或倒计时到任意秒限制。 插件可以显示时间和日期元素、分隔符和标签的不同组合。
模式控制列表
- 布局: 结合’年’、’月’、’天’、’小时’、’分钟’、’秒’的顺序。
- 分频器:几个分隔符可用于拆分日期/时间元素。
- 位数:为每个日期/时间元素自定义位数。
计数器方法列表
- 日期: 它必须在将来使用 JavaScript 数据对象进行设置。 插件将计数为零以达到设定日期。
- 过去:它必须是过去使用 JavaScript 数据对象设置的。 插件计算自过去日期以来经过了多少时间。
- 秒:从指定的秒数开始计数到零。
- 目标:从零开始计数到指定的秒数。
基于数字的上下计数模块
插件还可以使用基于数字的格式来非常灵活地向上或向下计数。 它允许自定义位数、小数位、小数点和千位分隔符、自定义步骤(甚至从设定范围随机化)。 您可以在计数器前后指定一个字符(如货币符号)。
所有包含的皮肤(圆形除外)都与数字模块一起使用。 有些皮肤可以有一些不同的设置。
7 种基本皮肤:基本、简单、动画、圆形、自定义、普通和内联
插件有 7 个内置皮肤来显示时钟/计数器。 简单皮肤和动画皮肤各有 14 种样式(有些相同)。 动画皮肤使用动画(SlideIn、SlideOut、Fade、FadeIn、FadeOut)来改变数字。 内联皮肤可用于 SPAN 标记,以添加与文本内联的计数器,样式更改最少。
可用皮肤列表
- 简单的:显示数字的简单方式,具有 14 种预定义样式。
- 动画:更改数字的动画,具有 14 种预定义样式和 5 种动画。
- 排队:用于文本中的元素,具有 6 种预定义样式。
- 圆: 使用 Canvas 渲染圆形表盘,无限颜色自定义。
- 风俗:从动画皮肤扩展而来,可以自由控制颜色和样式。
- 清楚的:更简单的皮肤,可以自由控制颜色和一些样式控制。
- 根据:不包含样式的奖励皮肤,与简单皮肤具有相同的行为。
翻转皮肤
翻转皮肤是完全可定制的,它允许您为数字、背景和标签使用自定义颜色,使用阴影,指定尺寸,更改字体系列和大小。
皮肤与智能计时器和计数器插件中的计时器和数字模块一起使用。 它可以同时翻转多个数字。
4 个 LED 皮肤:段、条、矩阵 3×5 和 5×7
这是经典的 7 段 LED 显示屏,它支持不同尺寸(重量从 2 到 20 像素),具有自定义段的宽度和高度、自定义颜色、过渡和任何程度的倾斜效果。 此皮肤不支持边框半径设置。
这些皮肤为每个数字创建具有 3×5 或 5×7 点的矩阵。 您可以自定义大小(任何点权重值)、自定义颜色、点的边框半径、过渡和任何程度的倾斜效果。
8 平面皮肤:面板、菱形、瓷砖、正方形、条形、矩形、圆形、圆形
基于基本形状的附加皮肤。 这些皮肤仅适用于 Counter 模块,不能与 Numbers 模块一起使用。
可用皮肤列表
- 面板
- 钻石
- 瓷砖
- 酒吧
- 正方形
- 矩形
- 冰柱
- 回合
自定义皮肤允许自由定制
要使用此皮肤,还需要加载动画皮肤。 此皮肤没有预定义的皮肤。 但是,您可以从插件设置中设置自定义颜色、背景、阴影和效果。 这使您可以轻松自定义颜色和样式。 此外,您可以为每个计数器元素独立更改颜色。
普通皮肤允许轻松定制
这是一种非常简单的皮肤,允许自定义颜色、字体和其他元素。
Circular Skin 使用 Canvas 显示圆形表盘
基于第三方 jQuery Knob 库,允许完全自定义数字表盘的大小和颜色(甚至使用透明度)。
轻松定制和集成详细文档
插件具有广泛的皮肤、模式、语言设置。 它很容易定制并与任何基于 jQuery 的项目一起使用。 文档包含所有设置的详细说明、值列表、样式列表等。 插件包有很多演示。
许多事件和方法可用于额外控制
许多事件可用于附加您自己的代码以控制计时器之外的事物(进度条、页面上的事件),以及获取计数或时钟的当前状态、停止或启动计时器等的方法。 包中的示例显示了如何控制倒计时的进度条。
其他插件功能
- 支持翻译使用 语言对象 更改元素标签。
- 附上自己的代码 回调事件 处理开始、停止、完成……
- 许多设置来控制 柜台展示:分隔符、间距、标签……
- 包括方法 启动、停止、重置或修改 计数器对象元素。
- 包括 7 个 PDF 文档文件 有关插件的信息。
- 包括 26 个演示文件 有近 100 个演示。
系统要求
- jQuery 1.7 或更新版本
- 适用于 jQuery 2.x 和 3.x
文档
插件包含插件包内的 PDF 用户和开发人员指南,位于“docs”目录中。 查看这些文档以获取有关插件选项、用法等的信息。 要开始使用插件,请在浏览器中打开“index.html”文件以获取有关插件使用的信息,以及演示列表以帮助您开始使用插件。 您还可以在“演示”目录中找到每个示例。
版本 4 通知
插件的 4.0 版包含以前属于插件的所有皮肤。 因此,一些文件名已更改,因此当您切换到新版本时,请确保检查您需要哪些文件以及是否其中一些文件已更改名称。
变更日志
版本 4.2 / 2023.01.25。
- 更新:使用 jQuery 3.6.3 测试
- 更新:对插件核心的各种改进
版本 4.1 / 2020.06.12。
- 更新:使用 jQuery 3.5.1 测试
- 更新:重构一些 jQuery 事件处理程序
- 更新:对插件核心的各种改进
- 更新:删除了几个未使用变量的实例
- 固定:错误使用动画速度值的几个实例