Question

我正在尝试创建一个百分比预加载器，它具有单词而不是数字....即一个百分比，两个百分比等等，达到百分之一百分之一。

我知道它会快速移动......

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

THX !!!

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

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

1 个答案: