javascript - 如何明智地旋转这个反关闭并以相反的顺序开始倒计时

Question

我有一个简单的示例代码，它工作正常，但计时器按顺时针方向增加。我想逆时针方向做同样的事情，计时器应该减少。例如 10、9、8 ........0 秒

当前代码是 1 2 3 ....10 秒，圆圈也按顺时针方向填充。

/*
    to modify total time, just input on variable totaltime
    */
var totaltime = 60;

function update(percent) {
  var deg;
  if (percent < (totaltime / 2)) {
    deg = 90 + (360 * percent / totaltime);
    $('.pie').css('background-image',
      'linear-gradient(' + deg + 'deg, transparent 50%, white 50%),linear-gradient(90deg, white 50%, transparent 50%)'
    );
  } else if (percent >= (totaltime / 2)) {
    deg = -90 + (360 * percent / totaltime);
    $('.pie').css('background-image',
      'linear-gradient(' + deg + 'deg, transparent 50%, #1fbba6 50%),linear-gradient(90deg, white 50%, transparent 50%)'
    );
  }
}
var count = parseInt($('#time').text());
myCounter = setInterval(function() {
  count += 1;
  $('#time').html(count);
  update(count);

  if (count == totaltime) clearInterval(myCounter);
}, 1000);

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  background: #b4f2ea;
}

.pie {
  width: 250px;
  height: 250px;
  display: block;
  position: relative;
  border-radius: 50%;
  background-color: #1fbba6;
  border: 2px solid #1fbba6;
  float: left;
  margin: 2em;
}

.pie .block {
  position: absolute;
  background: #fff;
  width: 230px;
  height: 230px;
  display: block;
  border-radius: 50%;
  top: 10px;
  left: 10px;
}

#time {
  font-size: 3em;
  position: absolute;
  top: 35%;
  left: 43%;
  color: #999999;
}

.degree {
  /*90 + ( 360 * .1 )*/
  background-image: linear-gradient(90deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pie degree">
  <span class="block"></span>
  <span id="time">0</span>
</div>

标签： javascriptjquerycss

Answer 1

您只需要进行 3 处更改

• 在您的 HTML 中：例如从 10 开始<span id="time">10</span>

在您的 JavaScript 中，您需要更新这 3 个部分：

// update this
var totaltime = 10;
...
//Don't forget to decrement your counter
count -= 1;
...
// set the condition to === 0 (and not totalTime)
if (count === 0) clearInterval(myCounter); 

---

完整示例：

/*
    to modify total time, just input on variable totaltime
    */
var totaltime = 10;

function update(percent) {
  var deg;
  if (percent < (totaltime / 2)) {
    deg = 90 + (360 * percent / totaltime);
    $('.pie').css('background-image',
      'linear-gradient(' + deg + 'deg, transparent 50%, white 50%),linear-gradient(90deg, white 50%, transparent 50%)'
    );
  } else if (percent >= (totaltime / 2)) {
    deg = -90 + (360 * percent / totaltime);
    $('.pie').css('background-image',
      'linear-gradient(' + deg + 'deg, transparent 50%, #1fbba6 50%),linear-gradient(90deg, white 50%, transparent 50%)'
    );
  }
}
var count = parseInt($('#time').text());
myCounter = setInterval(function() {
  count -= 1;
  $('#time').html(count);
  update(count);
  console.log(count);
  if (count === 0) {
    clearInterval(myCounter);
    alert("Reached 0 SEC");
  }
}, 1000);

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  background: #b4f2ea;
}

.pie {
  width: 250px;
  height: 250px;
  display: block;
  position: relative;
  border-radius: 50%;
  background-color: #1fbba6;
  border: 2px solid #1fbba6;
  float: left;
  margin: 2em;
}

.pie .block {
  position: absolute;
  background: #fff;
  width: 230px;
  height: 230px;
  display: block;
  border-radius: 50%;
  top: 10px;
  left: 10px;
}

#time {
  font-size: 3em;
  position: absolute;
  top: 35%;
  left: 43%;
  color: #999999;
}

.degree {
  /*90 + ( 360 * .1 )*/
  background-image: linear-gradient(90deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pie degree">
  <span class="block"></span>
  <span id="time">10</span>
</div>