2017-03-07 96 views
-1

有人可以幫助格式化此腳本嗎?我不確定它爲什麼沒有正確格式。它應該用逗號格式化成千上萬(例如:1000> 1,000),但我似乎沒有任何工作。 :c用逗號格式化數字

我試過添加代碼來代替數字和所有東西,但是由於數字是如何用這個腳本生成的,所以我猜想我錯過了一些顯而易見的事情,它會阻止格式化的發生?

var xmlns = "http://www.w3.org/2000/svg", 
 
    select = function(s) { 
 
    return document.querySelector(s); 
 
    }, 
 
    selectAll = function(s) { 
 
    return document.querySelectorAll(s); 
 
    }, 
 
    container = select('.container'), 
 
    dragger = select('#dragger'), 
 
    dragVal, 
 
    maxDrag = 300 
 

 
//center the container cos it's pretty an' that 
 
TweenMax.set(container, { 
 
    position: 'absolute', 
 
    top: '0%', 
 
    left: '0%', 
 
    xPercent: 0, 
 
    yPercent: 0 
 
}) 
 
TweenMax.set('svg', { 
 
    visibility: 'visible' 
 
}) 
 

 
TweenMax.set('#upText', { 
 
    alpha: 0, 
 
    transformOrigin: '50% 50%' 
 
}) 
 

 
TweenLite.defaultEase = Elastic.easeOut.config(0.4, 0.1); 
 

 
var tl = new TimelineMax({ 
 
    paused: true 
 
}); 
 
tl.addLabel("blobUp") 
 
    .to('#display', 1, { 
 
    attr: { 
 
     cy: '-=40', 
 
     r: 30 
 
    } 
 
    }) 
 
    .to('#dragger', 1, { 
 
    attr: { 
 
     //cy:'-=2', 
 
     r: 8 
 
    } 
 
    }, '-=1') 
 
    .set('#dragger', { 
 
    strokeWidth: 4 
 
    }, '-=1') 
 
    .to('.downText', 1, { 
 
    //alpha:0, 
 
    alpha: 0, 
 
    transformOrigin: '50% 50%' 
 
    }, '-=1') 
 
    .to('.upText', 1, { 
 
    //alpha:1, 
 
    alpha: 1, 
 
    transformOrigin: '50% 50%' 
 
    }, '-=1') 
 
    .addPause() 
 
    .addLabel("blobDown") 
 
    .to('#display', 1, { 
 
    attr: { 
 
     cy: 299.5, 
 
     r: 0 
 
    }, 
 
    ease: Expo.easeOut 
 
    }) 
 
    .to('#dragger', 1, { 
 
    attr: { 
 
     //cy:'-=35', 
 
     r: 13 
 
    } 
 
    }, '-=1') 
 
    .set('#dragger', { 
 
    strokeWidth: 0 
 
    }, '-=1') 
 
    .to('.downText', 1, { 
 
    alpha: 1, 
 
    ease: Power4.easeOut 
 
    }, '-=1') 
 
    .to('.upText', 0.2, { 
 
    alpha: 0, 
 
    ease: Power4.easeOut, 
 
    attr: { 
 
     y: '+=45' 
 
    } 
 
    }, '-=1') 
 

 
Draggable.create(dragger, { 
 
    type: 'x', 
 
    cursor: 'pointer', 
 
    throwProps: true, 
 
    bounds: { 
 
    minX: 0, 
 
    maxX: maxDrag 
 
    }, 
 
    onPress: function() { 
 

 
    tl.play('blobUp') 
 
    }, 
 
    onRelease: function() { 
 
    tl.play('blobDown') 
 
    }, 
 
    onDrag: dragUpdate, 
 
    onThrowUpdate: dragUpdate 
 
}) 
 

 
function dragUpdate() { 
 
    dragVal = Math.round((this.target._gsTransform.x/maxDrag) * 1000); 
 
    select('.downText').textContent = select('.upText').textContent = dragVal; 
 
    
 
    var a = document.getElementsByClassName('downText')[0].innerHTML; 
 
document.getElementsByClassName('perYear')[0].innerHTML = parseInt(dragVal*18.4); 
 
var b = document.getElementsByClassName('downText')[0].innerHTML; 
 
document.getElementsByClassName('perTwentyFive')[0].innerHTML = parseInt(a*460); 
 
var c = document.getElementsByClassName('downText')[0].innerHTML; 
 
document.getElementsByClassName('perMonthCoal')[0].innerHTML = parseInt(a*1); 
 
var d = document.getElementsByClassName('downText')[0].innerHTML; 
 
document.getElementsByClassName('perMonthSolar')[0].innerHTML = parseInt(a*0.79); 
 
    
 
    
 
    TweenMax.to('#display', 1.3, { 
 
    x: this.target._gsTransform.x 
 

 
    }) 
 

 
    TweenMax.staggerTo(['.upText', '.downText'], 1, { 
 
    // x:this.target._gsTransform.x, 
 
    cycle: { 
 
     attr: [{ 
 
     x: this.target._gsTransform.x + 146 
 
     }] 
 
    }, 
 
    ease: Elastic.easeOut.config(1, 0.4) 
 
    }, '0.02') 
 
} 
 

 
TweenMax.to(dragger, 1, { 
 
    x: 30, 
 
    onUpdate: dragUpdate, 
 
    ease: Power1.easeInOut 
 
}) 
 

 

 

 
var formatter = new Intl.NumberFormat('en-US', { 
 
    style: 'currency', 
 
    currency: 'USD', 
 
    minimumFractionDigits: 0, 
 
});
.container { 
 
    width: 600px; 
 
    height: 300px; 
 
    margin-left: 0px; 
 
    margin-top: 0px; 
 
} 
 

 
svg { 
 
    width: 100%; 
 
    height:100%; 
 
    visibility: hidden; 
 
} 
 

 
.upText, 
 
.downText { 
 
    text-anchor: middle; 
 
    font-weight: 300; 
 
    font-size: 172px; 
 
    fill: #ffffff; 
 
    color: black; 
 
    user-select: none; 
 
    -webkit-user-select: none; 
 
    pointer-events: none; 
 
    text-rendering: optimizeSpeed; 
 
margin-left: 10px; 
 
margin-top: 0px; 
 
line-height: 140px; 
 
} 
 

 
.upText { 
 
    font-size: 22px; 
 
    font-family: IntCircular-Medium; 
 
    letter-spacing: -0.5px; 
 
} 
 

 
#dragger{ 
 
-webkit-tap-highlight-color: rgba(0,0,0,0); 
 
} 
 

 
.downText { 
 
    letter-spacing: -0.4px; 
 
    font-family: IntCircular-Thin; 
 
}
<div class="downText" id="downText">100</div> 
 

 
<div class="container"> 
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="100 222 400 250"> 
 
    <defs> 
 
    <filter id="goo" color-interpolation-filters="sRGB"> 
 
     <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur"/> 
 
     <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7" result="cm"/> 
 
    </filter> 
 
    </defs> 
 
    <g id="dragGroup"> 
 
    <path id="dragBar" fill="#ff9600" d="M447 299.5c0 1.4-1.1 2.5-2.5 2.5h-296c-1.4 0-2.5-1.1-2.5-2.5l0 0c0-1.4 1.1-2.5 2.5-2.5h296C445.9 297 447 298.1 447 299.5L447 299.5z"/> 
 
    <g id="displayGroup"> 
 
     <g id="gooGroup" filter="url(#goo)"> 
 
     <circle id="display" fill="#ffab18" cx="146" cy="299.5" r="13"/> 
 
     <circle id="dragger" fill="#ffab18" stroke="#ff6600" stroke-width="0" cx="146" cy="299.5" r="13"/> 
 
     </g> 
 
     <text class="upText" x="145" y="266"/> 
 
    </g> 
 
    </g> 
 
</svg> 
 

 

 
</div> 
 

 
<div class="perYear" id="perYear"></div> The div id above is "perYear" and its number is formed by taking the contents of the div "downText" and multiplying by 18.4<br><br> 
 
<div class="perTwentyFive" id="perTwentyFive"></div> The div id above is "perTwentyFive" and its number is formed by taking the contents of the div "downText" and multiplying by 460<br><br> 
 
<div class="perMonthCoal" id="perMonthCoal"></div> The div id above is "perMonthCoal" and its number is formed by taking the contents of the div "downText" and multiplying by 1<br><br> 
 
<div class="perMonthSolar" id="perMonthSolar"></div> The div id above is "perMonthSolar" and its number is formed by taking the contents of the div "downText" and multiplying by 0.79 
 

 
<script src='http://vibralifeusa.com/slider-test/1.js' type='text/javascript'></script> 
 
<script src='http://vibralifeusa.com/slider-test/2.js' type='text/javascript'></script>

+1

這是一個整個大量的代碼只是格式化1000-> 1000的文檔。你可以減少它只是問題?看看這裏:[mcve] –

+0

該代碼是我在我的網站上使用的滑塊。這實際上是試圖格式化任何代碼的唯一部分是這樣的部分: VAR格式=新Intl.NumberFormat(「EN-US」,{ 風格:「貨幣」, 貨幣:「美元」, minimumFractionDigits: 0, }); – Leurus

+0

滑塊在您拖動時更新數字,但我需要將數字格式化,我不確定如何操作或放置格式代碼的位置。 – Leurus

回答

0

我搬到你formatter變量到頂部,然後在每個運算初始化。

ex: formatter.format(dragVal * 18.4);

硒對Intl.NumberFormat

var formatter = new Intl.NumberFormat('en-US', { 
 
    style: 'currency', 
 
    currency: 'USD', 
 
    maximumSignificantDigits: 0, 
 
}); 
 

 
var xmlns = "http://www.w3.org/2000/svg", 
 
    select = function(s) { 
 
    return document.querySelector(s); 
 
    }, 
 
    selectAll = function(s) { 
 
    return document.querySelectorAll(s); 
 
    }, 
 
    container = select('.container'), 
 
    dragger = select('#dragger'), 
 
    dragVal, 
 
    maxDrag = 300 
 

 
//center the container cos it's pretty an' that 
 
TweenMax.set(container, { 
 
    position: 'absolute', 
 
    top: '0%', 
 
    left: '0%', 
 
    xPercent: 0, 
 
    yPercent: 0 
 
}) 
 
TweenMax.set('svg', { 
 
    visibility: 'visible' 
 
}) 
 

 
TweenMax.set('#upText', { 
 
    alpha: 0, 
 
    transformOrigin: '50% 50%' 
 
}) 
 

 
TweenLite.defaultEase = Elastic.easeOut.config(0.4, 0.1); 
 

 
var tl = new TimelineMax({ 
 
    paused: true 
 
}); 
 
tl.addLabel("blobUp") 
 
    .to('#display', 1, { 
 
    attr: { 
 
     cy: '-=40', 
 
     r: 30 
 
    } 
 
    }) 
 
    .to('#dragger', 1, { 
 
    attr: { 
 
     //cy:'-=2', 
 
     r: 8 
 
    } 
 
    }, '-=1') 
 
    .set('#dragger', { 
 
    strokeWidth: 4 
 
    }, '-=1') 
 
    .to('.downText', 1, { 
 
    //alpha:0, 
 
    alpha: 0, 
 
    transformOrigin: '50% 50%' 
 
    }, '-=1') 
 
    .to('.upText', 1, { 
 
    //alpha:1, 
 
    alpha: 1, 
 
    transformOrigin: '50% 50%' 
 
    }, '-=1') 
 
    .addPause() 
 
    .addLabel("blobDown") 
 
    .to('#display', 1, { 
 
    attr: { 
 
     cy: 299.5, 
 
     r: 0 
 
    }, 
 
    ease: Expo.easeOut 
 
    }) 
 
    .to('#dragger', 1, { 
 
    attr: { 
 
     //cy:'-=35', 
 
     r: 13 
 
    } 
 
    }, '-=1') 
 
    .set('#dragger', { 
 
    strokeWidth: 0 
 
    }, '-=1') 
 
    .to('.downText', 1, { 
 
    alpha: 1, 
 
    ease: Power4.easeOut 
 
    }, '-=1') 
 
    .to('.upText', 0.2, { 
 
    alpha: 0, 
 
    ease: Power4.easeOut, 
 
    attr: { 
 
     y: '+=45' 
 
    } 
 
    }, '-=1') 
 

 
Draggable.create(dragger, { 
 
    type: 'x', 
 
    cursor: 'pointer', 
 
    throwProps: true, 
 
    bounds: { 
 
    minX: 0, 
 
    maxX: maxDrag 
 
    }, 
 
    onPress: function() { 
 

 
    tl.play('blobUp') 
 
    }, 
 
    onRelease: function() { 
 
    tl.play('blobDown') 
 
    }, 
 
    onDrag: dragUpdate, 
 
    onThrowUpdate: dragUpdate 
 
}) 
 

 
function dragUpdate() { 
 
    dragVal = Math.round((this.target._gsTransform.x/maxDrag) * 1000); 
 
    select('.downText').textContent = select('.upText').textContent = dragVal; 
 
    var a = document.getElementsByClassName('downText')[0].innerHTML; 
 
document.getElementsByClassName('perYear')[0].innerHTML = formatter.format(dragVal*18.4); 
 
var b = document.getElementsByClassName('downText')[0].innerHTML; 
 
document.getElementsByClassName('perTwentyFive')[0].innerHTML = formatter.format(a*460); 
 
var c = document.getElementsByClassName('downText')[0].innerHTML; 
 
document.getElementsByClassName('perMonthCoal')[0].innerHTML = formatter.format(a*1); 
 
var d = document.getElementsByClassName('downText')[0].innerHTML; 
 
document.getElementsByClassName('perMonthSolar')[0].innerHTML = formatter.format(a*0.79); 
 
    
 
    
 
    TweenMax.to('#display', 1.3, { 
 
    x: this.target._gsTransform.x 
 

 
    }) 
 

 
    TweenMax.staggerTo(['.upText', '.downText'], 1, { 
 
    // x:this.target._gsTransform.x, 
 
    cycle: { 
 
     attr: [{ 
 
     x: this.target._gsTransform.x + 146 
 
     }] 
 
    }, 
 
    ease: Elastic.easeOut.config(1, 0.4) 
 
    }, '0.02') 
 
} 
 

 
TweenMax.to(dragger, 1, { 
 
    x: 30, 
 
    onUpdate: dragUpdate, 
 
    ease: Power1.easeInOut 
 
})
.container { 
 
    width: 600px; 
 
    height: 300px; 
 
    margin-left: 0px; 
 
    margin-top: 0px; 
 
} 
 

 
svg { 
 
    width: 100%; 
 
    height:100%; 
 
    visibility: hidden; 
 
} 
 

 
.upText, 
 
.downText { 
 
    text-anchor: middle; 
 
    font-weight: 300; 
 
    font-size: 172px; 
 
    fill: #ffffff; 
 
    color: black; 
 
    user-select: none; 
 
    -webkit-user-select: none; 
 
    pointer-events: none; 
 
    text-rendering: optimizeSpeed; 
 
margin-left: 10px; 
 
margin-top: 0px; 
 
line-height: 140px; 
 
} 
 

 
.upText { 
 
    font-size: 22px; 
 
    font-family: IntCircular-Medium; 
 
    letter-spacing: -0.5px; 
 
} 
 

 
#dragger{ 
 
-webkit-tap-highlight-color: rgba(0,0,0,0); 
 
} 
 

 
.downText { 
 
    letter-spacing: -0.4px; 
 
    font-family: IntCircular-Thin; 
 
}
<div class="downText" id="downText">100</div> 
 

 
<div class="container"> 
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="100 222 400 250"> 
 
    <defs> 
 
    <filter id="goo" color-interpolation-filters="sRGB"> 
 
     <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur"/> 
 
     <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7" result="cm"/> 
 
    </filter> 
 
    </defs> 
 
    <g id="dragGroup"> 
 
    <path id="dragBar" fill="#ff9600" d="M447 299.5c0 1.4-1.1 2.5-2.5 2.5h-296c-1.4 0-2.5-1.1-2.5-2.5l0 0c0-1.4 1.1-2.5 2.5-2.5h296C445.9 297 447 298.1 447 299.5L447 299.5z"/> 
 
    <g id="displayGroup"> 
 
     <g id="gooGroup" filter="url(#goo)"> 
 
     <circle id="display" fill="#ffab18" cx="146" cy="299.5" r="13"/> 
 
     <circle id="dragger" fill="#ffab18" stroke="#ff6600" stroke-width="0" cx="146" cy="299.5" r="13"/> 
 
     </g> 
 
     <text class="upText" x="145" y="266"/> 
 
    </g> 
 
    </g> 
 
</svg> 
 

 

 
</div> 
 

 
<div class="perYear" id="perYear"></div> The div id above is "perYear" and its number is formed by taking the contents of the div "downText" and multiplying by 18.4<br><br> 
 
<div class="perTwentyFive" id="perTwentyFive"></div> The div id above is "perTwentyFive" and its number is formed by taking the contents of the div "downText" and multiplying by 460<br><br> 
 
<div class="perMonthCoal" id="perMonthCoal"></div> The div id above is "perMonthCoal" and its number is formed by taking the contents of the div "downText" and multiplying by 1<br><br> 
 
<div class="perMonthSolar" id="perMonthSolar"></div> The div id above is "perMonthSolar" and its number is formed by taking the contents of the div "downText" and multiplying by 0.79 
 

 
<script src='http://vibralifeusa.com/slider-test/1.js' type='text/javascript'></script> 
 
<script src='http://vibralifeusa.com/slider-test/2.js' type='text/javascript'></script>

+0

其中一個數字四捨五入,但除此之外,這正是我所需要的!非常感謝Zorken! – Leurus

+0

不客氣。我還更新了代碼,以便您可以使用'formatter'變量。 – Zorken17