javascript - 有没有办法恢复动画循环计时器的动画？

Question

在下面的基本代码中，我创建了带有两个按钮的圆形动画倒计时计时器。一个用于显示计时器，另一个用于隐藏。当默认调用函数时，循环计时器开始运行。当我单击隐藏按钮时，动画循环时间被隐藏。当单击显示按钮时，动画循环计时器可见，但动画再次从头开始运行。我想连同 java 脚本一起连续运行它。

如何才能在后台运行动画？任何人你给我一个指导来实现这一目标。

提前致谢。

countdown('clock', 3, 0, 'timing');
    function countdown(element, minutes, seconds, element1) {
      var time = minutes * 60 + seconds;

      interval = setInterval(function () {
        var el = document.getElementById(element);
        var e = document.getElementById(element1);

        if (time <= 0) {
          var text = "00:00";
          el.innerHTML = text;
          e.innerHTML = text

          clearInterval(interval);
          return;
        }

        var minutes = Math.floor(time / 60);
        if (minutes < 10) minutes = "0" + minutes;
        var seconds = time % 60;
        if (seconds < 10) seconds = "0" + seconds;
        var text = minutes + ':' + seconds;
        el.innerHTML = text;
        e.innerHTML = text;
        time--;
      }, 1000);
    }
    function startWorker() {
      document.getElementById('hiding').style.display = 'block';
    }

    function stopWorker() {
      document.getElementById('hiding').style.display = 'none';
    }

@keyframes circletimer {
            0% {
                stroke-dashoffset: 252;
                stroke-dasharray: 252;
            }

            100% {
                stroke-dashoffset: 0;
                stroke-dasharray: 252;
            }
        }

        svg {
            background-color: transparent;
            position: absolute;
            background-color: transparent;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotateZ(-90deg);
        }

        .circle {
            border: 16px solid #c01818;
            stroke: rgba(14, 194, 32, 0.8);
            stroke-width: 6;
            fill: transparent;
            stroke-dashoffset: 252;
            stroke-dasharray: 0;
            animation: 182s circletimer linear;
        }

        .topcircle {
            border: 16px solid red;
            stroke: rgba(234, 235, 234, 1);
            stroke-width: 6;
            fill: transparent;
            color: white;
            stroke-dashoffset: 252;
            stroke-dasharray: 0;

        }

        #combine {
            position: absolute;
            display: block;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: black;
            font-size: 20px;
            font-weight: 700;
        }

<div><span id='timing' style='color:red;'></span></div>
  <div id="hiding"><svg width='100' height='100'>
      <circle id='firstcircle' class='topcircle' cx='50' cy='50' r='40' />
      <circle id='secondcircle' class='circle' cx='50' cy='50' r='40' /></svg>
    <div id='combine'><span id='clock'></span></div>
  </div>
  <p>Count numbers: <output id="result"></output></p>
  <button onclick="startWorker()">Show</button>
  <button onclick="stopWorker()">Hide</button>

Answer 1

使用 visibility:hidden/visible 而不是 display:none/block 它将起作用

只需像下面这样修改您的 javascript 函数

function startWorker() {
  document.getElementById('hiding').style.visibility = 'visible';
}

function stopWorker() {
  document.getElementById('hiding').style.visibility = 'hidden';
}

在这里检查你修改过的 fiddle

countdown('clock', 3, 0, 'timing');
    function countdown(element, minutes, seconds, element1) {
      var time = minutes * 60 + seconds;

      interval = setInterval(function () {
        var el = document.getElementById(element);
        var e = document.getElementById(element1);

        if (time <= 0) {
          var text = "00:00";
          el.innerHTML = text;
          e.innerHTML = text

          clearInterval(interval);
          return;
        }

        var minutes = Math.floor(time / 60);
        if (minutes < 10) minutes = "0" + minutes;
        var seconds = time % 60;
        if (seconds < 10) seconds = "0" + seconds;
        var text = minutes + ':' + seconds;
        el.innerHTML = text;
        e.innerHTML = text;
        time--;
      }, 1000);
    }
    function startWorker() {
      document.getElementById('hiding').style.visibility = 'visible';
    }

    function stopWorker() {
      document.getElementById('hiding').style.visibility = 'hidden';
    }

@keyframes circletimer {
            0% {
                stroke-dashoffset: 252;
                stroke-dasharray: 252;
            }

            100% {
                stroke-dashoffset: 0;
                stroke-dasharray: 252;
            }
        }

        svg {
            background-color: transparent;
            position: absolute;
            background-color: transparent;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotateZ(-90deg);
        }

        .circle {
            border: 16px solid #c01818;
            stroke: rgba(14, 194, 32, 0.8);
            stroke-width: 6;
            fill: transparent;
            stroke-dashoffset: 252;
            stroke-dasharray: 0;
            animation: 182s circletimer linear;
        }

        .topcircle {
            border: 16px solid red;
            stroke: rgba(234, 235, 234, 1);
            stroke-width: 6;
            fill: transparent;
            color: white;
            stroke-dashoffset: 252;
            stroke-dasharray: 0;

        }

        #combine {
            position: absolute;
            display: block;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: black;
            font-size: 20px;
            font-weight: 700;
        }

<div><span id='timing' style='color:red;'></span></div>
  <div id="hiding"><svg width='100' height='100'>
      <circle id='firstcircle' class='topcircle' cx='50' cy='50' r='40' />
      <circle id='secondcircle' class='circle' cx='50' cy='50' r='40' /></svg>
    <div id='combine'><span id='clock'></span></div>
  </div>
  <p>Count numbers: <output id="result"></output></p>
  <button onclick="startWorker()">Show</button>
  <button onclick="stopWorker()">Hide</button>