将来的倒计时，通过圆弧视觉

Question

我希望我的倒计时可以通过越来越多的时间过去的弧线形象化。 这样的

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

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);

.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; 
 
}

<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>

有形象化这更好的办法让方舟（也许使用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>