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

效果如下：

代码如下：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML linkmeta name=' page-view-size ' Content=' 640 * 530 ' meta http-equiv=' Content-Type ' Content=' text/HTML；charset=utf-8'/headstyle .wapper { position : absolute eleft :100 pxtop :100 px盒子大小：边框盒子；} .text { position : absolute eleft :30 pxtop :40 pxfont-family : '微软雅黑；字体粗细：加粗；color:indianred}。rect { position:absolute宽度：50 px高度：100 px飞越：隐藏；} .右{ left:50px}。圆形{ position:absolute绝对值宽度宽度：100像素高度：100 px边界半径：50%;盒子大小：边框盒子；border:5px实心印度圆；} .circle _ right { left :-50px；夹子： rect(0px 50px 100px 0px)；动画：向前滚动5s线性0s 1；} .circle _ left { clip : rect(0px 100px 100px 50px)；动画：向前滚动5s线性5s 1；} @关键帧滚动{ 0% { transform : rotate(0)} 100% { transform : rotate(180)}/style body左边距=' 0 '上边距=' 0 ' div class=' wapper ' div class=' rect right ' div class=' circle _ right '/div/div class=' rect left ' div class=' circle _ left '/div/div class=' text ' span id=' num ' 1/span %/span/div/div(function(){ var I=1定时器；add()；function add(){ var timer=setTimeout(function(){ add()；},100);$ num。innerHTMl=I；i100？i :clearTimeout(计时器)} }));}/脚本/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！