我有一个借贷计算器，它使用inout元素作为滑块输入可以很好地工作，但是当我将html的滑块属性更改为输入框时，我的客户想手动输入值并且不希望使用滑块不起作用。
这里是a link！由于我的网站正在http测试服务器上运行，因此您可能遇到安全性错误，您可以绕过该错误并继续检查该网站。
<!-- content start -->
<div class="container">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="wrapper-content bg-white pinside40">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
<div class="bg-light pinside40 outline">
<span>Loan Amount is </span>
<strong>
<span class="pull-right" id="la_value">30000</span></strong>
<input type="text" data-slider="true" value="30000" data-slider-range="100000,5000000" data-slider-step="10000" data-slider-snap="true" id="la">
<hr>
<span>No. of Month is <strong>
<span class="pull-right" id="nm_value">30</span> </strong>
</span>
<input type="text" data-slider="true" value="30" data-slider-range="120,360" data-slider-step="1" data-slider-snap="true" id="nm">
<hr>
<span>Rate of Interest [ROI] is <strong><span class="pull-right" id="roi_value">10</span>
</strong>
</span>
<input type="text" data-slider="true" value="10.2" data-slider-range="8,16" data-slider-step=".05" data-slider-snap="true" id="roi">
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="bg-light pinside30 outline">
Monthly EMI
<h2 id='emi' class="pull-right"></h2>
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="bg-light pinside30 outline">
Total Interest
<h2 id='tbl_int' class="pull-right"></h2>
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="bg-light pinside30 outline"> Payable Amount
<h2 id='tbl_full' class="pull-right"></h2></div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="bg-light pinside30 outline">
Interest Percentage
<h2 id='tbl_int_pge' class="pull-right"></h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div id="loantable" class='table table-striped table-bordered loantable table-responsive'></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.content end -->
$(document).ready(function(){
$("#la").bind(
"slider:changed", function (event, data) {
$("#la_value").html(data.value.toFixed(0));
calculateEMI();
}
);
$("#nm").bind(
"slider:changed", function (event, data) {
$("#nm_value").html(data.value.toFixed(0));
calculateEMI();
}
);
$("#roi").bind(
"slider:changed", function (event, data) {
$("#roi_value").html(data.value.toFixed(2));
calculateEMI();
}
);
function calculateEMI(){
var loanAmount = $("#la_value").html();
var numberOfMonths = $("#nm_value").html();
var rateOfInterest = $("#roi_value").html();
var monthlyInterestRatio = (rateOfInterest/100)/12;
var top = Math.pow((1+monthlyInterestRatio),numberOfMonths);
var bottom = top -1;
var sp = top / bottom;
var emi = ((loanAmount * monthlyInterestRatio) * sp);
var full = numberOfMonths * emi;
var interest = full - loanAmount;
var int_pge = (interest / full) * 100;
$("#tbl_int_pge").html(int_pge.toFixed(2)+" %");
//$("#tbl_loan_pge").html((100-int_pge.toFixed(2))+" %");
var emi_str = emi.toFixed(2).toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
var loanAmount_str = loanAmount.toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
var full_str = full.toFixed(2).toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
var int_str = interest.toFixed(2).toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
$("#emi").html(emi_str);
$("#tbl_emi").html(emi_str);
$("#tbl_la").html(loanAmount_str);
$("#tbl_nm").html(numberOfMonths);
$("#tbl_roi").html(rateOfInterest);
$("#tbl_full").html(full_str);
$("#tbl_int").html(int_str);
var detailDesc = "<thead><tr class='table-head'><th>Payment No.</th><th>Begining Balance</th><th>Monthly Payments</th><th>Principal</th><th>Interest</th><th>Ending Balance</th></thead><tbody>";
var bb=parseInt(loanAmount);
var int_dd =0;var pre_dd=0;var end_dd=0;
for (var j=1;j<=numberOfMonths;j++){
int_dd = bb * ((rateOfInterest/100)/12);
pre_dd = emi.toFixed(2) - int_dd.toFixed(2);
end_dd = bb - pre_dd.toFixed(2);
detailDesc += "<tr><td>"+j+"</td><td>"+bb.toFixed(2)+"</td><td>"+emi.toFixed(2)+"</td><td>"+pre_dd.toFixed(2)+"</td><td>"+int_dd.toFixed(2)+"</td><td>"+end_dd.toFixed(2)+"</td></tr>";
bb = bb - pre_dd.toFixed(2);
}
detailDesc += "</tbody>";
$("#loantable").html(detailDesc);
}
calculateEMI();
});
答案 0 :(得分：0)
您已在滑块下方隐藏了输入字段，因此可以使用该字段。您不必创建另一种语言，因为js和/或服务器端语言无疑从该字段中获取价值。
答案 1 :(得分：0)
您可能正在寻找类似mortgage calculator 的计算器
您可以更改的是键入文本并从输入中获取值！ 删除与滑块相关的所有内容，仅添加输入
从
进行更改 $("#la").bind(
"slider:changed", function (event, data) {
$("#la_value").html(data.value.toFixed(0));
calculateEMI();
}
);
像这样
$("#la").change(function(event, data){
$("#la_value").html(data.value.toFixed(0));
calculateEMI();});
答案 2 :(得分：0)
自jQuery 3.0起bind()已过时，请考虑使用on()。
要更改滑块以输入，您需要将slider:changed更改为input事件，并将toFixed()更改为parseInt或parseFloat
$("#la").on("input", function() {
$("#la_value").html(parseInt(this.value));
calculateEMI();
});
$("#nm").on("input", function() {
$("#nm_value").html(parseInt(this.value));
calculateEMI();
});
$("#roi").on("input", function() {
$("#roi_value").html(parseFloat(this.value));
calculateEMI();
});
别忘了删除
<script src="/pio2018/static/cssnew/js/simple-slider.js"></script>