我有一个 php 变量 ..
<?=number_format($total_commission,2)?>
这有值£3,400.00
然后我有一个 JavaScript 脚本,它计算前端的值
// Count Up
function animateValue(id, start, end, duration) {
var obj = document.getElementById(id);
var range = end - start;
var minTimer = 50;
var stepTime = Math.abs(Math.floor(duration / range));
// never go below minTimer
stepTime = Math.max(stepTime, minTimer);
// get current time and calculate desired end time
var startTime = new Date().getTime();
var endTime = startTime + duration;
var timer;
function run() {
var now = new Date().getTime();
var remaining = Math.max((endTime - now) / duration, 0);
var value = Math.round(end - (remaining * range));
obj.innerHTML = value;
if (value == end) {
clearInterval(timer);
}
}
timer = setInterval(run, stepTime);
run();
}
var value1 = <?=$total_count?>;
var value2 = <?=$total_commission?>;
var value3 = <?=$active_refs?>;
animateValue("value1", 0, value1, 1750);
animateValue("value2", 0, value2, 1750);
animateValue("value3", 0, value3, 1750);
我遇到的问题是在 javascript 中使用 php 变量时,它将数字转换为整数并丢失十进制值。从 PHP 到 JavaScript 时,如何将数字保留为小数?
我尝试在 end 变量上使用 toFixed(2) 但没有运气..
在javascript中,Number()
如果需要,您可以尝试使用函数将字符串转换为数字(整数或十进制),并且您可以使用parseFloat(number)
方法。
使用 Number() 的示例:
// Convert strings
Number('123'); // returns 123
Number('12.3'); // returns 12.3
Number('3.14someRandomStuff'); // returns NaN
Number('42px'); // returns NaN
使用 parseFloat() 的示例:
var text = '3.14someRandomStuff';
var pointNum = parseFloat(text);
// returns 3.14
但是,在您的特定情况下,这就是它如何作为示例工作的方式:(使用 OP 的代码编辑、更新代码,因为我现在有更多时间来清除此内容以备后用,有用的参考)
<?php
$total_count = (string) "£3,400.00";
$total_commission = (string) "£3,500.25";
$active_refs = (string) "£4,400.87";
?>
<div class="container2">
<div id="value1"></div>
<div id="value2"></div>
<div id="value3"></div>
</div>
<script>
// getting a float number from a formatted PHP string
var getNum = function (str) {
var num = str.replace(/[\£\,]/mg, '');
var num2 = parseFloat(num);
return num2;
}
// converting the counter value back to a currency format
var convertNum = function(number){
let numb = number;
return numb.toLocaleString('en-GB', {style : 'currency', currency : 'GBP', minimumFractionDigits : '2', currencyDisplay : 'symbol'});
}
var value1 = getNum("<?php echo (string) $total_count ?>");
var value2 = getNum("<?php echo (string) $total_commission ?>");
var value3 = getNum("<?php echo (string) $active_refs ?>");
// Count Up
function animateValue(id, start, end, duration) {
var obj = document.getElementById(id);
var range = end - start;
var minTimer = 50;
var stepTime = Math.abs(Math.floor(duration / range));
// never go below minTimer
stepTime = Math.max(stepTime, minTimer);
// get current time and calculate desired end time
var startTime = new Date().getTime();
var endTime = startTime + duration;
var timer;
function run() {
var now = new Date().getTime();
var remaining = Math.max((endTime - now) / duration, 0);
var value = parseFloat(end - (remaining * range));
obj.innerHTML = convertNum(value);
if (value == end) {
clearInterval(timer);
}
}
timer = setInterval(run, stepTime);
run();
}
animateValue("value1", 1, value1, 1750);
animateValue("value2", 1, value2, 1750);
animateValue("value3", 1, value3, 1750);
</script>
您还可以在此处检查上述代码版本的结果/输出:或者如果它已被删除,则在此处
也许不太重要的是,我想指出,在您的代码中,以下行将小数转换为整数,也必须对其进行编辑:
var value = Math.round(end - (remaining * range));
这一行将返回一个整数。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句