利用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 相关文章推荐
Prototype String对象 学习
Jul 19 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 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
计数器详细设计
2006/10/09 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
详解python的几种标准输出重定向方式
2016/08/15 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
pygame实现俄罗斯方块游戏(基础篇2)
2019/10/29 Python
pycharm导入源码的具体步骤
2020/08/04 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
六月份红领巾广播稿
2014/02/03 职场文书
教学评估实施方案
2014/03/16 职场文书
酒店宣传语大全
2015/07/13 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python