我以价格计算器的形式编写了一个简单的程序。但是，我无法创建根据两个滑块的移动次数来计数的函数。我设法使一个滑块正常工作，不幸的是另一个滑块不工作。关键是要根据滑块的位置将最终价格加到一个。我认为最好的源代码将在这里展示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<main>
<section class="why-us">
<div class="container">
<div class="row mbr-justify-content-center">
<div class="col-sm-6">
<form class="form-horizontal form-pricing" role="form">
<div class="price-slider">
<div class="col-sm-12">
<div id="slider_amirol"></div>
</div>
</div>
<div class="price-slider">
<div class="col-sm-12">
<div id="slider_amirol_down"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="price-form">
<div class="form-group">
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
<input type="hidden" id="amount_amirol" class="form-control">
<input class="price lead" value="0" name="totalprice" type="text" id="total" disabled="disabled"/>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
<input type="hidden" id="amount_amirol" class="form-control">
<input class="price lead" value="0" type="text" id="total_end" disabled="disabled" />
</div>
</div>
</div>
<hr>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="js/script.min.js"></script>
<script>
$(document).scroll(function() {
if ($(window).scrollTop() > 10) {
$(".navbar").css("padding", "0rem");
$(".nav").css("padding", "0.5em 0");
$(".navbar").css("transition", "all 500ms");
$(".nav").css("transition", "all 500ms");
$(".navbar").css("margin-top", "0");
} else if ($(window).scrollTop() < 10) {
$(".navbar").css("padding", "0.5rem 1rem");
$(".nav").css("padding", "1em 0");
$(".navbar").css("transition", "all 500ms");
$(".nav").css("transition", "all 500ms");
$(".navbar").css("margin-top", "2.5em");
}
});
</script>
<script>
var p = {
0: "10 Mb/s",
1: "11 Mb/s",
2: "12 Mb/s",
3: "13 Mb/s",
4: "14 Mb/s",
5: "15 Mb/s",
6: "16 Mb/s",
7: "17 Mb/s",
8: "18 Mb/s",
9: "19 Mb/s",
10: "20 Mb/s",
11: "21 Mb/s",
12: "22 Mb/s",
13: "23 Mb/s",
14: "24 Mb/s",
15: "25 Mb/s",
16: "26 Mb/s",
17: "27 Mb/s",
18: "28 Mb/s",
19: "29 Mb/s",
20: "30 Mb/s",
};
var t = {
0: "44.9",
1: "46.9",
2: "48.9",
3: "50.9",
4: "52.9",
5: "54.9",
6: "56.9",
7: "58.9",
8: "60.9",
9: "62.9",
10: "64.9",
11: "66.9",
12: "68.9",
13: "70.9",
14: "72.9",
15: "74.9",
16: "76.9",
17: "78.9",
18: "80.9",
19: "82.9",
20: "84.9",
};
var pd = {
0: "1 Mb/s",
1: "2 Mb/s",
2: "3 Mb/s",
3: "4 Mb/s",
4: "5 Mb/s",
5: "6 Mb/s",
6: "7 Mb/s",
7: "8 Mb/s",
8: "9 Mb/s",
9: "10 Mb/s",
};
var td = {
0: "4.0",
1: "8.0",
2: "12.0",
3: "16.0",
4: "20.0",
5: "24.0",
6: "28.0",
7: "32.0",
8: "36.0",
9: "40.0",
};
$(document).ready(function() {
$("#slider_amirol").slider({
range: "min",
animate: true,
min: 0,
max: 20,
step: 1,
slide: function(event, ui) {
update($(event.target), ui.value, p);
calcualtePrice($("#total_end"), t, ui.value);
}
});
update($('#slider_amirol'), 0, p);
calcualtePrice($("#total_end"), t);
});
$(document).ready(function() {
$("#slider_amirol_down").slider({
range: "min",
animate: true,
min: 0,
max: 9,
step: 1,
slide: function(event, ui) {
update($(event.target), ui.value, pd);
calcualtePrice($("#total_end"), td, ui.value);
}
});
update($('#slider_amirol_down'), 0, pd);
calcualtePrice($("#total_end", td));
});
function update(slider, val = 0, speedArray) {
var amount = speedArray[val];
const a = slider.find('a');
a.html('<label><span class="glyphicon glyphicon-chevron-left"></span> ' + amount + ' <span class="glyphicon glyphicon-chevron-right"></span></label>');
}
function calcualtePrice(output, speedArray, val = 0) {
var totalPrice = t[val] * 1;
var downPrivce = td[val] * 1;
$("#total").val(totalPrice.toFixed(2) + " PLN");
output.val(totalPrice.toFixed(2) + " PLN");
}
</script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
</body>
</html>
var p = {
0: "10 Mb/s",
1: "11 Mb/s",
2: "12 Mb/s",
3: "13 Mb/s",
4: "14 Mb/s",
5: "15 Mb/s",
6: "16 Mb/s",
7: "17 Mb/s",
8: "18 Mb/s",
9: "19 Mb/s",
10: "20 Mb/s",
11: "21 Mb/s",
12: "22 Mb/s",
13: "23 Mb/s",
14: "24 Mb/s",
15: "25 Mb/s",
16: "26 Mb/s",
17: "27 Mb/s",
18: "28 Mb/s",
19: "29 Mb/s",
20: "30 Mb/s",
};
var t = {
0: "44.9",
1: "46.9",
2: "48.9",
3: "50.9",
4: "52.9",
5: "54.9",
6: "56.9",
7: "58.9",
8: "60.9",
9: "62.9",
10: "64.9",
11: "66.9",
12: "68.9",
13: "70.9",
14: "72.9",
15: "74.9",
16: "76.9",
17: "78.9",
18: "80.9",
19: "82.9",
20: "84.9",
};
var pd = {
0: "1 Mb/s",
1: "2 Mb/s",
2: "3 Mb/s",
3: "4 Mb/s",
4: "5 Mb/s",
5: "6 Mb/s",
6: "7 Mb/s",
7: "8 Mb/s",
8: "9 Mb/s",
9: "10 Mb/s",
};
var td = {
0: "4.0",
1: "8.0",
2: "12.0",
3: "16.0",
4: "20.0",
5: "24.0",
6: "28.0",
7: "32.0",
8: "36.0",
9: "40.0",
};
$(document).ready(function() {
$("#slider_amirol").slider({
range: "min",
animate: true,
min: 0,
max: 20,
step: 1,
slide: function(event, ui) {
update($(event.target), ui.value, p);
calcualtePrice($("#total_end"), t, ui.value);
}
});
update($('#slider_amirol'), 0, p);
calcualtePrice($("#total_end"), t);
});
$(document).ready(function() {
$("#slider_amirol_down").slider({
range: "min",
animate: true,
min: 0,
max: 9,
step: 1,
slide: function(event, ui) {
update($(event.target), ui.value, pd);
calcualtePrice($("#total_end"), td, ui.value);
}
});
update($('#slider_amirol_down'), 0, pd);
calcualtePrice($("#total_end", td));
});
function update(slider, val = 0, speedArray) {
var amount = speedArray[val];
const a = slider.find('a');
a.html('<label><span class="glyphicon glyphicon-chevron-left"></span> ' + amount + ' <span class="glyphicon glyphicon-chevron-right"></span></label>');
}
function calcualtePrice(output, speedArray, val = 0) {
var totalPrice = t[val] * 1;
var downPrivce = td[val] * 1;
$("#total").val(totalPrice.toFixed(2) + " PLN");
output.val(totalPrice.toFixed(2) + " PLN");
}