Question

如何在JavaScript中显示圆圈或圆弧的百分比。我想以百分比显示黑色周长。如果我输入最大值20和最小值10，它应该显示圆的50％（弧）怎么做？。

<!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>

Answer 1

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">

Answer 2

HTML code：

 <!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);
     } 
});

Answer 3

HTML code：

 <?php 
 require('../config.php');
if(!isset($_SESSION['can_access']) || $_SESSION['can_access'] !== true ) 
 header('Location: login.php'); 
global $DB,$USER; 
//$id=$USER->id; 
  $deleted_on = date("Y-m-d H:i:s"); 
 echo $id = $_GET['id'];
 $sql= "update mdl_moog_groups SET deletestatus = '0' where  WHERE 
 mdl_moog_groups.id ='$id'";

  $sql.="update mdl_assigncourses set delete_status = '0' WHERE 
  mdl_moog_groups.id ='$id' and groupid != '0'";

 if ($DB->execute($sql) === TRUE) {
  echo "Record updated successfully";
  } else {
  echo "Error updating record: " . $conn->error;
 }
header("Location:groups.php"); 
?>

Jquery脚本：

 <!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>

Javascript代码：

$('#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中显示百分比弧

3 个答案: