jQuery TimeCircles 倒计时
在线实例
默认 | 倒计时 |
使用方法
- <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery计时器插件TimeCircles演示1</h1>
- <p style="width: 580px; margin: 0 auto; text-align: center;">离2014年1月1日还有(2014年1月1日已过)</p>
- <div id="someTimer1" class="someTimer" data-date="2014-01-01 00:00:00" style="width: 700px; margin: 0 auto;"></div>
- <p style="width: 580px; margin: 0 auto; text-align: center;">倒计时10秒后结束</p>
- <div id="someTimer2" class="someTimer" data-timer="10" style="width: 700px; margin: 0 auto;"></div>
- <p style="width: 580px; margin: 0 auto; text-align: center;">页面开始时计时</p>
- <div id="someTimer3" class="someTimer" style="width: 700px; margin: 0 auto;"></div>
- $(function() {
- $('#someTimer1').TimeCircles({
- time: {
- Days: {
- show: false,
- text: "天",
- color: "#FC6"
- },
- Hours: {
- show: false,
- text: "时",
- color: "#9CF"
- },
- Minutes: {
- show: false,
- text: "分",
- color: "#BFB"
- },
- Seconds: {
- show: false,
- text: "秒",
- color: "#F99"
- }
- }
- });
- $('#someTimer2').TimeCircles({
- time: {
- Days: {
- show: false,
- text: "天",
- color: "#FC6"
- },
- Hours: {
- show: false,
- text: "时",
- color: "#9CF"
- },
- Minutes: {
- show: false,
- text: "分",
- color: "#BFB"
- },
- Seconds: {
- show: false,
- text: "秒",
- color: "#F99"
- }
- },
- refresh_interval: 0.1,
- count_past_zero: false,
- circle_bg_color: "#ddd",
- fg_width: 0.03,
- bg_width: 0.2
- });
- $('#someTimer3').TimeCircles({
- time: {
- Days: {
- show: false,
- text: "天",
- color: "#FC6"
- },
- Hours: {
- show: false,
- text: "时",
- color: "#9CF"
- },
- Minutes: {
- show: false,
- text: "分",
- color: "#BFB"
- },
- Seconds: {
- show: false,
- text: "秒",
- color: "#F99"
- }
- },
- refresh_interval: 0.1,
- count_past_zero: true,
- circle_bg_color: "#eee",
- fg_width: 0.05,
- bg_width: 1
- });
- });
jQuery TimeCircles 倒计时的更多相关文章
- jQuery实现倒计时效果-杨秀徐
本实例效果:剩余368天22小时39分57秒结束 代码简单易懂,适用各种倒计时: <!DOCTYPE html> <head> <title>jQuery实现倒计时 ...
- jQuery自适应倒计时插件
jQuery自适应倒计时插件 在线演示本地下载
- jQuery实现倒计时重新发送短信验证码功能示例
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- jquery.countdown 倒计时插件的学习
1.第一种简单的使用 第一个时间是你的倒计时截止时间,finalDate格式可以是YYYY/MM/DD MM/DD/YYYY YYYY/MM/DD hh:mm:ss MM/DD/YYYY hh:mm: ...
- jquery实现倒计时
<html> <head> <meta charset="utf-8"/> <title>jquery实现倒计时</title ...
- jQuery控制倒计时
1.1 秒杀的倒计时 做秒杀网页总免不了倒计时,但没有很好的服务器,啥资源都没有,只能将部分任务交给浏览器去处理,比如秒杀首页的倒计时,因为真正秒杀是在具体页面,首页只是展示而已,所以误差一点是允许的 ...
- jQuery简单倒计时插件
一. 效果预览 二. 实现 1. 按照特定的类结构布局. 2. 需要先引入jQuery,再引入此文件. /** * Author: CC11001100 * * 简单倒计时 * * 1. 支持页面内同 ...
- jquery网页倒计时效果,秒杀,限时抢购!
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- jquery 60s倒计时
前端开发中经常用到的发送按钮倒计时,每次都是重写,挺麻烦的,记录一下,以后直接来复制代码 <!DOCTYPE html> <html> <head> <met ...
随机推荐
- binary 和 varbinary 用法
数据类型 binary(n) 和 varbinary(n) 用于存储二进制数据,n是指字节数量: binary( n ):长度为 n 字节的固定长度二进制数据,其中 n 是从 1 到 8,000 的值 ...
- 面向对象tab栏例子分析
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- .NET应用服务器
昨天参加Oracle的一个活动,知道了WebLogic的强大,于是对应用服务器产生了兴趣. WebLogic是一个Java EE应用服务器(与Java EE对应的另外一个技术平台就是.NET). 为什 ...
- C#预处理器指令 ,你造吗??? (●'◡'●)
什么是c#预处理指令?? 用于在 C# 源代码中嵌入的编译器命令. C#预处理器指令有哪些?? ↓↓↓这些就是预处理器指令啦 下面我们一一道来(●'◡'●) 1.#if ,#elif,#else,en ...
- HTML Inspector – 帮助你编写高质量的 HTML 代码
HTML Inspector 是一款代码质量检测工具,帮助你编写更优秀的 HTML 代码.HTML Inspector 使用 JavaScript 编写,运行在浏览器中,是最好的 HTML 代码检测工 ...
- [java] jsoup使用简介-汇率换算器实现-插曲2
[java] jsoup使用简介-汇率换算器实现-插曲2 // */ // ]]> [java] jsoup使用简介-汇率换算器实现-插曲2 Table of Contents 1 系列文章 ...
- Visual Studio远程调试监视器(MSVSMON.EXE)的32位版本不能用于调试64位进程或64位转储
在VS2013中调试Silverlight项目时,提示:无法附加.Visual Studio远程调试监视器(MSVSMON.EXE)的32位版本不能用于调试64位进程或64位转储.请改用64位版本. ...
- .NET的EF框架中:在应用程序配置文件中找不到名为“”的连接字符串问题
今天在使用EF Code First框架时,当把模型都定义好了,想通过程序包管理控制台利用enable-migrations –force来生成数据库表的时候报错了,如下: 找不到连接字符串,但是我仔 ...
- DP - 2016网易杭研笔试题A
2016网易杭研笔试题A Problem's Link ------------------------------------------------------------------------ ...
- 将BootstrapJS和AngularJS结合使用以及为什么不用jQuery
原文网址链接:http://ourjs.com/detail/54e18c51232227083e000034Bootstrap 和 Angular 都是人们大量使用的工具.在很多项目中,它们需要 ...