无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻 > 公司新闻 >

中山微信小程序开发_js完成添加数字显示的环形进度条效果

时间:2021-01-12 14:34来源:中山微信小程序开发 作者:jianzhan 点击:
js完成提升数据显示信息的环状进展条实际效果 文中关键共享了js完成提升数据显示信息的环状进展条实际效果的实例编码。具备一定的参照使用价值,下边跟随网编一起來看看吧
js实现增加数字显示的环形进度条效果       本文主要分享了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 
 div div /div /div 
 div div /div /div 
 div 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 

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


(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信

在线咨询
联系电话

400-888-8866