利用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 相关文章推荐
JS应用之禁止抓屏、复制、打印
Feb 21 Javascript
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 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
如何给phpadmin一个保护
2006/10/09 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
JavaScript中“+=”的应用
2007/02/02 Javascript
JScript的条件编译
2007/05/29 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
padas 生成excel 增加sheet表的实例
2018/12/11 Python
详解Python 函数如何重载?
2019/04/23 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
pycharm的python_stubs问题
2020/04/08 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
什么是SCM(软件配置管理)
2014/08/16 面试题
介绍一下Java中标识符的命名规则
2014/02/03 面试题
应届大学生的推荐信
2013/11/20 职场文书
毕业生的自我评价分享
2013/12/18 职场文书
母亲去世追悼词
2015/06/23 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers