javascript - 同步倒数计时器和进度条

Question

我有一个倒计时和一个圆形的进度条。倒计时一直持续到特定日期，圆形进度条填充 60 秒然后重新开始，但我的问题是它没有同步。当我刷新页面时，倒计时工作正常但进度条刷新。如果倒计时是在 30 秒，进度条应该是半满的，但它会重新开始。我是 Javascript 的初学者，所以我真的不知道如何同步它们。谁能帮我解决这个问题？ 我有 2 个 fiddle ，我不知道如何让这 2 个 javascript 脚本一起工作，所以它们在 2 个单独的 fiddle 上。我真的很想在这件事上得到一些帮助。 倒计时- 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>

Answer 1

您只需将倒计时 的second 值链接到进度条 的progress。

如下;

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

function incrementProg(progress) {
  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)');
  }
  counter.textContent = progress // set countdown timer's value
  setPie(60 - progress); // call the paint progress bar function based on progress value
}

function setPie(progress) {
  if (progress < 15) {
    quad1.setAttribute('style', 'transform: skew(' + progress * (-90 / 15) + 'deg)');
    progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 50px #6edbf2');
  } else if (progress >= 15 && progress < 30) {
    quad1.setAttribute('style', 'transform: skew(-90deg)'); // hides 1st completely
    quad2.setAttribute('style', 'transform: skewY(' + (progress - 15) * (90 / 15) + 'deg)');
    progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 50px #6edbf2');
  } else if (progress >= 30 && progress < 45) {
    quad1.setAttribute('style', 'transform: skew(-90deg)'); // hides 1st completely
    quad2.setAttribute('style', 'transform: skewY(90deg)'); // hides 2nd completely
    quad3.setAttribute('style', 'transform: skew(' + (progress - 30) * (-90 / 15) + 'deg)');
    progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 50px #6edbf2');
  } else if (progress >= 45 && progress < 60) {
    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 - 45) * (90 / 15) + 'deg)');
    progressbar.setAttribute('style', 'box-shadow: inset 0px 0px 0px 50px #6edbf2');
  }
}

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);
    }
    incrementProg(t.seconds);
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date("Jul 22, 2017 06:00:00").getTime();
initializeClock('clockdiv', deadline);

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 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="minutess"><span class="num minutes">19</span> mins</p1>
  <p1 class="secondss"><span class="num seconds">1</span> secs</p1>
</div>

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

我不得不修改一些小部分以使其在 60 秒内正常运行，如您所见，它运行良好。可以修改进度条打印秒数，目前是倒计时。