当前位置:首页 > JavaScript

js实现数字循环

2026-02-02 18:15:36JavaScript

实现数字循环的方法

使用模运算实现循环

模运算(%)是数字循环的常见方法,适用于固定范围的循环。例如,循环显示0到9的数字:

let num = 0;
setInterval(() => {
  console.log(num % 10); // 输出0到9循环
  num++;
}, 1000);

数组循环遍历

通过数组存储循环的数字,配合索引实现循环:

js实现数字循环

const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
let index = 0;
setInterval(() => {
  console.log(numbers[index % numbers.length]);
  index++;
}, 1000);

自定义循环函数

封装一个可配置的循环函数,支持起始值、结束值和步长:

js实现数字循环

function cycleNumber(start, end, step = 1) {
  let current = start;
  return function() {
    const result = current;
    current += step;
    if (current > end) current = start;
    return result;
  };
}

const nextNumber = cycleNumber(0, 9);
setInterval(() => console.log(nextNumber()), 1000);

双向循环(递增和递减)

实现数字的递增和递减循环,例如0→9→0→9:

let num = 0;
let direction = 1;

setInterval(() => {
  console.log(num);
  num += direction;
  if (num === 9 || num === 0) direction *= -1;
}, 1000);

使用生成器函数

通过ES6生成器函数实现更灵活的循环控制:

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

const cycle = numberCycle(0, 9);
setInterval(() => console.log(cycle.next().value), 1000);

应用场景选择

  • 简单循环:模运算或数组遍历
  • 需要复杂逻辑:自定义函数或生成器
  • 双向变化:方向控制变量

标签: 数字js
分享给朋友:

相关文章

js实现vue

js实现vue

Vue.js 简介 Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。其核心库专注于视图层,易于与其他库或现有项目整合。 实现 Vue.js 的基本步骤 安装 Vue.…

js 实现继承

js 实现继承

原型链继承 通过让子类的原型对象指向父类的实例来实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Par…

js实现图片放大缩小

js实现图片放大缩小

实现图片放大缩小的基础方法 使用CSS的transform: scale()属性可以快速实现图片的放大缩小效果。通过JavaScript动态修改该属性值: const img = document.…

js实现验证

js实现验证

验证表单输入 使用JavaScript验证表单输入是常见的需求。可以通过监听表单提交事件,检查输入字段是否符合要求。 document.getElementById('myForm').addEve…

js实现乘

js实现乘

JavaScript 实现乘法运算 在 JavaScript 中实现乘法运算可以通过多种方式完成,包括基本运算符、函数封装以及高级算法(如大数乘法)。以下是几种常见方法: 使用基本乘法运算符 Ja…

js防抖和节流实现

js防抖和节流实现

防抖(Debounce)的实现 防抖的核心思想是在事件被触发后,延迟执行回调函数。如果在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口大小调整等场景。 function debounc…