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

Question

I am trying to create a percentage preloader that has words instead of numbers.... ie ONE PERCENT, TWO PERCENT, etc. up to ONE HUNDRED PERCENT.

I know it will move very fast...

Not quite sure where to even start? Have googled and tried my hand at a bit, just a push in the right direction is all I'm looking for!

Thx!!!

Answer 1

This is the function I'm going to use to convert a number below 100 to the english version:

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

I provide 2 approach, the first works if you only want one or you use arrays, the second works if you want multiple ones and you want to manage them easily.

First approach:

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

This allows you to have 1 progress bar on the page, but I'd recommend using a more object oriented solution:

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