倒数计时器问题

时间：2017-11-24 10:45:41

标签： javascript jquery css html5

我想参加知识竞赛。我找到了一些代码，但我无法让倒数计时器启动if nb condition then ...，倒计时结束时会重定向到另一个页面。

＆＃13;
＆＃13; 
onload
＆＃13; 
//circle start
let progressBar = document.querySelector('.e-c-progress');
let indicator = document.getElementById('e-indicator');
let pointer = document.getElementById('e-pointer');
let length = Math.PI * 2 * 100;

progressBar.style.strokeDasharray = length;

function update(value, timePercent) {
  var offset = -length - length * value / (timePercent);
  progressBar.style.strokeDashoffset = offset;
  pointer.style.transform = `rotate(${360 * value / (timePercent)}deg)`;
};

//circle ends
const displayOutput = document.querySelector('.display-remain-time')
const pauseBtn = document.getElementById('pause');
const setterBtns = document.querySelectorAll('button[data-setter]');

let intervalTimer;
let timeLeft;
let wholeTime = 1 * 60; // manage this to set the whole time 
let isPaused = false;
let isStarted = false;


update(wholeTime, wholeTime); //refreshes progress bar
displayTimeLeft(wholeTime);

function changeWholeTime(seconds) {
  if ((wholeTime + seconds) > 0) {
    wholeTime += seconds;
    update(wholeTime, wholeTime);
  }
}

for (var i = 0; i < setterBtns.length; i++) {
  setterBtns[i].addEventListener("click", function(event) {
    var param = this.dataset.setter;
    switch (param) {
      case 'minutes-plus':
        changeWholeTime(1 * 60);
        break;
      case 'minutes-minus':
        changeWholeTime(-1 * 60);
        break;
      case 'seconds-plus':
        changeWholeTime(1);
        break;
      case 'seconds-minus':
        changeWholeTime(-1);
        break;
    }
    displayTimeLeft(wholeTime);
  });
}

function timer(seconds) { //counts time, takes seconds
  let remainTime = Date.now() + (seconds * 1000);
  displayTimeLeft(seconds);

  intervalTimer = setInterval(function() {
    timeLeft = Math.round((remainTime - Date.now()) / 1000);
    if (timeLeft < 0) {
      clearInterval(intervalTimer);
      isStarted = false;
      setterBtns.forEach(function(btn) {
        btn.disabled = false;
        btn.style.opacity = 1;
      });
      displayTimeLeft(wholeTime);
      pauseBtn.classList.remove('pause');
      pauseBtn.classList.add('play');
      return;
    }
    displayTimeLeft(timeLeft);
  }, 1000);
}

function pauseTimer(event) {
  if (isStarted === false) {
    timer(wholeTime);
    isStarted = true;
    this.classList.remove('play');
    this.classList.add('pause');

    setterBtns.forEach(function(btn) {
      btn.disabled = true;
      btn.style.opacity = 0.9;
    });

  } else if (isPaused) {
    this.classList.remove('play');
    this.classList.add('pause');
    timer(timeLeft);
    isPaused = isPaused ? false : true
  } else {
    this.classList.remove('pause');
    this.classList.add('play');
    clearInterval(intervalTimer);
    isPaused = isPaused ? false : true;
  }
}

function displayTimeLeft(timeLeft) { //displays time on the input
  let minutes = Math.floor(timeLeft / 60);
  let seconds = timeLeft % 60;
  let displayString = `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
  displayOutput.textContent = displayString;
  update(timeLeft, wholeTime);
}

pauseBtn.addEventListener('click', pauseTimer);
＆＃13; 
button[data-setter] {
  outline: none;
  background: transparent;
  border: none;
  font-family: 'Arial';
  font-weight: 300;
  font-size: 18px;
  width: 25px;
  height: 30px;
  color: #F7958E;
  cursor: pointer;
}

button[data-setter]:hover {
  opacity: 0.5;
}

.container {
  float: left;
  position: relative;
  top: 0px;
  left: 25px;
  width: 300px;
  margin: 0 auto;
}

.sidebar {
  float: right;
  position: relative;
  top: 0px;
  width: 50%;
  margin: 0 left;
  font-family: 'Arial';
  font-weight: 100;
  font-size: 35px;
  color: #430000;
}

.setters {
  position: absolute;
  left: 0px;
  top: 75px;
}

.minutes-set {
  float: left;
  margin-right: 28px;
}

.seconds-set {
  float: right;
}

.controlls {
  position: absolute;
  left: 75px;
  top: 105px;
  text-align: center;
}

.display-remain-time {
  font-family: 'Roboto';
  font-weight: 100;
  font-size: 65px;
  color: #430000;
}

#pause {
  outline: none;
  background: transparent;
  border: none;
  margin-top: 10px;
  width: 50px;
  height: 50px;
  position: relative;
}

.play::before {
  display: block;
  content: "";
  position: absolute;
  top: 8px;
  left: 16px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 22px solid #F7958E;
}

.pause::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 12px;
  width: 15px;
  height: 30px;
  background-color: transparent;
  border-radius: 1px;
  border: 5px solid #F7958E;
  border-top: none;
  border-bottom: none;
}

#pause:hover {
  opacity: 0.8;
}

.e-c-base {
  fill: none;
  stroke: #B6B6B6;
  stroke-width: 4px
}

.e-c-progress {
  fill: none;
  stroke: #004eb7;
  stroke-width: 4px;
  transition: stroke-dashoffset 0.7s;
}

.e-c-pointer {
  fill: #ff6000;
  stroke: #024078;
  stroke-width: 3px;
}

#e-pointer {
  transition: transform 0.7s;
}

h1 {
  margin-top: 50px;
  text-align: center;
}

body {
  background-color: #f7f7f7;
}
＆＃13;
＆＃13;
＆＃13;

我想参加知识竞赛。我发现了一些代码，但是我无法让倒数计时器启动onload，倒计时结束时会重定向到另一个页面。我需要帮助。 THX

3 个答案:

答案 0 :(得分：0)

＆＃13;
＆＃13; 
        //circle start
        let progressBar = document.querySelector('.e-c-progress');
        let indicator = document.getElementById('e-indicator');
        let pointer = document.getElementById('e-pointer');
        let length = Math.PI * 2 * 100;

        progressBar.style.strokeDasharray = length;

        function update(value, timePercent) {
          var offset = -length - length * value / (timePercent);
          progressBar.style.strokeDashoffset = offset;
          pointer.style.transform = `rotate(${360 * value / (timePercent)}deg)`;
        };

        //circle ends
        const displayOutput = document.querySelector('.display-remain-time')
        const pauseBtn = document.getElementById('pause');
        const setterBtns = document.querySelectorAll('button[data-setter]');

        let intervalTimer;
        let timeLeft;
        let wholeTime = 1 * 60; // manage this to set the whole time 
        let isPaused = false;
        let isStarted = false;


        update(wholeTime, wholeTime); //refreshes progress bar
        displayTimeLeft(wholeTime);

        function changeWholeTime(seconds) {
          if ((wholeTime + seconds) > 0) {
            wholeTime += seconds;
            update(wholeTime, wholeTime);
          }
        }

        for (var i = 0; i < setterBtns.length; i++) {
          setterBtns[i].addEventListener("click", function(event) {
            var param = this.dataset.setter;
            switch (param) {
              case 'minutes-plus':
                changeWholeTime(1 * 60);
                break;
              case 'minutes-minus':
                changeWholeTime(-1 * 60);
                break;
              case 'seconds-plus':
                changeWholeTime(1);
                break;
              case 'seconds-minus':
                changeWholeTime(-1);
                break;
            }
            displayTimeLeft(wholeTime);
          });
        }

        function timer(seconds) { //counts time, takes seconds
          let remainTime = Date.now() + (seconds * 1000);
          displayTimeLeft(seconds);

          intervalTimer = setInterval(function() {
            timeLeft = Math.round((remainTime - Date.now()) / 1000);
            if (timeLeft < 0) {
              location.href = 'https://www.google.com'; // redirect
              clearInterval(intervalTimer);
              isStarted = false;
              setterBtns.forEach(function(btn) {
                btn.disabled = false;
                btn.style.opacity = 1;
              });
              displayTimeLeft(wholeTime);
              pauseBtn.classList.remove('pause');
              pauseBtn.classList.add('play');
              return;
            }
            displayTimeLeft(timeLeft);
          }, 1000);
        }

        function pauseTimer(event) {
          if (isStarted === false) {
            timer(wholeTime);
            isStarted = true;
            this.classList.remove('play');
            this.classList.add('pause');

            setterBtns.forEach(function(btn) {
              btn.disabled = true;
              btn.style.opacity = 0.9;
            });

          } else if (isPaused) {
            this.classList.remove('play');
            this.classList.add('pause');
            timer(timeLeft);
            isPaused = isPaused ? false : true
          } else {
            this.classList.remove('pause');
            this.classList.add('play');
            clearInterval(intervalTimer);
            isPaused = isPaused ? false : true;
          }
        }

        function displayTimeLeft(timeLeft) { //displays time on the input
          let minutes = Math.floor(timeLeft / 60);
          let seconds = timeLeft % 60;
          let displayString = `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
          displayOutput.textContent = displayString;
          update(timeLeft, wholeTime);
        }

        pauseBtn.addEventListener('click', pauseTimer);
        pauseTimer(); // run at page ready
＆＃13; 
        button[data-setter] {
          outline: none;
          background: transparent;
          border: none;
          font-family: 'Arial';
          font-weight: 300;
          font-size: 18px;
          width: 25px;
          height: 30px;
          color: #F7958E;
          cursor: pointer;
        }

        button[data-setter]:hover {
          opacity: 0.5;
        }

        .container {
          float: left;
          position: relative;
          top: 0px;
          left: 25px;
          width: 300px;
          margin: 0 auto;
        }

        .sidebar {
          float: right;
          position: relative;
          top: 0px;
          width: 50%;
          margin: 0 left;
          font-family: 'Arial';
          font-weight: 100;
          font-size: 35px;
          color: #430000;
        }

        .setters {
          position: absolute;
          left: 0px;
          top: 75px;
        }

        .minutes-set {
          float: left;
          margin-right: 28px;
        }

        .seconds-set {
          float: right;
        }

        .controlls {
          position: absolute;
          left: 75px;
          top: 105px;
          text-align: center;
        }

        .display-remain-time {
          font-family: 'Roboto';
          font-weight: 100;
          font-size: 65px;
          color: #430000;
        }

        #pause {
          outline: none;
          background: transparent;
          border: none;
          margin-top: 10px;
          width: 50px;
          height: 50px;
          position: relative;
        }

        .play::before {
          display: block;
          content: "";
          position: absolute;
          top: 8px;
          left: 16px;
          border-top: 15px solid transparent;
          border-bottom: 15px solid transparent;
          border-left: 22px solid #F7958E;
        }

        .pause::after {
          content: "";
          position: absolute;
          top: 8px;
          left: 12px;
          width: 15px;
          height: 30px;
          background-color: transparent;
          border-radius: 1px;
          border: 5px solid #F7958E;
          border-top: none;
          border-bottom: none;
        }

        #pause:hover {
          opacity: 0.8;
        }

        .e-c-base {
          fill: none;
          stroke: #B6B6B6;
          stroke-width: 4px
        }

        .e-c-progress {
          fill: none;
          stroke: #004eb7;
          stroke-width: 4px;
          transition: stroke-dashoffset 0.7s;
        }

        .e-c-pointer {
          fill: #ff6000;
          stroke: #024078;
          stroke-width: 3px;
        }

        #e-pointer {
          transition: transform 0.7s;
        }

        h1 {
          margin-top: 50px;
          text-align: center;
        }

        body {
          background-color: #f7f7f7;
        }
＆＃13; 
        <html>

        <head>
          <meta charset="utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Biz Biliriz</title>
        </head>

        <body>
          <h1>Question 1</h1>

          <div class="container">
            <div class="setters">
              <div class="minutes-set">

              </div>
              <div class="seconds-set">

              </div>
            </div>
            <div class="circle"> <svg width="300" viewBox="0 0 220 220">
            <g transform="translate(110,110)">
              <circle r="100" class="e-c-base"/>
              <g transform="rotate(-90)">
                <circle r="100" class="e-c-progress"/>
                <g id="e-pointer">
                  <circle cx="100" cy="0" r="8" class="e-c-pointer"/>
                </g>
              </g>
            </g>
            </svg> </div>
            <div class="controlls">
              <div class="display-remain-time">01:00</div>
              <button class="play" id="pause"></button>
            </div>
          </div>

          <div class="sidebar">
            <div class="setters">
              <p>Test Question</p>
            </div>
          </div>
＆＃13;
＆＃13;
＆＃13;

我认为这就是你需要的，只需在JS代码中添加两行;

答案 1 :(得分：0)

我认为这就是你想要的，这是在页面加载＆amp;重定向

＆＃13;
＆＃13; 
let progressBar = document.querySelector('.e-c-progress');
let indicator = document.getElementById('e-indicator');
let pointer = document.getElementById('e-pointer');
let length = Math.PI * 2 * 100;

progressBar.style.strokeDasharray = length;

function update(value, timePercent) {
  var offset = -length - length * value / (timePercent);
  progressBar.style.strokeDashoffset = offset;
  pointer.style.transform = `rotate(${360 * value / (timePercent)}deg)`;
};

//circle ends
const displayOutput = document.querySelector('.display-remain-time')
const pauseBtn = document.getElementById('pause');
const setterBtns = document.querySelectorAll('button[data-setter]');

let intervalTimer;
let timeLeft;
let wholeTime = 1 * 60; // manage this to set the whole time 
let isPaused = false;
let isStarted = false;


update(wholeTime, wholeTime); //refreshes progress bar
displayTimeLeft(wholeTime);

function changeWholeTime(seconds) {
  if ((wholeTime + seconds) > 0) {
    wholeTime += seconds;
    update(wholeTime, wholeTime);
  }
}

for (var i = 0; i < setterBtns.length; i++) {
  setterBtns[i].addEventListener("click", function(event) {
    var param = this.dataset.setter;
    switch (param) {
      case 'minutes-plus':
        changeWholeTime(1 * 60);
        break;
      case 'minutes-minus':
        changeWholeTime(-1 * 60);
        break;
      case 'seconds-plus':
        changeWholeTime(1);
        break;
      case 'seconds-minus':
        changeWholeTime(-1);
        break;
    }
    displayTimeLeft(wholeTime);
  });
}

function timer(seconds) { //counts time, takes seconds
  let remainTime = Date.now() + (seconds * 1000);
  displayTimeLeft(seconds);

  intervalTimer = setInterval(function() {
    timeLeft = Math.round((remainTime - Date.now()) / 1000);
    if (timeLeft < 0) {
    //here you redirect after timelfet 0 or circle complete
		location.href = 'https://www.google.com'; // redirect
      clearInterval(intervalTimer);
      isStarted = false;
      setterBtns.forEach(function(btn) {
        btn.disabled = false;
        btn.style.opacity = 1;
		
      });
      displayTimeLeft(wholeTime);
      pauseBtn.classList.remove('pause');
      pauseBtn.classList.add('play');
      return;
    }
    displayTimeLeft(timeLeft);
  }, 1000);
}

function pauseTimer(event) {
  if (isStarted === false) {
    timer(wholeTime);
    isStarted = true;
    this.classList.remove('play');
    this.classList.add('pause');

    setterBtns.forEach(function(btn) {
      btn.disabled = true;
      btn.style.opacity = 0.9;
    });

  } else if (isPaused) {
    this.classList.remove('play');
    this.classList.add('pause');
    timer(timeLeft);
    isPaused = isPaused ? false : true
  } else {
    this.classList.remove('pause');
    this.classList.add('play');
    clearInterval(intervalTimer);
    isPaused = isPaused ? false : true;
  }
}

function displayTimeLeft(timeLeft) { //displays time on the input
  let minutes = Math.floor(timeLeft / 60);
  let seconds = timeLeft % 60;
  let displayString = `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
  displayOutput.textContent = displayString;
  update(timeLeft, wholeTime);
}
//here you call your function onload
pauseBtn.addEventListener('click', pauseTimer);
document.addEventListener("DOMContentLoaded", function() {
  pauseTimer(event);   
});
＆＃13; 
<style>
button[data-setter] {
  outline: none;
  background: transparent;
  border: none;
  font-family: 'Arial';
  font-weight: 300;
  font-size: 18px;
  width: 25px;
  height: 30px;
  color: #F7958E;
  cursor: pointer;
}

button[data-setter]:hover {
  opacity: 0.5;
}

.container {
  float: left;
  position: relative;
  top: 0px;
  left: 25px;
  width: 300px;
  margin: 0 auto;
}

.sidebar {
  float: right;
  position: relative;
  top: 0px;
  width: 50%;
  margin: 0 left;
  font-family: 'Arial';
  font-weight: 100;
  font-size: 35px;
  color: #430000;
}

.setters {
  position: absolute;
  left: 0px;
  top: 75px;
}

.minutes-set {
  float: left;
  margin-right: 28px;
}

.seconds-set {
  float: right;
}

.controlls {
  position: absolute;
  left: 75px;
  top: 105px;
  text-align: center;
}

.display-remain-time {
  font-family: 'Roboto';
  font-weight: 100;
  font-size: 65px;
  color: #430000;
}

#pause {
  outline: none;
  background: transparent;
  border: none;
  margin-top: 10px;
  width: 50px;
  height: 50px;
  position: relative;
}

.play::before {
  display: block;
  content: "";
  position: absolute;
  top: 8px;
  left: 16px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 22px solid #F7958E;
}

.pause::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 12px;
  width: 15px;
  height: 30px;
  background-color: transparent;
  border-radius: 1px;
  border: 5px solid #F7958E;
  border-top: none;
  border-bottom: none;
}

#pause:hover {
  opacity: 0.8;
}

.e-c-base {
  fill: none;
  stroke: #B6B6B6;
  stroke-width: 4px
}

.e-c-progress {
  fill: none;
  stroke: #004eb7;
  stroke-width: 4px;
  transition: stroke-dashoffset 0.7s;
}

.e-c-pointer {
  fill: #ff6000;
  stroke: #024078;
  stroke-width: 3px;
}

#e-pointer {
  transition: transform 0.7s;
}

h1 {
  margin-top: 50px;
  text-align: center;
}

body {
  background-color: #f7f7f7;
}

</style>
＆＃13; 
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Biz Biliriz</title>
</head>

<body>
  <h1>Question 1</h1>

  <div class="container">
    <div class="setters">
      <div class="minutes-set">

      </div>
      <div class="seconds-set">

      </div>
    </div>
    <div class="circle"> <svg width="300" viewBox="0 0 220 220">
    <g transform="translate(110,110)">
      <circle r="100" class="e-c-base"/>
      <g transform="rotate(-90)">
        <circle r="100" class="e-c-progress"/>
        <g id="e-pointer">
          <circle cx="100" cy="0" r="8" class="e-c-pointer"/>
        </g>
      </g>
    </g>
    </svg> </div>
    <div class="controlls">
      <div class="display-remain-time">01:00</div>
      <button class="play" id="pause"></button>
    </div>
  </div>

  <div class="sidebar">
    <div class="setters">
      <p>Test Question</p>
    </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

假设您有foo function并希望它在加载时运行。您可以使用onload：

的body属性来执行此操作 
<body onload="foo();">
    <!-- something -->
</body>

或者你可以在Javascript中这样做：

document.onreadystatechange = function() {
    if (document.readyState === "complete") {
        foo();
    }
}

现在，foo应该如何：

function foo() {
    var initialTime = 60000; //A minute
    setTimeout(function() {
        if (!(--initialTime)) {
            //redirect
        }
        //Do something
    }, 1000);
}
相关问题
最新问题