隨着時間的推移填充一個圓圈

Question

我正在做一個項目，我用JavaScript創建了一個倒數計時器。 它具有停止，啟動和復位按鈕。

我想根據倒數計時器從底部開始創建一個填充效果動畫。 我希望填充效果填充圓圈的某個百分比，這樣當倒計時到達0時，整個圓圈將被填充。

我想使用vanilla JavaScript。 沒有jQuery或SVG。

到目前為止 ， 我的代碼是基於HTML的基本計時器，然后是CSS和我的Javascript代碼。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<h1>Pomodoro Clock</h1>

<div class="container">
  <div class="row">
    <h3>Session Length</h3>
     <div class="row button1">
       <button type="button" onclick="decreaseTime()">-</button>
       <span id="SessionLength">25</span>
       <button type="button" onclick="increaseTime()">+</button>
 </div> 

  </div>

 <!--My Start/Stop/Reset buttons-->
  <div class="row">
<div class="myButtons">
 <button type="button" onclick="startTime()">Start</button>
 <button type="button" onclick="stopTime()">Stop</button>
 <button type="button" onclick="resetTime()">Reset</button>
</div>  


  </div>

  <!--My Circle-->
  <div class="row">
   <div class="circleDraw">
     <h2 class="text-center">Session</h2>
     <h1 id="output">25:00</h1>

   </div>
  </div>
  </div>

h1{
  text-align: center;
}

h3{
  text-align: right;
  padding-right: 30%;
}

.myButtons{
  text-align: center;
  padding-top: 10%;

}

.circleDraw{
  border-radius: 50%;
  border: 2px solid;
  width: 300px;
  height: 300px;
  margin: 50px auto;

}

.text-center{
  text-align: center;
  padding: 30px;
}

.txt-center{
  text-align: center;
}

.button1{
  text-align: right;
  padding-right: 35%
}

var time = 1500;
var running = 0;
var myStopID;



var startTime = function(){
  running = 1;
  if(running == 1){
    timer();
  }
}

var stopTime = function(){
    clearTimeout(myStopID);
    running = 0;
  }



var resetTime = function(){
  if(running == 0){
   time = 1500;
  }
 var min = Math.floor(time / 60);
 var sec = time % 60;  

 min = min < 10 ? "0" + min : min;
 sec = sec < 10 ? "0" + sec : sec;

 document.getElementById('output').innerHTML= min;           
 document.getElementById('SessionLength').innerHTML= min;
}


var timer = function(){
  if(running == 1){
   myStopID = setTimeout(function(){
    time--;
    var min = Math.floor(time / 60);
    var sec = time % 60;

    min = min < 10 ? "0" + min : min;
    sec = sec < 10 ? "0" + sec : sec;
    document.getElementById("output").innerHTML= min + ":" + sec;


    timer();
     }, 1000);
  }
}

function decreaseTime(){
  if(time <= 0){
    return 0;
  }

  time = time - 60;
  var min = Math.floor(time/60);

 document.getElementById('SessionLength').innerHTML= min;
  document.getElementById('output').innerHTML= min;
}

function increaseTime(){
  if(time >= 5940){
    return 5940;
  }
  time = time + 60;
  var min = Math.floor(time/60);

 document.getElementById('SessionLength').innerHTML= min;
  document.getElementById('output').innerHTML= min;
}

Answer 1

你到目前為止所做的一切看起來都不錯。 我將使用canvas元素和arc（）方法來繪制圓形和部分填充。

更多信息在這里......

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

並且在這個答案中繪制圓圈的基本Canvas和SVG示例...

https://stackoverflow.com/a/6936351/4322803