js实现增加数字显示的环形进度条效果


Posted in Javascript onFebruary 05, 2017

效果如下:

js实现增加数字显示的环形进度条效果

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<link>
<meta name="page-view-size" content="640*530">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style>
 .wapper{
  position:absolute;
  left:100px;
  top:100px;
  box-sizing:border-box;
 }
 .text{
  position:absolute;
  left:30px;
  top:40px;
  font-family:"Microsoft YaHei";
  font-weight:bold;
  color:indianred;
 }
 .rect{
  position:absolute;
  width:50px;
  height:100px;
  overflow:hidden;
 }
 .right{
  left:50px;
 }
 .circle{
  position:absolute;
  width:100px;
  height:100px;
  border-radius:50%;
  box-sizing:border-box;
  border:5px solid indianred;
 }
 .circle_right{
  left:-50px;
  clip:rect(0px 50px 100px 0px);
  animation:roll 5s linear 0s 1 forwards;
 }
 .circle_left{
  clip:rect(0px 100px 100px 50px);
  animation:roll 5s linear 5s 1 forwards;
 }
 @keyframes roll{
  0%{transform:rotate(0deg)}
  100%{ transform:rotate(180deg)}
 }
</style>
<body leftmargin="0" topmargin="0">
<div class="wapper">
 <div class="rect right"><div class="circle circle_right"></div></div>
 <div class="rect left"><div class="circle circle_left"></div></div>
 <div class="text"><span id="num">1</span><span>%</span></div>
</div>
</body>
<script type="text/javascript">
 window.onload=function(){
  var $num=document.getElementById('num');
  (function(){
   var i=1,timer;
   add();
   function add(){
    var timer=setTimeout(function(){
     add();
    },100);
    $num.innerHTML=i;
    i<100?i++:clearTimeout(timer)
   }
  })();
 }
</script>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
js微信分享接口调用详解
Jul 23 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
JavaScript parseInt0.0000005打印5原理解析
Jul 23 Javascript
JS实现复制内容到剪贴板功能
Feb 05 #Javascript
js实现适合新闻类图片的轮播效果
Feb 05 #Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 #Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 #Javascript
thinkjs之页面跳转同步异步操作
Feb 05 #Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 #Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 #Javascript
You might like
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
货车司机岗位职责
2014/03/18 职场文书
医学生求职自荐书
2014/06/12 职场文书
中专生自荐信
2014/06/25 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
爱心募捐感谢信
2015/01/22 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
驻村工作简报
2015/07/20 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android