html计时器插件,jQuery计时器插件TimeCircles

jQuery计时器插件TimeCircles

分类：代码

日期：2016-07-31

点击(26,538)

下载(0)

来源：未知

TimeCircles 是一个 jQuery 时间类插件，它能够制作出一个漂亮环的形时间，可用于计时或倒计时。虽然 TimeCircles 默认的样式已经很漂亮了，但它还提供了各种参数来自定义，你可以很方便的设置包括环形的大小、进度条的大小、环形的颜色、进度条的颜色、多少刷新以及控制暂停和开始。

兼容性

TimeCircles 的环形面板是 HTML5 canvars，所以它不兼容 IE6 – IE8。

使用方法

1、引入文件

2、HTML

可选 data-date 和 data-timer 两个属性，data-date 的值是具体的莫一天多少小时多少分钟多少秒，如2014-01-01 00:00:00，他的作用是计算现在与这个时间过了多久或还有多久；data-timer 的值是一个整数，如900，它的作用是一个秒表，单位是秒。如果这两个属性都缺省，那么它会在页面一开始的时候从0秒开始计时。

3、JavaScript

$(function(){

$(.someTimer').TimeCircles();

});

参数

类型

说明

默认值

start

布尔值

是否自动开始

true

refresh_interval

数字

多少时间刷新面板

0.1

count_past_zero

字符串

截止后是否归0，当倒计时结束后面板全部显示0

true

circle_bg_color

字符串

环形背景颜色

#60686F

use_background

布尔值

是否显示背景颜色

true

fg_width

数字

环形宽度

0.1

bg_width

数字

进度条的宽度

1.2

time

json

单独设置每个环形的文字、颜色

start()

函数

开始

无

stop()

函数

停止

无

destroy()

函数

从页面中删除计时器

无

html计时器插件,jQuery计时器插件TimeCircles相关推荐

SlidesJS基本使用方法和官方文档解释【Jquery幻灯片插件 Jquery相册插件】
SlidesJS基本使用方法和官方文档解释 [Jquery幻灯片插件 Jquery相册插件] 标签: jquery文档functionstringdiv相册 2012-04-19 15:23 3931 ...
jquery php 分页插件,jQuery 分页插件代码
jQuery 分页插件代码 js代码 var newlist = new Vue({ el: '#app', data: { current_page: 1, //当前页 pages: 50, //总 ...
php幻灯片的插件,jQuery幻灯片插件Flickerplate
简介 Flickerplate 是一个基于 jQuery 的幻灯片插件,压缩后仅 6KB.它支持左右箭头控制.圆点导航.自动播放.主题设置.HTML data 属性等等. 兼容浏览器兼容:Flick ...
php旅游网站景区天气插件,jquery天气插件
插件描述:一个简单的jQuery插件可以显示当前的天气信息,使用雅虎天气的任何位置. 一个简单的jQuery插件可以显示当前的天气信息,使用雅虎天气的任何位置.开发者James Fleeting.下载 ...
html ppt 插件,jquery幻灯片插件slidr.js
插件描述:一个简单的,轻量级的JavaScript库添加幻灯片切换到您的网页,无依赖. 特点添加尽可能多的Slidr的,只要你想. 动态调整大小 - 适应其内容的大小,除非你不想要它. 键盘导航 ...
html5 新手引导插件,jQuery引导插件intro.js
插件描述:intro.js分步导航 ======================以下内容由苍白提供===================== 设置参数: 设置多个格式 json格式: key:va ...
jQuery插件 -- jQuery UI插件
jQuery UI 主要分为3个部分: 交互.微件和效果库交互:这里都是一些与鼠标交互相关的内容.包括拖动(Draggable).置放(Doppable).缩放(Resizable).选择(Sele ...
php jq截图插件,jQuery jcrop插件截图使用方法_jquery
在后台来进行图片切割. 头像截取的原理:在前台使用jcrop获取切面的x轴坐标.y轴坐标.切面高度.切面宽度,然后将这四个值传给后台.在后台要进行放大处理:将切面放大N倍,N=原图/前台展示的头像. ...
html怎么引入圆角插件,jQuery圆角插件demo页面张鑫旭-鑫空间-鑫生活
Auto-Ready! 一.可用的模式默认的圆角样式表现round Round $(this).corner(); Bevel $(this).corner("bevel"); ...
jQuery分页插件(jquery.page.js)的使用
效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件--jQuery.page.js用法很简单,效果很棒 1.前端首先html的head中引入相关css与js <link re ...

html计时器插件,jQuery计时器插件TimeCircles

html计时器插件,jQuery计时器插件TimeCircles相关推荐

最新文章

热门文章