带有单选按钮的径向进度条答案

【问题标题】：Radial progress bar with radio buttons带有单选按钮的径向进度条
【发布时间】：2017-12-01 16:21:55
【问题描述】：

我想让这段代码成为一个与单选按钮一起使用的圆形进度条，这个是水平进度条。我的代码：

$(document).ready(function() {
    $('#progressbar').progressbar({
        value: 0
    });

    $('[name*=answers]').click(function() {
        var totalChecked = 0;
        var totalRadioGroups = 0;
        var previousName = '';
        $.each($('[name*=answers]'), function(index, value) {
            var radioName = $(this).attr('name');
            var radioId = this.id;

            if (previousName != radioName) {
                totalRadioGroups++;
            }
            if ($('#' + radioId).is(':checked')) {
                totalChecked++;
            }
            previousName = radioName;
        });
        var percentage = (totalChecked / totalRadioGroups) * 100;
        $('#progressbar').progressbar('value', percentage);
        $('#percentage').html(percentage.toFixed(2) + "%");
    });

});

<div id="progressbar"></div>
<div id="percentage"></div>

【问题讨论】：

标签： javascript jquery html css progress-bar

【解决方案1】：

我对圆形进度条做了一些研究，我想出的最简单的解决方案是；在画布上绘图。该链接是DEMO，您可以在其中选择要划分进度条的部分，然后单击下一步，每次单击都会开始继续。相信我，这是我找到的最简单的方法，您可以根据自己的需要进行自定义。

HTML

<canvas id="myCanvas" width="220" height="220"></canvas>
<br>
<br>
<button id="minus">-</button> <span id="num">0</span> <button id="plus">+</button>
<br><br>
<button id="next">Next</button>

CSS

#myCanvas{
  border:none;
}

var f = 0;
$(document).ready(function(){

    var n = $('#num').text();

  $('#minus').click(function(){
   if(n>0){
     n--;
     $('#num').text(n);
   }
  });

  $('#plus').click(function(){
     n++;
     $('#num').text(n);
  });

  $('#next').click(function(){
    if(n == 0){
      draw(2);
    } else {
    var x = 2/n;
    x= f+x;
    draw(x);
    }
  });

});

function draw(e){
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.lineWidth = 15;
  ctx.arc(95,50,40,0,e*Math.PI);
  ctx.stroke();
  f = e;
};

【讨论】：