javascript - 使用 jQuery 在设定的时间内更改值？

Question

我正在做一个需要循环进度条的元素。我在这里找到了一个可以解决问题的方法:

http://codepen.io/shankarcabus/pen/GzAfb

但我需要做的是在页面加载时为其设置动画，以便每次它的值都会增加:

<div class="progress-pie-chart" data-percent="43">

所以在“page1.htm”上，我需要数据百分比值自动从 0-20 递增。在 20-33 等的“page2.htm”上。我是 jQuery 的新手，所以老实说，我不知道从哪里开始。

我如何创建一个函数来增加数据百分比值超过 500 毫秒？

Answer 1

使用 setInterval 我们可以生成类似的东西。我们还使用一些数学计算基于 fps 的步骤来创建流畅的动画。小数也可以用于百分比

var start = 0;
var end = 30;
var time = 800; //in ms
var fps = 30;

var increment = ((end-start)/time)*fps;

$('.progress-pie-chart')[0].dataset.percent = start;

var timer = setInterval(function() {
  $('.progress-pie-chart')[0].dataset.percent = parseFloat($('.progress-pie-chart')[0].dataset.percent) + increment;

  if (parseFloat($('.progress-pie-chart')[0].dataset.percent) >= end) {
    clearInterval(timer);
  }

  var $ppc = $('.progress-pie-chart'),
    percent = parseFloat($ppc[0].dataset.percent),
    deg = 360 * percent / 100;

  if (percent > 50) {
    $ppc.addClass('gt-50');
  }
  $('.ppc-progress-fill').css('transform', 'rotate(' + deg + 'deg)');
  $('.ppc-percents span').html(parseInt(percent, 10) + '%');
}, fps);

.progress-pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #E5E5E5;
  position: relative;
}
.progress-pie-chart.gt-50 {
  background-color: #81CE97;
}
.ppc-progress {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  clip: rect(0, 200px, 200px, 100px);
}
.ppc-progress .ppc-progress-fill {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  clip: rect(0, 100px, 200px, 0);
  background: #81CE97;
  transform: rotate(60deg);
}
.gt-50 .ppc-progress {
  clip: rect(0, 100px, 200px, 0);
}
.gt-50 .ppc-progress .ppc-progress-fill {
  clip: rect(0, 200px, 200px, 100px);
  background: #E5E5E5;
}
.ppc-percents {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 173.91304px/2);
  top: calc(50% - 173.91304px/2);
  width: 173.91304px;
  height: 173.91304px;
  background: #fff;
  text-align: center;
  display: table;
}
.ppc-percents span {
  display: block;
  font-size: 2.6em;
  font-weight: bold;
  color: #81CE97;
}
.pcc-percents-wrapper {
  display: table-cell;
  vertical-align: middle;
}
body {
  font-family: Arial;
  background: #f7f7f7;
}
.progress-pie-chart {
  margin: 50px auto 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="progress-pie-chart" data-percent="0">
  <div class="ppc-progress">
    <div class="ppc-progress-fill"></div>
  </div>
  <div class="ppc-percents">
    <div class="pcc-percents-wrapper">
      <span>%</span>
    </div>
  </div>
</div>