Question

我希望我的倒计时可以通过增加更多时间的弧度来显示。像这样

有四个圆圈（天，小时，分钟和秒）。倒计时已经开始了。这是我已有的代码。

＆＃13;

const getTimeRemaining = (endtime) =>{
  let t = Date.parse(endtime) - Date.parse(new Date());
  let seconds = Math.floor((t / 1000) % 60);
  let minutes = Math.floor((t / 1000 / 60) % 60);
  let hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  let days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

const initializeClock = (id, endtime) =>{
  let clock = document.getElementById(id);
  let daysTime = document.querySelector('.dagen');
  let hoursTime = document.querySelector('.uren');
  let minutesTime = document.querySelector('.minuten');
  let secondsTime = document.querySelector('.seconden');
  
  const updateClock = () =>{
    var t = getTimeRemaining(endtime);

    daysTime.innerHTML = t.days;
    hoursTime.innerHTML = ('0' + t.hours).slice(-2);
    minutesTime.innerHTML = ('0' + t.minutes).slice(-2);
    secondsTime.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }
  updateClock();
  let timeinterval = setInterval(updateClock, 1000);
}

let eind = 'july 20 2016 10:00:00 GMT+0100';
initializeClock('clockdiv', eind);

＆＃13;

.klokjes{ 
  width: 800px;
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-around;
  font-family: 'aller_lightregular';
  color: #fff;
  text-align: center;
}

.klokjes > div{
  width: 130px;
  height: 130px;
  margin: 20px;
  border-radius: 90px;
  background: #00BF96;
}

.klokjes div > span{
  font-size:38px;
  padding-top: 15px;
  display: inline-block;
}

.klokjes .g{
  background-color: #78D722;
}

.klokjes .y{
  background-color: #F5C239;
}

.klokjes .b{
  background-color: #3ADDD2;
}

.klokjes .p{
  background-color: #EF5570;
}

＆＃13;

<section class="homeCountdown">
  <h4>Aanvang van het festival</h4>
  <div class="klokjes">
    <div class="g">
      <span class="dagen"></span>
      <div class="vasteTekst">dagen</div>
    </div>
    <div class="y">
      <span class="uren"></span>
      <div class="vasteTekst">uren</div>
    </div>
    <div class="b">
      <span class="minuten"></span>
      <div class="vasteTekst">minuten</div>
    </div>
    <div class="p">
      <span class="seconden"></span>
      <div class="vasteTekst">seconden</div>
    </div>
  </div>
</section>

＆＃13;

有没有办法让方舟（可能使用svg）更好地将其可视化？

Answer 1

我使用了以下代码：How to calculate the SVG Path for an arc (of a circle)

在setInterval调用中。我认为它提供了你在视觉上寻找的基础。

编辑说明：

基于@PaulLeBeau的建议，我已经更新了示例，以包含一个非常直接的仅CSS解决方案。虽然动画很可爱，但我不确定如何设置正确的初始状态或强制动画的sysnc与实际时间。我的直觉告诉我，最终，动画将失去同步，但这可能是一个错误的假设。

演示中的左圆与你的时间每500毫秒同步，右边是一个CSS动画，可以在60秒内画出一个圆圈。

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){
    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);
    var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, arcSweep, 0, end.x, end.y
    ].join(" ");

    return d;       
}

var arc = document.getElementById("arc1");

setInterval(function(){
  var sec = new Date().getSeconds();
  var deg = 6 * sec;
  arc.setAttribute("d", describeArc(60, 60, 50, 0, deg));
}, 500 );

svg {
  height: 200px;
  width: 200px;
}

@keyframes dash {
  from { stroke-dashoffset: -314; }
  to { stroke-dashoffset: -0; }
}

#arc2 {
  stroke-dasharray: 314;
  stroke-dashoffset: -314;
  animation: dash 60s linear infinite;
}

<svg>
  <path id="arc1" fill="none" stroke="#446688" stroke-width="20" />
</svg>

<svg>
  <path id="arc2" class="path" fill="none" stroke="#446688" stroke-width="20" d="M 60 10 a 50 50 0 1 0 0.001 0"></path>
</svg>

Answer 2

以下是使用SVG制作圆形倒计时图的方法。

我们使用圆圈上的虚线图案绘制图表。我们计算破折号必须的长度来表示正确的秒数，然后根据它设置破折号。

我们要做的唯一有点不明显的事情是将圆圈逆时针旋转90度。这是因为在SVG圆圈中，虚线图案被定义为从3点钟位置开始。

function setCounter(id, value, max)
{
  var elem = document.getElementById(id);
  // Get the radius ("r" attribute)
  var radius = elem.r.baseVal.value;
  // Calculate the circumference of the circle
  var circumference = radius * 2 * Math.PI;
  // How long the bar has to be
  var barLength = value * circumference / max;

  // Set a dash pattern for the stroke.
  // The dash pattern consists of a dash of the right length,
  // followed by a gap big enough to ensure that we don't see the next dash.
  elem.setAttribute("stroke-dasharray", barLength + " " + circumference);
}
  
  
var  secondCount = 60;
setCounter("seconds", secondCount, 60);

// Set an interval timer to decrement the count and redraw the graph every second
window.setInterval(function() {
    secondCount--;
    if (secondCount < 0) secondCount = 59;
    setCounter("seconds", secondCount, 60);
  }, 1000);

<svg width="300px" height="300px" viewBox="0 0 300 300">
  <g fill="none" stroke-width="20">
    <circle cx="150" cy="150" r="100" stroke="#ccc"/>
    <circle id="seconds" cx="150" cy="150" r="100" stroke="dodgerblue" transform="rotate(-90 150 150)"/>
  </g>
</svg>

未来的倒计时，圆弧视觉

2 个答案: