利用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 相关文章推荐
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
jQuery中队列queue()函数的实例教程
May 03 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
原生JS实现幻灯片
Feb 22 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
谈谈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函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
php简单获取复选框值的方法
2016/05/11 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
php格式化时间戳
2016/12/17 PHP
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
JavaScript 字符串连接性能优化
2008/12/20 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
python生成器generator用法实例分析
2015/06/04 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
介绍下java.util.Arrays类
2012/10/16 面试题
好邻里事迹材料
2014/01/16 职场文书
三个儿子教学反思
2014/02/03 职场文书
师德师风学习材料
2014/12/19 职场文书
小学老师对学生的评语
2014/12/29 职场文书
幼儿园见习总结
2015/06/23 职场文书
Python图像处理之图像拼接
2021/04/28 Python
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技