有人可以帮助格式化此脚本吗？我不确定为什么它没有正确格式化。它应该用逗号格式化数千（即：1000> 1000）但我做的任何事情似乎都无效。 ：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>
答案 0 :(得分：0)
我将formatter变量移到了顶部，然后在每次计算时初始化它。
ex: formatter.format(dragVal * 18.4);
的文档
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>