用一行console.log()即可在控制台绘制跳动正弦波:setInterval(() => { const t = Date.now()/50; const y = Math.round(20+15Math.sin(tMath.PI/10)); console.log('█'.padStart(y,' ')+'●'); }, 50);

用 Math.sin() 和 Math.PI 配合时间变量,在控制台里画一条跳动的波形线,其实非常轻量——不需要 canvas,不依赖 DOM,只要一行 console.log() 就能跑起来。
核心原理:正弦波 = 时间 → 角度 → 值 → 可视化位置
Math.sin() 输出 -1 到 1 的周期性值,乘上缩放系数(比如 20)再取整,就能映射成横向空格数;Date.now() 提供连续递增的时间毫秒值,除以某个系数(如 50)再乘 Math.PI,就得到平滑变化的弧度输入。整个过程无状态、无循环依赖,纯函数式驱动。
极简实现(复制即用)
在浏览器控制台粘贴运行:
setInterval(() => {
const t = Date.now() / 50;
const y = Math.round(20 + 15 * Math.sin(t * Math.PI / 10));
console.log('█'.padStart(y, ' ') + '●');
}, 50);-
t * Math.PI / 10控制波形频率(数值越小越慢,越大越快) -
20 + 15 * sin(...)把 -1~1 映射到 5~35,确保光标不会跑出可视区 -
'█'.padStart(y, ' ')用空格左对齐,●作为波峰标记点 - 50ms 刷新率兼顾流畅与低 CPU 占用
进阶微调方向
想更“动画感”?试试这些小改动:
- 把
●换成★或◉,视觉更聚焦 - 用
console.clear()开头,制造“重绘”假象(适合短时演示) - 叠加第二条波:再算一个
Math.cos(...)值,用不同符号并排输出 - 改用
process.stdout.write()(Node.js 环境)实现无换行滚动波形
为什么不用 requestAnimationFrame?
控制台不是图形界面,console.log() 本质是追加文本流;requestAnimationFrame 面向屏幕刷新率(60fps),而这里 20fps(50ms)已足够表现波形节奏,且兼容所有环境(包括旧版浏览器控制台)。过度追求帧率反而增加日志刷屏压力。

















