css3 环形投票

  

    选项1
    
  
  

    选项2
    
  
  ...

.poll li {
  position: relative;
  width: 300px;
  height: 300px;
  list-style: none;
  margin: 20px auto;
}

.poll li::before,
.poll li::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.poll li::before {
  border: 15px solid #eee; /* 环形的底色 */
}

.poll li::after {
  border: 15px solid #ff9900; /* 环形的填充色 */
  clip: rect(0, 50%, 100%, 0); /* 调整填充程度 */
}

var options = document.querySelectorAll('.poll li input');
var circles = document.querySelectorAll('.poll li::after');

for (var i = 0; i < options.length; i++) {
  options[i].addEventListener('change', function() {
    var totalVotes = 0;

    for (var j = 0; j < options.length; j++) {
      totalVotes += options[j].checked ? 1 : 0;
    }

    for (var k = 0; k < circles.length; k++) {
      var percentage = (options[k].checked ? 1 : 0) / totalVotes * 100;
      circles[k].style.clip = 'rect(0, ' + percentage + '%, 100%, 0)';
    }
  });
}