圆形进度条倒计时(原创)

所属分类:UI,输入-加载,日期和时间

 30625  323  查看评论 (5)
分享到微信朋友圈
X
圆形进度条倒计时(原创) ie兼容8

更新时间:2018/6/14 下午5:16:45

更新说明:修改css兼容safari浏览器


使用方法

引用jQuery库和/jquery.tzineClock.js

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="time/jquery.tzineClock.js"></script>

hmtl

<div  data-time="2018-06-01 14:59:00" data-type="time" id="fancyClock1"></div>
<div  data-time="2019-09-24 12:12:12" data-type="dayTime" id="fancyClock"></div>

js

$('#fancyClock').tzineClock({
    // 圆的类名并且是当前圆圈的颜色图
    colors: ['circle1', 'circle2', 'circle3', 'circle4'],
    //圆内显示的文本
    words: ['Days', 'Hours', 'Minutes', 'Seconds'],
});
相关插件-加载,日期和时间

jquery播放进度条插件,可拖动

jquery插件播放进度条,可以拖动,可以控制,可设置时间
  加载
 51471  376

jQuery nprogress.js页面加载进度条

jQuery nprogress.js页面加载进度条显示当前网页的加载进度
  加载
 64039  407

jQuery局部加载

一个页面有多个接口请求时,接口返回的速度不一样,可以将所有接口返回后分开渲染,先返回的先渲染
  加载
 21969  307

jQuery 圆型进度条

jQuery canva圆型进度条,可通参数快速修改进度条
  加载
 33695  338

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    へんたい 0
    2018/12/26 11:41:43
    不错,但是一刷新却不是重新倒计时,这个不太好 回复
    云魅风情 0
    2018/8/24 12:53:19
    用了之后把我的div撑开了,可不可以调整小点呢,大概<h4>标签的高度,因为我要放在<h4>标签的旁边 回复
    ┽っ 0
    2018/8/24 11:02:44
    data-type的类型有哪些,只能用于时间的吗 回复
    nice 0
    2018/8/7 16:44:08
    想改成半圆怎么改呢 回复
    天晴了 0
    2018/6/3 17:25:46
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复