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

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] || "");
}

我提供了两种方法，第一种方法适用于您只想要一个或使用数组，第二种方法适用于您想要多个并且想要轻松管理它们。

第一种方法：

// 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);