zoukankan      html  css  js  c++  java
  • 环形加载进度条

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            body{ margin: 0; font-family: "arial";}
            #wrap{background: rgba(255, 0, 0, 0.38); 400px; height: 400px;}
        </style>
        
        <script>
            window.onload = function(){
                var svgSN = "http://www.w3.org/2000/svg";
                var oWrap = document.getElementById("wrap");
                var oSvg = document.getElementById("svg1");
                function createTag(tag, objAttr){
                    var oTag = document.createElementNS(svgSN, tag);
                    for(var attr in objAttr){
                        oTag.setAttribute(attr, objAttr[attr]);
                    }
                    return oTag;
                }
                
                var outerXY = [{x: 80, y: 200}];
                var innerXY = [{x: 130, y: 200}];
                var centX = 200;
                var centY = 200;
                var outerR = 120;
                var innerR = 70;
                var angle = 360;
                var agSum = 0;
                var agNum = 0;
                var timer = null;
                
                var oText = createTag('text', {'x': centX, 'y': centY + 13, 'font-size': '30', 'text-anchor': 'middle', 'fill': '#fff', 'font-family': 'arial'});
                oText.innerHTML = agNum + "%";
                oSvg.appendChild(oText);
                
                for(var i=0; i<angle; i++){
                    agSum++;
                    var outerX = centX - Math.cos(agSum * Math.PI / 180) * outerR;
                    var outerY = centY - Math.sin(agSum * Math.PI / 180) * outerR;
                    outerXY.push({x: outerX, y: outerY});
                    
                    var innerX = centX - Math.cos(agSum * Math.PI / 180) * innerR;
                    var innerY = centY - Math.sin(agSum * Math.PI / 180) * innerR;
                    innerXY.push({x: innerX, y: innerY});
                }
                
                var oPath = createTag('path', {});
                oSvg.appendChild(oPath);
                var json = {};
                
                timer = setInterval(function(){
                    
                    agNum++;
                    json = {'fill': 'rgba(255, 255, 255, 0.6)', 'd': 'M' + outerXY[0].x + ' ' + outerXY[0].y + 'A' + outerR + ' ' + outerR + ' 0 ' + (agNum > 180 ? 1 : 0) + ' 1 ' + outerXY[agNum].x + ' ' + outerXY[agNum].y + 'L' + innerXY[agNum].x + ' ' + innerXY[agNum].y + 'A' + innerR + ' ' + innerR + ' 0 ' + (agNum > 180 ? 1 : 0) + ' 0 ' + innerXY[0].x + ' ' + innerXY[0].y + 'Z'};
                    
                    for(var attr in json){
                        oPath.setAttribute(attr, json[attr]);
                    }
                    oText.innerHTML = Math.round(agNum/360 * 100) + "%";
                    
                    if(agNum == agSum){
                        clearInterval(timer);
                        alert("记载完成, 跳转页面");
                    }
                }, 20);
                
                
            }
        </script>
    </head>
    <body>
        <div id="wrap">
            <svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
            </svg>
        </div>
    </body>
    </html>

    效果展示:

  • 相关阅读:
    hdu 3268 09 宁波 现场 I
    hdu 3697 10 福州 现场 H
    CodeForces Round #521 (Div.3) D. Cutting Out
    #Leetcode# 226. Invert Binary Tree
    zufe 蓝桥选拔
    #Leetcode# 100. Same Tree
    #Leetcode# 6. ZigZag Conversion
    PAT 1084 外观数列
    #Leetcode# 38. Count and Say
    #Leetcode# 22. Generate Parentheses
  • 原文地址:https://www.cnblogs.com/jiechen/p/5003645.html
Copyright © 2011-2022 走看看