用文字而不是数字创建百分比预加载器？

Question

我正在尝试创建一个百分比预加载器，它使用文字而不是数字....即百分之一、百分之二等，最多百分之一百。

我知道它会移动得非常快...

不太确定从哪里开始？在谷歌上搜索并尝试了一下，我正在寻找的只是朝着正确的方向推动！

谢谢！！！

Answer 1

这是我要用来将小于 100 的数字转换为英文版本的函数：

function numberToString(n) {

    var toFifteen = "ONE,TWO,THREE,FOUR,FIVE,SIX,SEVEN,EIGHT,NINE,TEN,ELEVEN,TWELVE,THIRTEEN,FOURTEEN,FIFTEEN".split(",");
    var tens = "TEEN,TWENTY,THIRTEE,FOURTY,FIFTY,SIXTY,SEVENTY,EIGHTY,NINETY".split(",");
    if (n == 0)
        return "ZERO";
    if (n <= 15)
        return toFifteen[n - 1];
    if (n < 20)
        return (toFifteen[- -(n+"")[1] - 1] || "") + "TEEN";
    if (n == 100)
        return "ONE HUNDRED";
     return tens[- -(n+"")[0] - 1] + " " + (toFifteen[- -(n+"")[1] - 1] || "");
}

我提供了 2 种方法，第一种适用于你只需要一个或使用数组的情况，第二种适用于你需要多个并且希望轻松管理它们的情况。

第一种方法：

// Create progress bar element
var progress = document.createElement("span");
var currProgress = 0;

progress.innerHTML = numberToString(currProgress)

// You should put the el
document.body.appendChild(progress);

// This following part updates the progress bar, change this
// to whatever way you want it to get updated

setInterval(function() {
  currProgress++;
  if (currProgress > 100)
    currProgress = 0;
  progress.innerHTML = numberToString(currProgress);
}, 100);

function numberToString(n) {
    
    var toFifteen = "ONE,TWO,THREE,FOUR,FIVE,SIX,SEVEN,EIGHT,NINE,TEN,ELEVEN,TWELVE,THIRTEEN,FOURTEEN,FIFTEEN".split(",");
    var tens = "TEEN,TWENTY,THIRTEE,FOURTY,FIFTY,SIXTY,SEVENTY,EIGHTY,NINETY".split(",");
    if (n == 0)
        return "ZERO";
    if (n <= 15)
        return toFifteen[n - 1];
    if (n < 20)
        return (toFifteen[- -(n+"")[1] - 1] || "") + "TEEN";
    if (n == 100)
        return "ONE HUNDRED";
     return tens[- -(n+"")[0] - 1] + " " + (toFifteen[- -(n+"")[1] - 1] || "");
}

这允许您在页面上有 1 个进度条，但我建议使用更面向对象的解决方案：

function ProgressBar(startingProgress) {
  // This makes the argument optional
  // If the user doesn't enter a number, then it will
  // default to 0
  if (!startingProgress)
    startingProgress = 0;
  this.progress = 0;
  
  this.element = document.createElement("span");
  this.element.innerHTML = ProgressBar.numberToString(this.progress);
}

ProgressBar.prototype.step = function(amount) {
  // Same as with startingProgress
  if (!amount)
    amount = 1;
  this.progress += amount;
  this.element.innerHTML = ProgressBar.numberToString(this.progress);
}

// "Static" method
ProgressBar.numberToString = function(n) {
    
    var toFifteen = "ONE,TWO,THREE,FOUR,FIVE,SIX,SEVEN,EIGHT,NINE,TEN,ELEVEN,TWELVE,THIRTEEN,FOURTEEN,FIFTEEN".split(",");
    var tens = "TEEN,TWENTY,THIRTEE,FOURTY,FIFTY,SIXTY,SEVENTY,EIGHTY,NINETY".split(",");
    if (n == 0)
        return "ZERO";
    if (n <= 15)
        return toFifteen[n - 1];
    if (n < 20)
        return (toFifteen[- -(n+"")[1] - 1] || "") + "TEEN";
    if (n == 100)
        return "ONE HUNDRED";
     return tens[- -(n+"")[0] - 1] + " " + (toFifteen[- -(n+"")[1] - 1] || "");
}

var progress = new ProgressBar();
document.body.appendChild(progress.element);

setInterval(function() {
    progress.step(1);
}, 100);

用文字而不是数字创建百分比预加载器？

Create a percentage preloader with words instead of number?

javascript

preloader

percentage