Js如何做一个计时器，点击奇数次延续计时，偶数次延缓计时？

Js如何做一个计时器，点击奇数次延续计时，偶数次延缓计时？求解答！

<script>
let timerValue = 0;
let timerInterval;

function toggleTimer() {
  const toggleButton = document.getElementById('toggle');
  if (toggleButton.value === 'start') {
    toggleButton.value = 'stop';
    toggleButton.textContent = 'Stop';
    timerInterval = setInterval(function() {
      timerValue++;
      updateTimer();
    }, 1000);
  } else {
    toggleButton.value = 'start';
    toggleButton.textContent = 'Start';
    clearInterval(timerInterval);
  }
}

function updateTimer() {
  const timerDiv = document.getElementById('timer');
  const hours = Math.floor(timerValue / 3600);
  const minutes = Math.floor((timerValue - (hours * 3600)) / 60);
  const seconds = timerValue - (hours * 3600) - (minutes * 60);
  timerDiv.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

</script>
<div id="timer">00:00:00</div>
<button id="toggle" value="start" onclick="toggleTimer()">Start</button>


//获取到计时器的DOM元素
var timerElement = document.getElementById('timer');

var count = 0;
var timerInterval = null;

//点击计时器时触发的函数
timerElement.addEventListener('click', function() {
  count++; //每次点击计数器，计数器加1
  
  //如果为奇数次点击，则让计时器每秒递增1
  if (count % 2 !== 0) {
    if (timerInterval) clearInterval(timerInterval);
    timerInterval = setInterval(function() {
      timerElement.textContent = parseInt(timerElement.textContent) + 1;
    }, 1000);
  } else { //如果为偶数次点击，则暂停计时器
    clearInterval(timerInterval);
    timerInterval = null;
  }
});

这个代码中，我们绑定了一个点击事件来触发计时器的操作。使用count变量来记录点击次数，如果是奇数次点击，就创建一个setInterval来每秒递增计时器的值，如果是偶数次点击，则关闭计时器。最后将计时器的DOM元素赋值给timerElement变量，并将点击事件绑定到该元素上。

你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7711158
我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：js 实现标题栏的向左向左滚动，设置两个向左和向右的两个按钮，当点击向左按钮时，标题栏文字向左滚动，点击向右按钮时，标题栏向右滚动。
除此之外, 这篇博客: js 数组深度拷贝详解中的 上述方法是能实现深拷贝，但我们需要了解当数组中有层级，是否能深拷贝呢？ 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

要知道，比方一个数组 arr =[{a:1,b:2}]，这个数组arr存储在一个地址中，而其中的arr[0].a存储的地址却是里另一个地址，相当于引用传递，这时简单的深拷贝将不能拷贝这个深层级的拷贝

多层级拷贝错误示例：

 var arr1 = [{a:1,b:1}]
      let newArr1 = arr1.slice(0)
          newArr1.forEach(item=>{
            delete item.a
          })
        console.log(arr1,'原数组');  //[{b:1}] "原数组"
        console.log(newArr1,'拷贝数组') //[{b:1}] "拷贝数组"


//第二种
  var arr2 = [[1,2,3],[2,3,4]]
      let newArr2 = []
      for(var i=0 ;i<arr2.length;i++){
            newArr2.push(arr2[i])
          }
        newArr2.forEach(item=>{
            item.splice(0,1)
          })
          console.log(arr2,'原数组');  //[[2,3],[3,4]] "原数组"
         console.log(newArr2,'拷贝数组') //[[2,3],[3,4]] "拷贝数组"

以上是无法实现多层级拷贝，但是JSON.stringify() ，JSON.parse() 却可以

 var arr1 = [{a:1,b:1}]
let newArr4 =  JSON.parse(JSON.stringify(arr1))
         newArr4.forEach(item=>{
            delete item.a
          })
          console.log(arr1,'原数组');  //[{a:1,b:1}] "原数组"
         console.log(newArr4,'拷贝数组') //[{b:1}] "拷贝数组"

换一个思路，既然每一层的地址不同，我们何不遍历每一层的拷贝呢

 var arr1 = [{a:1,b:1}]
 function clone(obj){
      if (obj instanceof Array) {
        var copy = [];
        for (var i = 0, len = obj.length; i < len; ++i) {
            copy[i] = clone(obj[i]);
        }
        return copy;
    }
 }
let newArr5 = clone(arr1) 
newArr5.forEach(item=>{
            delete item.a
          })
          console.log(arr1,'原数组');  //[{a:1,b:1}] "原数组"
         console.log(newArr5,'拷贝数组') //[{b:1}] "拷贝数组"

当然不同的对象有不同的clone，以下是笔者封装的方法适用于多种对象

function clone(obj) { 
    // 判断是否为空未定义
    if (null == obj || "object" != typeof obj) return obj;

    //  Date
    if (obj instanceof Date) {
        var copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    }

    //  Array
    if (obj instanceof Array) {
        var copy = [];
        for (var i = 0, len = obj.length; i < len; ++i) {
            copy[i] = clone(obj[i]);
        }
        return copy;
    }

    // Object
    if (obj instanceof Object) {
        var copy = {};
        for (var attr in obj) {
            if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
        }
        return copy;
    }

    throw new Error("无法复制对象！不支持其类型。");
}

您还可以看一下吴华老师的Javascript面向对象特效&框架封装实战课程中的原型构造方式封装购物车-购物车对象小节, 巩固相关知识点
以下回答由chatgpt基于相关博客总结生成:
我可以为您提供以下思路：
1. 定义一个全局变量count用来记录按钮被点击的次数，初始值为0。
2. 监听按钮的点击事件，每次点击后将count加1。
3. 根据count的奇偶性来决定计时器的速度，奇数次点击正常速度，偶数次点击减缓速度。
4. 在计时器中使用setInterval函数来实现定时器的功能，在每个时间点上更新计时器的显示。
以下是代码示例（基于jQuery）：
```
// 定义全局变量count
var count = 0;
// 监听按钮的点击事件
$('button').click(function() {
  count++; // 每次点击count加1
});

// 定义计时器相关变量
var timerCount = 0; // 计时器的初始值为0
var delay = 1000; // 计时器的初始速度为每秒1次
var timerId = setInterval(function() {
  // 根据count的奇偶性决定计时器的速度
  if (count % 2 === 0) {
    delay = 2000; // 偶数次点击减缓速度
  } else {
    delay = 1000; // 奇数次点击正常速度
  }
  // 更新计时器的显示
  $('#timer').text(timerCount++);
}, delay);
```
在以上代码中，定义了全局变量count用来记录按钮的点击次数，用计时器相关变量来实现计时器的功能。在setInterval函数中，根据count的奇偶性来决定计时器的速度，偶数次点击减缓速度，奇数次点击正常速度，同时更新计时器的显示。