logo标签列表

随时间填充圆形

javascript
5
我正在进行一个项目，使用JavaScript创建了一个倒计时器。它具有停止、开始和重置按钮。
我想创建一个填充效果动画，从底部开始，基于倒计时器。我希望填充效果填充圆的一定百分比，这样当倒计时达到0时，整个圆将被填满。
我想使用纯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;
}
谢谢您的编辑，下次我会更加注意未来问题的格式。 - Randy Goldsmith
1个回答
2
一个人给了我他的代码，用另一种方式填充圆形...基本上他设置了圆形的高度，找到了一种获取高度并填充圆形的方法。我只是不理解这个代码，也不想简单地复制它，因为我想理解它并自己尝试。我也试图避免使用画布的方式，但很乐意尝试实现它。这是链接，如果您愿意，也许您可以更好地解释它。[链接]（http://codepen.io/MutantSpore/pen/xwBpxE）谢谢，我将开始研究画布方法！ - Randy Goldsmith
是的，可能还有其他方法可以实现。Canvas 是我会使用的工具，因为它专门用于显示此类（以及更复杂）图形。 - Quantumplate
如果您检查该示例中的青色元素，您会发现它只是一个底部高度随时间增加的div。该div位于具有圆角的父div内，以剪切它。因此，这只是元素的巧妙使用。我原本以为您想要一个扇形（例如像时钟上的秒针一样旋转的填充），这可能有点困难。 - Quantumplate
嗯，使用画布和弧形方法意味着我将进入SVG，而我正试图避免这种情况。没有特定的原因，但如果这是解决我的问题最快、最有效的方法，我会采用它。 - Randy Goldsmith
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接