利用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 相关文章推荐
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
TypeScript入门-接口
Mar 30 Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 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
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
使用PDB模式调试Python程序介绍
2015/04/05 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
行政经理的岗位职责
2013/11/23 职场文书
大学考试作弊检讨书
2014/01/30 职场文书
大专毕业生求职信
2014/07/05 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
会计主管岗位职责
2015/04/02 职场文书
节约用电倡议书
2015/04/28 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python