如何让输入范围显示页面加载的第一个值，以及估计的滑块值

Question

我开发了一个jQuery sip计算器。计算器工作正常。但我希望它在页面加载时显示值2000及其估计计算值。有人能帮我拿吗？下面是我的jQuery代码。

< script src = "https://code.jquery.com/jquery-3.4.1.slim.min.js" > < /script> <
script src = "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" > < /script> <
script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" > < /script> <
script >
$(document).ready(function() {
$("#slider").change(function() {
max: 16000;
value: 2000;
var investment = $('#slider').val();
var annualRate = 17;
var monthlyRate = annualRate / 12 / 100; //Rate of interest
var years = $('#select').val();;
var months = years * 12; //Time period 
var futureValue = 0; //Final Value
$('#slider_value').html(investment);
futureValue = investment * (Math.pow(1 + monthlyRate, months) - 1) / monthlyRate;
$('#futur_value1').html(futureValue);
document.getElementById('futur_value1').innerHTML = futureValue.toLocaleString('en-IN', {
maximumFractionDigits: 2,
style: 'currency',
currency: 'INR'
});
});
}); <
/script>

<div class="sip">
<div>
<h2 id="slider_value" class="text-warning"></h2>
</div>
<div class="form-group"><input id="slider" class="form-control" max="16000" min="2000" step="500" type="range" value="2000" /></div>
<div class="select">No. of years
<select id="select" class="form-control">
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
</select>
</div>
<div>
<div class="est-vl">Estimated Value</div>
<h1 id="futur_value1" class="text-success"></h1>
</div>
</div>

Answer 1

将您的逻辑放入一个单独的函数中，并在文档准备就绪时调用它

function sliderCalculate() {
max: 16000;
value: 2000;
var investment = $('#slider').val();
var annualRate = 17;
var monthlyRate = annualRate / 12 / 100; //Rate of interest
var years = $('#select').val();;
var months = years * 12; //Time period 
var futureValue = 0; //Final Value
$('#slider_value').html(investment);
futureValue = investment * (Math.pow(1 + monthlyRate, months) - 1) / monthlyRate;
$('#futur_value1').html(futureValue);
document.getElementById('futur_value1').innerHTML = futureValue.toLocaleString('en-IN', {
maximumFractionDigits: 2,
style: 'currency',
currency: 'INR'
});
}
$(document).ready(function() {
$("#slider").change(sliderCalculate);
$("#select").change(sliderCalculate);
sliderCalculate()
});

<div class="sip">
<div>
<h2 id="slider_value" class="text-warning"></h2>
</div>
<div class="form-group"><input id="slider" class="form-control" max="16000" min="2000" step="500" type="range" value="2000" /></div>
<div class="select">No. of years
<select id="select" class="form-control">
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
</select>
</div>
<div>
<div class="est-vl">Estimated Value</div>
<h1 id="futur_value1" class="text-success"></h1>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>