我正在尝试使用Javascript构建HTML5滑块贷款计算器，以实时显示和计算值。
最大的问题是，当我谈到Java语言时，我是一个新手。
因此，我有一些代码可用来显示3个滑块，以获取预付款，利率和贷款期限。我已经成功地使滑块表现出了我想要的样子，但是在计算总数时遇到了很多麻烦。我确实通过简单地将所有值传递到javascript的最后一块来设置总数，但是它不会动态更新。现在，我只是想证明自己可以获取一个范围滑块的值，以在其自己的滑块旁边以及计划显示计算的位置下方动态更新。我尝试了很多不同的方法，但是我无法使其正常工作。
这是我目前拥有的代码。
<div class="clearfix" id="finance-calculator"><!-- Begin Finance Calculator -->
<div>Estimate Your Payments</div>
<div id="finance-sale-price">$<?php echo number_format(($sale_price) , 2 , '.' , ',' )?></div>
<div class="sale-price-label">Sale Price</div>
<div id="down-block">
<?php
$down_max = ceil($sale_price * 0.9);
$down_init = ceil ($sale_price * 0.2);
echo '<div class="output-label">$<output for="down_slider" id="down">' . $down_init . '</output><p class="value-label">Down Payment</p></div>';
echo '<input type="range" min="0" max="' . $down_max . '" value="' . $down_init . '" id="down-slider" step="1" oninput="outputDown(value)"/>';
?>
<div class="minimum">0%</div>
<div class="maximum">90%</div>
<script>
function outputDown(downVal) {
document.querySelector('#down').value = downVal;
}
</script>
</div>
<div id="rate-block">
<div class="output-label"><output for="rate_slider" id="rate">5.9</output>% APR<p class="value-label">Interest Rate</p></div>
<input type="range" min="0" max="12" value="5.9" id="rate-slider" step="0.1" oninput="outputRate(value)"/>
<div class="minimum">0%</div>
<div class="maximum">12%</div>
<script>
function outputRate(rateVal) {
document.querySelector('#rate').value = rateVal;
}
</script>
</div>
<div id="term-block">
<div class="output-label"><output for="term-slider" id="term">60</output> Months<p class="value-label">Loan Term</p></div>
<input type="range" min="12" max="84" value="60" id="term-slider" step="12" oninput="outputTerm(value)"/>
<div class="minimum">12 months</div>
<div class="maximum">84 months</div>
<script>
function outputTerm(termVal) {
document.querySelector('#term').value = termVal;
}
</script>
</div>
<div id="total-block">
Testing
<script>
var jdown = document.getElementById("down"); // Variable to store dynamic down payment value
jdown.addEventListener('change', function(){document.write (jdown)}, false); // Event listener to update jdown variable when slider above is used. document.write to test.
</script>
Testing
</div>
可以在以下位置查看此示例：http : //forestlakechev.staging.wpengine.com/inventory/2015/Chevrolet/Cruze/MN/Forest%20Lake/1G1PA5SH0F7130316/？
车辆图像旁边是一些选项卡式内容。单击财务选项卡，您将看到当前的计算器。
我试图使这一过程尽可能简单，但是我只是被卡住了。任何帮助将不胜感激。
谢谢贾里德
实际上，我自己可以通过一些极端的尝试和错误来解决此问题。
我敢肯定，有很多更好的方法可以做到这一点，但是我很高兴能使它起作用。我很高兴收到有关如何改进此方法的任何意见。这是更新的代码：
<div class="clearfix" id="finance-calculator" onload="outputLoad()"><!-- Begin Finance Calculator -->
<?php
$init_payment = ((($sale_price * 0.8)*(1 + (0.059*5)))/60);
?>
<script>
function outputDown(downVal,rate,term) {
var jdown = downVal;
document.querySelector('#down').value = jdown;
var testDown = document.getElementById('testDown');
var rate = document.getElementById(rate).value;
rate = (rate * 0.01).toFixed(3);
var term = document.getElementById(term).value;
var years = (term/12);
var price = <?php echo ($sale_price) ?>;
payment.innerHTML = "$"+(((price - jdown)*(1 + (rate*years)))/term).toFixed(2);
}
function outputRate(rateVal,down,term) {
var jrate = rateVal;
document.querySelector('#rate').value = jrate;
var testRate = document.getElementById('testRate');
var down = document.getElementById(down).value;
jrate = (jrate * 0.01).toFixed(3);
var term = document.getElementById(term).value;
var years = (term/12);
var price = <?php echo ($sale_price) ?>;
payment.innerHTML = "$"+(((price - down)*(1 + (jrate*years)))/term).toFixed(2);
}
function outputTerm(termVal,down,rate) {
var jterm = termVal;
document.querySelector('#term').value = jterm;
var testTerm = document.getElementById('testTerm');
var down = document.getElementById(down).value;
var rate = document.getElementById(rate).value;
rate = (rate * 0.01).toFixed(3);
var years = (jterm/12);
var price = <?php echo ($sale_price) ?>;
payment.innerHTML = "$"+(((price - down)*(1 + (rate*years)))/jterm).toFixed(2);
}
</script>
<div>Estimate Your Payments</div>
<div><a href="#tab-2">Value Your Trade Here!</a></div>
<div id="price">$<?php echo number_format(($sale_price) , 2 , '.' , ',' )?></div>
<div class="sale-price-label">Sale Price</div>
<div id="down-block">
<?php
$down_max = ceil($sale_price * 0.9);
$down_init = ceil ($sale_price * 0.2);
?>
<div class="output-label">$<output for="down_slider" id="down"><?php echo ($down_init) ?></output><p class="value-label">Down Payment</p></div>
<input type="range" min="0" max="<?php echo ($down_max) ?>" value="<?php echo ($down_init) ?>" id="down-slider" step="1" oninput="outputDown(value,'rate','term')"/>
<div class="minimum">0%</div>
<div class="maximum">90%</div>
</div>
<div id="rate-block">
<div class="output-label"><output for="rate_slider" id="rate">5.9</output>% APR<p class="value-label">Interest Rate</p></div>
<input type="range" min="0" max="12" value="5.9" id="rate-slider" step="0.1" oninput="outputRate(value,'down','term')"/>
<div class="minimum">0%</div>
<div class="maximum">12%</div>
</div>
<div id="term-block">
<div class="output-label"><output for="term-slider" id="term">60</output> Months<p class="value-label">Loan Term</p></div>
<input type="range" min="12" max="84" value="60" id="term-slider" step="12" oninput="outputTerm(value,'down','rate')"/>
<div class="minimum">12 months</div>
<div class="maximum">84 months</div>
</div>
<div id="total-block">
<p id="payment">$<?php echo number_format(($init_payment) , 2 , '.' , ',' )?></p>
<p class="payment-label">Monthy Payment</p>
</div>
可以在以下位置找到一个有效的示例：http : //forestlakechev.staging.wpengine.com/inventory/2015/Chevrolet/Cruze/MN/Forest%20Lake/1G1PA5SH0F7130316/？
杰瑞德（Jared）
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句