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 相关文章推荐
javascript遍历控件实例详细解析
Jan 10 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
JS闭包用法实例分析
Mar 27 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 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
5.PHP的其他功能
2006/10/09 PHP
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
PHP 编写大型网站问题集
2010/05/07 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
python实现弹跳小球
2019/05/13 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
资产经营总监岗位职责范文
2013/12/01 职场文书
皮肤科医师岗位职责
2013/12/04 职场文书
军神教学反思
2014/02/04 职场文书
有创意的广告词
2014/03/18 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
生产车间标语
2014/06/11 职场文书
委托书如何写
2014/08/30 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server