在javascript中显示百分比圆弧

如何在JavaScript中显示形式为圆形或圆弧的百分比。我想显示百分比的黑色圆周。说如果我输入最大值20和最小值10，它应该显示一个圆的50％（圆弧）如何做？在javascript中显示百分比圆弧

<!DOCTYPE html> 
<html> 
    <body> 

    //displays circle with dimensions 
    <svg height="300" width="300"> 
     <circle cx="150" cy="100" r="90" stroke="brown" stroke-width="10" fill="white"/> 
    </svg> 
    <br/><br/> 

    maxValue: <input type="text" value="" id="value1" /><br/> 
    minValue: <input type="text" value="" id="value2" /><br/> 
    <input type="button" value="Stroke-percentage" onclick="" /> 
    stroke-percentage = maxValue/minValue * 100 
    </body> 
</html>

来源

2017-09-20 Krithika

检查[这]（https://codepen.io/JMChristensen/笔/ Ablch） – Durga

HTML代码：

<!DOCTYPE html> 
    <html> 
    <body> 
    <svg id="svg" width="200" height="200" viewport="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
     <circle r="90" cx="100" cy="100" fill="transparent" stroke-width="1em" stroke-dasharray="565.48" stroke-dashoffset="0" stroke="#666"></circle> 
     <circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="297.48" stroke-dashoffset="0" stroke="red" stroke-width="1em"></circle> 
    </svg> 

    Value: <input type="text" value="" id="value1" /><br/> 
    <input type="button" value="Stroke-percentage" id="generateProgress" /> 
    </body> 
    </html>

jQuery脚本：

$('#generateProgress').on('click', function(){ 
    var val = parseInt($('#value1').val()); 
    var $circle = $('#svg #bar'); 

    if (isNaN(val)) { 
    val = 100; 
    } 
    else{ 
    var r = $circle.attr('r'); 
    var c = Math.PI*(r*2); 
    if (val < 0) { val = 0;} 
     if (val > 100) { val = 100;} 
      var pct = ((100-val)/100)*c; 
      $circle.css({ strokeDashoffset: pct}); 
      $('#cont').attr('data-pct',val); 
    } 
});

来源

2017-09-20 08:44:56 santho

谢谢......但我不想使用任何库。是否可以在普通javascript – Krithika

Santho的回答是SVG正确的，但我想提一提HTML5的Canvas元素作为一种替代方案：

/** 
 
* arcPercentage 
 
* 
 
* @param {{ radius?: number, rate?: number, color?: string }} parameters 
 
* @returns 
 
*/ 
 
function arcPercentage(parameters) { 
 
    var radius = (parameters.radius !== void 0 ? parameters.radius : 100); 
 
    var rate = (parameters.rate !== void 0 ? parameters.rate : 1); 
 
    var color = (parameters.color !== void 0 ? parameters.color : "rgba(255,0,0,1)"); 
 
    var c = document.createElement("canvas"); 
 
    var size = c.width = c.height = radius * 2; 
 
    var ctx = c.getContext("2d"); 
 
    if (rate == 0) { 
 
    return c; 
 
    } 
 
    ctx.fillStyle = color; 
 
    ctx.beginPath(); 
 
    //Start in origo 
 
    ctx.arc(radius, radius, 0, 0, 0); 
 
    //Move to start position 
 
    ctx.arc(radius, radius, radius, 0, 0); 
 
    //Arc to percentage 
 
    ctx.arc(radius, radius, radius, 0, (Math.PI * 2) * rate); 
 
    //move to origo 
 
    ctx.arc(radius, radius, 0, (Math.PI * 2) * rate, (Math.PI * 2) * rate); 
 
    ctx.fill(); 
 
    ctx.closePath(); 
 
    return c; 
 
} 
 

 
//TEST 
 
//Get nodes 
 
var inputNode = document.getElementById("circle-input"); 
 
var imageNode = document.getElementById("circle-image"); 
 
//Bind event 
 
inputNode.onchange = inputNode.onkeyup = inputNode.onmouseup = function() { 
 
    //Only fire if valid input 
 
    if (inputNode.validity.valid) { 
 
    //Parse value 
 
    var value = parseInt(inputNode.value, 10)/100; 
 
    //Draw the arc 
 
    imageNode.src = arcPercentage({ 
 
     color: "blue", 
 
     radius: 100, 
 
     rate: value 
 
    }).toDataURL(); 
 
    } 
 
};

<input id="circle-input" min="0" max="100" type="number" value="0"> 
 
<br/> 
 
<img id="circle-image">

来源

2017-09-20 09:03:11

@absoluty正确的情况下完成 –

HTML代码：

<!DOCTYPE html> 
    <html> 
    <body> 
    <svg id="svg" width="200" height="200" viewport="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
     <circle r="90" cx="100" cy="100" fill="transparent" stroke-width="1em" stroke-dasharray="565.48" stroke-dashoffset="0" stroke="#666"></circle> 
     <circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="297.48" stroke-dashoffset="0" stroke="red" stroke-width="1em"></circle> 
    </svg> 

    Value: <input type="text" value="" id="value1" /><br/> 
    <input type="button" value="Stroke-percentage" onclick="generateProgress()" /> 
    </body> 
    </html>

jQuery脚本：

$('#generateProgress').on('click', function(){ 
    var val = parseInt($('#value1').val()); 
    var $circle = $('#svg #bar'); 

    if (isNaN(val)) { 
    val = 100; 
    } 
    else{ 
    var r = $circle.attr('r'); 
    var c = Math.PI*(r*2); 
    if (val < 0) { val = 0;} 
     if (val > 100) { val = 100;} 
      var pct = ((100-val)/100)*c; 
      $circle.css({ strokeDashoffset: pct}); 
      $('#cont').attr('data-pct',val); 
    } 
});

Javascript代码：

var value = document.getElementById("value1"); 
function generateProgress() { 
    var val = parseInt(value); 
    var circle = document.getElementById('bar'); 

    if (isNaN(val)) { 
     val = 100; 
    } 
    else{ 
    var r = circle.getAttribute('r'); 
    var c = Math.PI*(r*2); 
    if (val < 0) { val = 0;} 
     if (val > 100) { val = 100;} 
      var pct = ((100-val)/100)*c; 
      circle.style.strokeDashoffset = pct; 
    } 

}

来源

2017-09-20 09:36:39 santho

在javascript中显示百分比圆弧

回答

相关问题