将滑块的 24 小时时间格式转换为 12 小时

Converting 24hours time format to 12hours for slider bar

本文关键字：小时 格式 转换 时间      更新时间：2023-09-26

我在滑块上尝试将 24 小时格式转换为 12 小时格式时遇到了一些问题。这是我的 jsfiddle .如您所见，当您尝试以一种方式从上午滑到下午时，它运行良好。

但是，一旦它到达 PM 并且您滑回 AM，它就会一直显示为 PM。我无法通过滑块修改值，因为我有一些依赖于它的数据库。我唯一可以修改的部分是我尝试在滑块值上显示它的地方，即这部分：

// Convert 24 hours format into 12
        if(hours == 0){
            hours = 12;
            ext = "AM";
        }
        if(hours == 12){
            ext = "PM";
        }
        if(hours > 12){
            hours = hours - 12;
            ext = 'PM';
        }
        $('#sliderValue').html(hours+':'+minutes + ext);

有导游吗？提前谢谢。

请尝试此小提琴

   $(function() {
    var ext = 'AM';
    $('#sliderValue').html('12:00AM');
    $("#slider-range").slider({       
    min: 0,
    max: 1380,
    step: 60,
    slide: function(e, ui) {
        var hours = Math.floor(ui.value / 60);
        var minutes = ui.value - (hours * 60);
        if(hours.length == 1) hours = '0' + hours;
        if(minutes.length == 1) minutes = '0' + minutes;
        if(minutes==0)minutes = '00';
        // Convert 24 hours format into 12

        if(hours >= 12){
            ext = 'PM';
        }
        else{
            ext = 'AM';
        }
        if(hours>12){
            hours = hours - 12;
        }
        $('#sliderValue').html(hours+':'+minutes + ext);
    }
});

}）;

为什么要改变日常生活中的小时值？使用单独的值，例如

var americanTime = hours;
if(hours > 12) {
  americanTime = hours - 12;
}

你从来没有反过来检查过，你需要这样做：

// Convert 24 hours format into 12
if(hours < 12)
{
    ext = 'AM';
    if(hours == 0)
    {
        hours = 12;
    }
}
else
{
    ext = 'PM';   
    if(hours > 12)
    {
         hours -= 12;   
    }
}

http://prntscr.com/5qmrs7

JsFiddle

$(function() {
    $('#sliderValue').html('12:00AM');
    $("#slider-range").slider({       
        min: 0,
        max: 1380,
        step: 60,
        slide: function(e, ui) {
            var ext = 'AM';
            var hours = Math.floor(ui.value / 60);
            if(hours > 12){
                ext = 'PM';
            }
            var minutes = ui.value - (hours * 60);
            if(hours.length == 1) hours = '0' + hours;
            if(minutes.length == 1) minutes = '0' + minutes;
            if(minutes==0)minutes = '00';
            // Convert 24 hours format into 12
            if(hours == 0){
                hours = 12;
            }
            $('#sliderValue').html(hours+':'+minutes + ext);
        }
    });
});

从不为 0 到 12 之间的小时指定 AM 后缀。因此，当您的滑块从 PM 部分返回时，它永远不会更新并保持为 PM（至少直到您将其放回 0）。

添加部分

if(hours > 0 && hours < 12){
      ext = 'AM';
}

你应该得到你预期的结果。

相关文章：