Question

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

$(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>

Answer 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;
}

JS

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

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

1 个答案: