利用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 相关文章推荐
jQuery使用手册之三 CSS操作
Mar 24 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 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
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
php简单实现数组分页的方法
2016/04/30 PHP
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
Python读写文件方法总结
2015/06/09 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
python中下标和切片的使用方法解析
2019/08/27 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
交通安全演讲稿
2014/01/07 职场文书
关于赌博的检讨书
2014/01/08 职场文书
社会实践感言
2014/01/25 职场文书
小学毕业感言300字
2014/02/19 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
个人对照检查材料思想汇报
2014/09/26 职场文书
离婚协议书样本
2015/01/26 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
python某漫画app逆向
2021/03/31 Python
Python Django获取URL中的数据详解
2021/11/01 Python
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技