Javascript 如何将输入类型time的值传递给日期对象？

此函数将时间转换为12小时格式，此函数在堆栈溢出时计入参与者：

JS

function ampm(date) {
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var ampm = hours >= 12 ? 'pm' : 'am';
    hours = hours % 12;
    hours = hours ? hours : 12; // 0 should be 12
    minutes = minutes < 10 ? '0'+minutes : minutes; // if minutes less than 10, add a 0 in front of it ie: 6:6 -> 6:06
    var strTime = hours + ':' + minutes + ' ' + ampm;
    document.getElementById('time').value = strTime;
    return strTime;
}

////This is how the value of the time input is supposed to be displayed in 12 hr format
_("display_time").innerHTML = ampm(new Date());

函数ampm（日期）{
var hours=date.getHours（）；
var minutes=date.getMinutes（）；
var ampm=小时数>=12？“下午”：“上午”；
小时数=小时数%12；
小时数=小时数？小时数：12；//0应为12
分钟数=分钟数<10？'0'+分钟数：分钟数；//如果分钟数小于10，则在其前面添加一个0，即：6:6->6:06
var strTime=hours+'：'+minutes+''+ampm；
document.getElementById（'time'）。value=strTime；
返回时间；
}
////这就是时间输入值以12小时格式显示的方式
_（“显示时间”）.innerHTML=ampm（新日期（））；

HTML

<!--This is the input field where a user selects a time-->
<input id="time" placeholder="Time" type="time" name="time" />




<!--This is where the value of the time input is supposed to be displayed in 12 hr format-->>
<span id="display_time"></span> 

>

我的问题是如何获取要以12小时格式显示在跨度标记上的时间输入字段的值。此代码处于半工作状态

---

它以12小时格式显示时间，但仅显示当前时间。流程图类似于，用户选择time in time input->some JS转换为12hr格式->在span标记中显示为12hr格式。有什么建议吗？

您的输入值将是字符串，而不是日期。我已经设置了一个脚本，在这里我修改了javascript以处理字符串

$('#time').on('change', function() {
    var date = $('#time').val().split(':');

    var hours = date[0];
    var minutes = date[1];

    $('#display_time').text(ampm(hours, minutes));
});

function ampm(hours, minutes) {
    var ampm = hours >= 12 ? 'pm' : 'am';
    hours = hours % 12 || 12;
    minutes = minutes || 0;
    minutes = minutes < 10 ? '0'+minutes : minutes;
    return hours + ':' + minutes + ' ' + ampm;
}

$（'#time'）。在（'change'，function（）上{
var date=$（'#time'）.val（）.split（'：'）；
var小时=日期[0]；
var分钟=日期[1]；
$（“#显示时间”）.text（ampm（小时，分钟））；
});
功能ampm（小时，分钟）{
var ampm=小时数>=12？“下午”：“上午”；
小时数=小时数%12 | | 12；
分钟=分钟| | 0；
分钟=分钟<10？'0'+分钟：分钟；
返回时间+'：'+分钟+'+安培；
}

像这样的东西就可以了

function showTime() {
    //Grab the time and split into hrs and mins
    var time = document.getElementById("time");
    if ( time.value === "")  {
        document.getElementById("mySpan").innerHTML = "";
        return false;
    }
    var hrs = time.value.split(":")[0];
    var mins = time.value.split(":")[1];
    var newTime = ampm(hrs, mins);
    document.getElementById("mySpan").innerHTML = newTime;
}

function ampm(hrs, mins) {
    return ( hrs % 12 || 12 ) + ":" + mins + (( hrs >= 12 ) ? "PM" : "AM" );
}

---

这就是一个例子

showTime（）

只需在更改时间输入后运行。

无需使用

Date

及其方法。输入是

字符串

，因此您最好使用

.split（“：”

方法，您将直接获得

小时

和

分钟

值

然后只需测试它们的值是否低于

10

添加一个前导

0

，如果

hours

高于

12

则使用

pm

后缀，否则使用

am

这是一个实时演示，使用时间输入的onchange事件，其值作为参数

onchange=“ampm（This.value）

：

函数ampm（时间）{
console.log（时间）；
如果（time.value！==“”）{
var小时=时间分割（“：”[0]；
var分钟=时间分割（“：”[1]；
var后缀=小时数>=12？“下午”：“上午”；
小时数=小时数%12 | | 12；
小时=小时<10？“0”+小时：小时；
var displayTime=hours+“：“+minutes+”+后缀；
document.getElementById（“显示时间”）.innerHTML=displayTime；
}
}

老实说，这似乎让你的生活复杂化了。有很多关于时间和日期对象的stackoverflow问题提出了更简单的解决方案。你只需要搜索一下。你打算如何让用户“在时间输入中选择时间”？时间是什么格式（字符串？时间？时间戳？）请看这个@RobG，它会起作用，除非你仍然需要一个单独的语句来表示12，因为当它大于12时，我们需要删除12来表示12小时clock@RobG我做了一个编辑。它更优雅了一点，谢谢

（函数（h，m）{return（h%12 | | 12）+'：'+m+（'0'在var hours=time.split（“：”）中是什么意思[0]？与var分钟数中的“1”相同？@ArvinFlores这些都是索引，因为split给出了一个数组，所以使用
[0]
我们得到第一个元素，
[1]
我们得到第二个元素。好的。在var后缀中，它不应该是>=12而不是>12吗？因为它的时间是上午11:59到中午12:00，而不是下午12:00？