我有一个倒计时和一个圆形的进度条。倒计时正在滴答到特定日期,圆形进度条正在填充60秒然后重新开始,但我的问题是它没有同步。当我刷新页面时,倒计时工作正常,但进度条刷新。如果倒计时是30秒,进度条应该是半满的,但它会重新开始。我是Javascript的初学者,所以我真的不知道如何同步它们。谁能帮我解决这个问题? 我有2个小提琴,我无法弄清楚如何将这2个javascript脚本一起工作,所以它们是2个独立的小提琴。我真的很想在这件事上提供一些帮助。 倒计时 - https://jsfiddle.net/BrsJsk/aa8a10sy/2/
function getTimeRemaining(endtime) {
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>