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 相关文章推荐
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
bootstrap css样式之表单
Jan 19 Javascript
自定义PC微信扫码登录样式写法
Dec 12 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
详解Vue之计算属性
Jun 20 Javascript
JS sort排序详细使用方法示例解析
Sep 27 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中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
JavaScript 动态生成方法的例子
2009/07/22 Javascript
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
node.js环境搭建图文详解
2018/09/19 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
Django中对数据查询结果进行排序的方法
2015/07/17 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
python如何对链表操作
2020/10/10 Python
python openssl模块安装及用法
2020/12/06 Python
python 模块导入问题汇总
2021/02/01 Python
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
详细的大学生创业计划书模板
2014/01/27 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
浅谈Python数学建模之线性规划
2021/06/23 Python