javascript - 中心带有百分比值的圆圈显示在不同类别下选中的一组复选框的结果

Question

我想要一个 java 脚本以圆圈的形式显示结果，圆圈的中心是百分比值，这些百分比值是由于在不同类别下选中的复选框数量而返回的。圆的半径需要根据百分比值计算。比方说，小 40%，大 80%。

例如，

环境:

1. 保持环境清洁，

2. 避免污染。

   性质:

3. 保护自然。

4. 种树。

   如果在“环境”部分中选中 1 个复选框，如果在“自然”中选中 2 个复选框，则“自然”需要具有高百分比值以显示圆心的百分比值，而具有低百分比值的“环境”则显示较小的圆中心的百分比值。我需要有5个这样的圈子。有人可以帮忙吗。

谢谢。

Answer 1

尝试，

JavaScript:

   $(function(){

    var maxWidth = 500, // This is the max width of your circle

    percent = Number($('#result').text()); // This is the percentage value

    percent = percent / 100;

    $("#circle").css({

        "width" : maxWidth * percent,

        "height" : maxWidth * percent,


    });
});

CSS:

  #circle {

    border: 1px solid red;

    border-radius: 50%;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    background:blue;