javascript - 倒数计时器问题

标签 javascript jquery css html

我想做一个知识竞赛。我找到了一些代码，但无法使倒计时计时器启动 onload 并在倒计时结束时重定向到另一个页面。 

//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);
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;
}
<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>

我想做一个知识竞赛。我找到了一些代码，但无法使倒计时计时器开始加载，并且当倒计时结束时重定向到另一个页面。我需要帮助。谢谢

最佳答案 

        //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
        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;
        }
        <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>

我想这就是你所需要的，只需在 JS 代码中添加两行即可；

关于javascript - 倒数计时器问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47471581/

上一篇：javascript - 允许重复使用号码的子集和

下一篇：javascript - 多个滚动事件 jQuery

相关文章：

javascript - Function.prototype.bind 与参数对象

javascript - 如果容器高度小于固定值，则隐藏元素

javascript - 在特定页面重复打开 PDF。 (即使在滚动之后)

javascript - 下拉菜单仅单击选定的行

html - 相同的 div 不堆叠而是重叠

javascript - hover() 事件在我的例子中没有触发

javascript - 检查 jQuery Plugin 是否已应用于 Element

javascript - 我如何使用 JavaScript 中的 RegExp 检查多个模式？

php - 通过 PHP 的 Javascript 回显

javascript - 在水平滚动上更改 li 类

©2024 IT工具网  联系我们