Question

我想在这张照片的水平线上制作6个百分比的圆圈。

我在网上做了很多搜索，发现了很多结果。我发现这个网站是CSS Progress Circle。将代码放入我现有的代码时，它不起作用。每当我尝试将两个或多个它们放在代码中时，它就会消失或者弄乱其余的代码。有人能帮助我吗？

HTML

<!DOCTYPE html>
<html>
<head> 
 <link href="about.css" type="text/css" rel="stylesheet"/>

    <title>Nutterbug Graphics</title>
    <center>
    <div id="title">
    <img style="border:10px outset silver"; "margin:0px"; src="Pictures/fulb_flat.png" width="275" height="250" id="bulb2" hspace="20">
    <img src="Banner_Flat.png"; width="700" height="250" id="graphics" > 
    <img style="border:10px outset silver"; "margin:0px"; src="Pictures/fulb_flat2.png" width="275" height="250" id="bulb2" hspace="20">
    </center>   
    </div>
</head>
<body bgcolor="#1c8ab4">
<div class="bg">
 <h1>Savannah Lundquist </h1>
<div class="p">
Info .....  
</p></div></div>

<div class="body ftr_section s_gray">

<div class="chart" id="graph" data-percent="88"></div>

</div></div></div>

<div class="body ftr_section s_white">
<h1>Skills and Qualifications</h1>
<div class="sft_skills">
    <p>
    <div class="skills">
<img src="Pictures/T2.png" height="30%" width="30%">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="about.js"></script>
</body>
</html>

CSS

div {
    position:relative;
    margin:80px;
    width:220px; height:220px;
}
canvas {
    display: block;
    position:absolute;
    top:0;
    left:0;
}
span {
    color:#555;
    display:block;
    line-height:220px;
    text-align:center;
    width:220px;
    font-family:sans-serif;
    font-size:40px;
    font-weight:100;
    margin-left:5px;
}

Jquery的

$(document).ready(function(){

    $("#show").click(function(){
    $(this).parent().addClass("more");
    $(this).hide();
        $("#complete").show();

    });

    $("#hide").click(function(){
        $("#complete").hide();
    $("#show").show();
    });

var el = document.getElementById('graph'); // get canvas

var options = {
    percent:  el.getAttribute('data-percent') || 25,
    size: el.getAttribute('data-size') || 220,
    lineWidth: el.getAttribute('data-line') || 15,
    rotate: el.getAttribute('data-rotate') || 0
}

var canvas = document.createElement('canvas');
var span = document.createElement('span');
span.textContent = options.percent + '%';

if (typeof(G_vmlCanvasManager) !== 'undefined') {
    G_vmlCanvasManager.initElement(canvas);
}

var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;

el.appendChild(span);
el.appendChild(canvas);

ctx.translate(options.size / 2, options.size / 2); // change center
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg

//imd = ctx.getImageData(0, 0, 240, 240);
var radius = (options.size - options.lineWidth) / 2;

var drawCircle = function(color, lineWidth, percent) {
        percent = Math.min(Math.max(0, percent || 1), 1);
        ctx.beginPath();
        ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
        ctx.strokeStyle = color;
        ctx.lineCap = 'round'; // butt, round or square
        ctx.lineWidth = lineWidth
        ctx.stroke();
};

drawCircle('#efefef', options.lineWidth, 100 / 100);
drawCircle('#555555', options.lineWidth, options.percent / 100);
and CSS
});

如何仅使用代码制作百分比圆圈

0 个答案: