我尝试了很多我在其他问题中找到的解决方案,但没有解决我的问题,我真的不知道为什么我的代码不起作用,控制台中没有错误,jquery和jquery-ui是最新版本。
参考
<script src="jQuery3.3.1.js" type="text/javascript"></script>
<link href="jQueryUI1.12.1-darkness.css" rel="stylesheet" type="text/css"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
crossorigin="anonymous" type="text/javascript"></script>
滑块
$("#slider-range").slider({
range: true,
min: parseInt(0),
max: parseInt(1440),
step: parseInt(15),
value: parseInt(600),
slide: function(e, ui) {
var hours1 = Math.floor(ui.values[0] / 60);
var minutes1 = ui.values[0] - (hours1 * 60);
if (hours1.length == 1) hours1 = '0' + hours1;
if (minutes1.length == 1) minutes1 = '0' + minutes1;
if (minutes1 == 0) minutes1 = '00';
if (hours1 >= 12) {
if (hours1 == 12) {
hours1 = hours1;
minutes1 = minutes1 + " PM";
} else {
hours1 = hours1 - 12;
minutes1 = minutes1 + " PM";
}
} else {
hours1 = hours1;
minutes1 = minutes1 + " AM";
}
if (hours1 == 0) {
hours1 = 12;
minutes1 = minutes1;
}
$('.slider-time').html(hours1 + ':' + minutes1);
}
});
CSS
#time-range p {
font-family: "Arial", sans-serif;
font-size: 14px;
color: #333;
}
#slider-range {
width: 80%;
margin-bottom: 15px;
}
HTML
<div id="time-range">
<p>Time Range: <span class="slider-time">10:00 AM</span> - <span class="slider-time2">12:00 PM</span>
</p>
<div class="sliders_step1">
<div id="slider-range"></div>
</div>
</div>
我真的需要尽快解决这个问题!
JSFiddle在这里。
看看这段代码。
$(function() {
function formatTime(h, m, f) {
if (f == undefined) {
f = true;
}
var time;
if (f) {
var fh = (h > 12 ? h - 12 : h);
if (h == 24) {
fh = 12
} else if (fh == 0) {
fh = 12;
}
time = "" + (fh < 10 ? "0" + fh : fh) + ":" + (m < 10 ? "0" + m : m) + (h > 11 && h != 24 ? " PM" : " AM");
} else {
time = "" + (h < 10 ? "0" + h : h) + ":" + (m < 10 ? "0" + m : m);
}
return time;
}
$("#slider-range").slider({
range: true,
min: 0,
max: 24,
step: .25,
values: [10, 12],
slide: function(e, ui) {
var times = [{
hour: Math.floor(ui.values[0])
}, {
hour: Math.floor(ui.values[1])
}];
times[0].min = (ui.values[0] - times[0].hour) * 60;
times[1].min = (ui.values[1] - times[1].hour) * 60;
$('.slider-time').html(formatTime(times[0].hour, times[0].min));
$('.slider-time2').html(formatTime(times[1].hour, times[1].min));
}
});
});
#time-range p {
font-family: "Arial", sans-serif;
font-size: 14px;
color: #333;
}
#slider-range {
margin-bottom: 15px;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/ui-darkness/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="time-range">
<p>Time Range: <span class="slider-time">10:00 AM</span> - <span class="slider-time2">12:00 PM</span>
</p>
<div class="sliders_step1">
<div id="slider-range"></div>
</div>
</div>
尝试范围在0到2400之间是困难的,因为我们正在处理因为我们不使用10,而是60.例如,时间计算为1400,1415,1430,1445,1500,但滑块将计为1400 ,1415,1430,1445,1460,1475,1490,1505。因此,当滑块移动时,您将获得无时间值。
+---------------------------------------------+
| x | h = flour(x / 60) | m = x - (h * 60) |
+---------------------------------------------+
| 600 | 10 | 0 |
| 1215 | 20 | 15 |
| 1360 | 22 | 40 |
+---------------------------------------------+
你可以看到它是如何开始崩溃的。现在,如果你改变一小时的百分比,那么.25或25分钟的25分钟变为15分钟。
+-----------------------------------------+
| x | h = floor(x) | m = (x - h) * 60 |
+-----------------------------------------+
| 6.00 | 6 | 0 |
| 12.25 | 12 | 15 |
| 13.75 | 13 | 45 |
+-----------------------------------------+
然后你想把你的小时和分钟格式化为12小时格式:hh:mm A/PM
或24小时格式hh:mm
。这很容易做到,所以我将它移动到它自己的功能,以便您可以轻松调整。
希望这可以帮助。