利用jQuery实现漂亮的圆形进度条倒计时插件


Posted in Javascript onSeptember 30, 2015

jQuery Final Countdown是一款时尚的圆形进度条样式的jQuery倒计时插件。该倒计时插件可以显示倒计时的秒、分钟、小时和天数。它采用圆形进度条来作为倒计时的动画,非常的时尚大方。

利用jQuery实现漂亮的圆形进度条倒计时插件

在线预览    源码下载

 使用方法

该倒计时插件依赖于jQuery和KineticJS-一个HTML5 Canvas库。使用是要将它们引入。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/kinetic.js"></script>
<script type="text/javascript" src="js/jquery.final-countdown.js"></script>

 HTML结构

该倒计时插件的HTML结构使用下面的HTML结构,为了便于布局使用了Bootstrap作为框架。

<div class="countdown countdown-container container">
 <div class="clock row">
  <div class="clock-item clock-days countdown-time-value col-sm- col-md-">
   <div class="wrap">
    <div class="inner">
     <div id="canvas-days" class="clock-canvas"></div>
     <div class="text">
      <p class="val"></p>
      <p class="type-days type-time">DAYS</p>
     </div><!-- /.text -->
    </div><!-- /.inner -->
   </div><!-- /.wrap -->
  </div><!-- /.clock-item -->
  <div class="clock-item clock-hours countdown-time-value col-sm- col-md-">
   <div class="wrap">
    <div class="inner">
     <div id="canvas-hours" class="clock-canvas"></div>
     <div class="text">
      <p class="val"></p>
      <p class="type-hours type-time">HOURS</p>
     </div><!-- /.text -->
    </div><!-- /.inner -->
   </div><!-- /.wrap -->
  </div><!-- /.clock-item -->
  <div class="clock-item clock-minutes countdown-time-value col-sm- col-md-">
   <div class="wrap">
    <div class="inner">
     <div id="canvas-minutes" class="clock-canvas"></div>
     <div class="text">
      <p class="val"></p>
      <p class="type-minutes type-time">MINUTES</p>
     </div><!-- /.text -->
    </div><!-- /.inner -->
   </div><!-- /.wrap -->
  </div><!-- /.clock-item -->
  <div class="clock-item clock-seconds countdown-time-value col-sm- col-md-">
   <div class="wrap">
    <div class="inner">
     <div id="canvas-seconds" class="clock-canvas"></div>
     <div class="text">
      <p class="val"></p>
      <p class="type-seconds type-time">SECONDS</p>
     </div><!-- /.text -->
    </div><!-- /.inner -->
   </div><!-- /.wrap -->
  </div><!-- /.clock-item -->
 </div><!-- /.clock -->
</div><!-- /.countdown-wrapper -->

以上代码很简单吧,使用jQuery Final Countdown 插件实现漂亮的圆形进度条倒计时很好用,希望本篇文章对大家有所帮助,请大家持续关注本站,本站每天都有新的内容更新。

Javascript 相关文章推荐
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
js本地图片预览实现代码
Oct 09 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
Vuex之理解Store的用法
Apr 19 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 Javascript
JSON 数据格式详解
Sep 13 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 #Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 #Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 #Javascript
jQuery中的ajax async同步和异步详解
Sep 29 #Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 #Javascript
pace.js页面加载进度条插件
Sep 29 #Javascript
js强制把网址设为默认首页
Sep 29 #Javascript
You might like
php去除数组中重复数据
2014/11/18 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
vue-loader教程介绍
2017/06/14 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python hook监听事件详解
2018/10/25 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
什么是python的id函数
2020/06/11 Python
python入门教程之基本算术运算符
2020/11/13 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
实习自荐信
2013/10/13 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
小学毕业感言200字
2015/07/30 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
Oracle表空间与权限的深入讲解
2021/11/17 Oracle