숫자 대신 단어가있는 프리 로더 비율을 만드시겠습니까?

Question

숫자 대신 단어가 포함 된 백분율 프리 로더를 만들려고합니다. 예 : 1 퍼센트, 2 퍼센트 등. 최대 1 퍼센트입니다. 나는 그것이 매우 빠르게 이동합니다 알고

...

는 확신도 시작하지? 봤 거든 내 손을 조금 쳐다 보았다. 올바른 방향으로 밀면 내가 원하는 전부 다!

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

내가이 접근 방식을 제공는 첫 번째 작품 하나만 원하는 경우 또는 당신은 배열을 사용 두 번째 작업은 여러 작업을 원하고 쉽게 관리하려는 경우에 효과적입니다.

첫 번째 접근 방식은 :

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

을