Question

如何在用JavaScript或NodeJs编写的控制台应用程序中制作加载动画？

示例动画或其他动画。

1. --
2. \
3. |
4. /
5. --

Answer 1

在浏览器控制台中不太可能。在Node.js中：

var twirlTimer = (function() {
  var P = ["\\", "|", "/", "-"];
  var x = 0;
  return setInterval(function() {
    process.stdout.write("\r" + P[x++]);
    x &= 3;
  }, 250);
})();

Answer 2

您也可以在浏览器控制台中执行此操作：

var loading = (function() {
  var h = ['|', '/', '-', '\\'];
  var i = 0;

  return setInterval(() => {
    i = (i > 3) ? 0 : i;
    console.clear();
    console.log(h[i]);
    i++;
  }, 300);
})();

// clearInterval(loading) to stop it.

Answer 3

setInterval（）方法每隔250 ms以指定的间隔（以毫秒为单位）调用一个函数或计算一个表达式，则将p数组中的值打印在控制台上。 setTimeout（）方法将在指定的毫秒数后调用一个函数或对一个表达式求值。 setInterval在此处用作循环。使用clearInterval，使用setTimeout在5000 ms之后中断循环。

const P = ['\\', '|', '/', '-'];
let x = 0;
const loader = setInterval(() => {
  process.stdout.write(`\r${P[x++]}`);
  x %= P.length;
}, 250);

setTimeout(() => {
  clearInterval(loader);
}, 5000);

如何在用JavaScript或NodeJs编写的控制台应用程序中制作加载动画？

3 个答案: