当前位置：首页 > JavaScript

js实现数字循环

2026-03-15 18:33:56JavaScript

数字循环的基本实现

在JavaScript中实现数字循环可以通过多种方式完成，常见的需求包括数字递增/递减循环、固定范围内的循环或周期性循环（如0-9循环）。以下是几种典型场景的实现方法：

固定范围内的循环（如0→9→0）

使用取模运算实现数字在固定范围内的循环递增：

js实现数字循环

let count = 0;
const max = 9;

function incrementLoop() {
  count = (count + 1) % (max + 1);
  return count;
}

// 调用示例
incrementLoop(); // 返回1 → 2 → ... → 9 → 0 → 1...

递减循环的实现：

function decrementLoop() {
  count = (count - 1 + max + 1) % (max + 1);
  return count;
}

周期性循环动画

通过requestAnimationFrame实现数字动画循环，适合UI动态效果：

js实现数字循环

let start = 0;
const duration = 2000; // 动画周期（毫秒）

function animateNumber(timestamp) {
  const progress = (timestamp % duration) / duration;
  const currentNum = Math.floor(progress * 10); // 0-9循环
  console.log(currentNum);
  requestAnimationFrame(animateNumber);
}

requestAnimationFrame(animateNumber);

使用生成器函数

通过生成器实现可控制的数字循环迭代器：

function* numberLoop(start, end) {
  let current = start;
  while (true) {
    yield current;
    current = current === end ? start : current + 1;
  }
}

const loop = numberLoop(0, 5);
console.log(loop.next().value); // 0
console.log(loop.next().value); // 1
...
console.log(loop.next().value); // 5 → 0 → 1...

实际应用场景示例

倒计时循环组件：

class CycleCounter {
  constructor(min, max) {
    this.current = min;
    this.min = min;
    this.max = max;
  }

  next() {
    this.current = this.current >= this.max ? this.min : this.current + 1;
    return this.current;
  }
}

const counter = new CycleCounter(1, 3);
counter.next(); // 2 → 3 → 1 → 2...