【发布时间】：2017-05-08 06:27:10
【问题描述】：
我有倒计时和圆形进度条。倒计时一直到特定日期，圆形进度条填充 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>【问题讨论】：
标签： javascript