2
我有倒计时和四舍五入的进度条。倒计时正在滴答滴答，直到一个特定的日期和四舍五入的进度条填满60秒然后重新开始，但我的问题是它没有同步。当我刷新页面时，倒计时工作正常，但进度条刷新。如果倒计时是30秒，进度条应该填满一半，但是它会重新开始。我是一个Javascript初学者，所以我不知道如何同步它们。任何人都可以帮我解决这个问题吗？ 我有2个小提琴，我无法弄清楚如何让这2个javascript脚本一起工作，所以他们在2个独立的小提琴上。我真的很想在这件事上得到一些帮助。 倒计时 - https://jsfiddle.net/BrsJsk/aa8a10sy/2/同步倒数计时器和进度条
function getTimeRemaining(endtime) {
\t
var t = endtime - new Date().getTime();
var seconds = Math.floor((t/1000) % 60);
var minutes = Math.floor((t/1000/60) % 60);
var hours = Math.floor((t/(1000 * 60 * 60)) % 24);
var days = Math.floor(t/(1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date("Jul 22, 2017 06:00:00").getTime();
initializeClock('clockdiv', deadline);<div id="clockdiv">
<p1 class="dayss"><span class="num days">34</span> days</p1>
<p1 class="hourss"><span class="num hours">16</span> hours</p1>
<p1 class="secondss"><span class="num seconds">1</span> secs</p1>
<p1 class="minutess"><span class="num minutes">19</span> mins</p1>
</div>进度条 - https://jsfiddle.net/BrsJsk/2xm2nhw3/
{
var progressbar = document.querySelector('div[data-progress]'),
quad1 = document.querySelector('.quad1'),
quad2 = document.querySelector('.quad2'),
quad3 = document.querySelector('.quad3'),
quad4 = document.querySelector('.quad4'),
counter = document.querySelector('.counter');
var progInc = setInterval(incrementProg, 600);
function incrementProg() {
progress = parseInt(progressbar.getAttribute('data-progress'));
progress = ((progress + 1) % 100);
if (progress === 0) {
quad1.setAttribute('style', 'transform: skew(0deg)');
quad2.setAttribute('style', 'transform: skewY(0deg)');
quad3.setAttribute('style', 'transform: skew(0deg)');
quad4.setAttribute('style', 'transform: skewY(0deg)');
}
progressbar.setAttribute('data-progress', progress); //set value to attribute
counter.textContent = 100 - parseInt(progress, 10); // set countdown timer's value
setPie(progress); // call the paint progress bar function based on progress value
}
function setPie(progress) {
/* If progress is less than 25, modify skew angle the first quadrant */
if (progress <= 25) {
quad1.setAttribute('style', 'transform: skew(' + progress * (-90/25) + 'deg)');
progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 50px #6edbf2');
}
/* Between 25-50, hide 1st quadrant + modify skew angle of 2nd quadrant */
else if (progress > 25 && progress <= 50) {
quad1.setAttribute('style', 'transform: skew(-90deg)'); // hides 1st completely
quad2.setAttribute('style', 'transform: skewY(' + (progress - 25) * (90/25) + 'deg)');
progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 50px #6edbf2');
}
/* Between 50-75, hide first 2 quadrants + modify skew angle of 3rd quadrant */
else if (progress > 50 && progress <= 75) {
quad1.setAttribute('style', 'transform: skew(-90deg)'); // hides 1st completely
quad2.setAttribute('style', 'transform: skewY(90deg)'); // hides 2nd completely
quad3.setAttribute('style', 'transform: skew(' + (progress - 50) * (-90/25) + 'deg)');
progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 50px #6edbf2');
}
/* Similar to above for value between 75-100 */
else if (progress > 75 && progress < 100) {
quad1.setAttribute('style', 'transform: skew(-90deg)'); // hides 1st completely
quad2.setAttribute('style', 'transform: skewY(90deg)'); // hides 2nd completely
quad3.setAttribute('style', 'transform: skew(-90deg)'); // hides 3rd completely
quad4.setAttribute('style', 'transform: skewY(' + (progress - 75) * (90/25) + 'deg)');
progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 50px #6edbf2');
}
}
}div[data-progress] {
box-sizing: border-box;
position: relative;
height: 200px;
width: 200px;
background: #c8c9cb;
border-radius: 50%;
transition: all 1s;
overflow: hidden;
}
.counter {
position: absolute;
height: 100%;
width: 100%;
top: 0%;
left: 0%;
text-align: center;
line-height: 200px;
border-radius: 50%;
background: transparent;
z-index: 4;
}
div > div {
position: absolute;
height: 50%;
width: 50%;
background: inherit;
border-radius: 0%;
}
.quad1,
.quad2 {
left: 50%;
transform-origin: left bottom;
}
.quad3,
.quad4 {
left: 0%;
transform-origin: right top;
}
.quad1,
.quad4 {
top: 0%;
}
.quad2,
.quad3 {
top: 50%;
}
.quad1,
.quad3 {
transform: skew(0deg);
/* invisible at -90deg */
}
.quad2,
.quad4 {
transform: skewY(0deg);
/* invisible at 90deg */
}
/* Just for demo */
div[data-progress] {
margin: 40px auto;
}<div data-progress="0">
<div class="quad1"></div>
<div class="quad2"></div>
<div class="quad3"></div>
<div class="quad4"></div>
<div class='counter'></div>
</div>
谢谢你，但我不知道你是如何工作的？另外，你做了什么，它会倒过来？ – BrS
@Brs正如我所解释的，我只是在'initializeClock'函数末尾连接了'incrementProg'函数，我无法解释所有细节，因为代码太多了。相反的事情是因为你的代码从100开始到0，现在它从60到0做同样的事情。我修改了答案以反转该计数，以便倒数第二个值具有相同的值。简而言之，我已经在你的进度条逻辑中完成了从100到60的映射。 –
是的，我喜欢它像我的JS小提琴一样去。你让它工作就像它应该工作，我感谢你，但它真的不会倒退。如果你可以让进度条不倒退，那太棒了！ 我试图弄清楚你是怎么做到的 – BrS