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

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

​

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

​

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

​