使用javascript將實時數字相乘和格式化

Question

我對javascript非常缺乏經驗，而且我遇到了一個無法找到答案的障礙。

這是我正在做的工作： http ： //www.vibralifeusa.com/slider-test/

這就是我要做的事情：當你來回拖動滑塊時，我希望用戶選擇的任何數字（div id“downText”）相乘並格式化為四個div“perYear”，“perTwentyFive”， “perMonthCoal”，“perMonthSolar”。 這是我為完成此目的而編寫的代碼：

 var a = document.getElementsByClassName('downText')[0].innerHTML; document.getElementsByClassName('perYear')[0].innerHTML = parseInt(a*18.4); var a = document.getElementsByClassName('downText')[0].innerHTML; document.getElementsByClassName('perTwentyFive')[0].innerHTML = parseInt(a*460); var a = document.getElementsByClassName('downText')[0].innerHTML; document.getElementsByClassName('perMonthCoal')[0].innerHTML = parseInt(a*1); var a = document.getElementsByClassName('downText')[0].innerHTML; document.getElementsByClassName('perMonthSolar')[0].innerHTML = parseInt(a*0.79); 

 <div class="downText" id="downText"></div> <div class="perYear" id="perYear"></div> <div class="perTwentyFive" id="perTwentyFive"></div> <div class="perMonthCoal" id="perMonthCoal"></div> <div class="perMonthSolar" id="perMonthSolar"></div> 

第一個問題是，它只將I物理編碼的數字乘以div。 （我手動將100放入div以確保它實際上是乘法），當您拖動滑塊時，它不會更新該倍數。

第二個問題是我不能同時格式化和乘法這些數字。 這是我嘗試添加的代碼，但是當我這樣做時，它會停止乘以數字：

 var formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, }); var amount = document.getElementById('downText').innerHTML; document.getElementById('perYear').innerHTML = formatter.format(amount); var amount = document.getElementById('downText').innerHTML; document.getElementById('perTwentyFive').innerHTML = formatter.format(amount); var amount = document.getElementById('downText').innerHTML; document.getElementById('perMonthCoal').innerHTML = formatter.format(amount); var amount = document.getElementById('downText').innerHTML; document.getElementById('perMonthSolar').innerHTML = formatter.format(amount); 

我知道這是非常基本的東西，但我對javascript非常缺乏經驗並且無法解決這個問題盡管工作了幾個小時，所以任何幫助將不勝感激！

Answer 1

我只是在沒有測試的情況下對此進行了嘗試，但我認為你必須在“dragUpdate”函數中運行所有計算。 也許這會嗎？

function dragUpdate() {
    dragVal = Math.round((this.target._gsTransform.x / maxDrag) * 1000);
    select('.downText').textContent = select('.upText').textContent = dragVal;

    document.getElementById('perYear').innerHTML = parseInt(dragVal * 18.4, 10);
    document.getElementById('perTwentyFive').innerHTML = parseInt(dragVal * 460, 10);
    document.getElementById('perMonthCoal').innerHTML = parseInt(dragVal * 1, 10);
    document.getElementById('perMonthSolar').innerHTML = parseInt(dragVal * 0.79, 10);

    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')
}

Answer 2

引入該錯誤是因為您沒有更新dragUpdate函數的值。 我剛剛在dragUpdate函數中移動了乘法邏輯代碼並且它正在工作。 您已將代碼放在下面，並期望它在滑塊拖動時更新。

 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>