如何用JavaScript在HTML页面展示谷歌日历事件的12小时制时间（带AM/PM）

我使用谷歌日历展示冰球联赛的赛事，同时将这些谷歌日历事件的部分详情提取并展示在联赛各球队的独立HTML页面中。此前因所有赛事都在下午，我可以在时间输出中硬编码PM，但本赛季会新增上午赛事，这种方式不再适用。目前我仅输出24小时制时间，但理想状态是显示带AM/PM后缀的12小时制时间，以下是我当前使用的代码，希望能得到显示AM/PM的解决方案：

<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
var myObj, i, x = "";
myObj = JSON.parse(this.responseText, function (key, value){
if (key == "dateTime") {

    function unix_to_readable(value) {
    var date = new Date(value) ;
    return ('0' + (date.getMonth()+1)).slice(-2) + '/'
         + ('0' + date.getDate()).slice(-2) + '/'
         + date.getFullYear() + '<br/>'
        + date.getHours() % 12 
        + ':' + ('0' + date.getMinutes()).slice(-2) 
        + ' PM'; 
    }
    return unix_to_readable(value);
    } 

    else {
        return value;
    }
}
);

for (i = 0; i < myObj.items.length; i++) 
{
  x += "<tr class='TableHeader'><td colspan='2' align='center'>" + myObj.items[i].summary + "</td></tr><tr><td align='center'><b>" + myObj.items[i].start.dateTime + "</b></td><td align='center' style='font-size:12px'>" + myObj.items[i].location + "</td></tr><tr><td colspan='2'></td></tr>";
}
document.getElementById("demo").innerHTML = x;  }
};

xmlhttp.open("GET", "https://www.googleapis.com/calendar/v3/calendars/9lh231pkuunmglga33vso1cnv8%40group.calendar.google.com/events?q=" + q + "&timeMin=2023-09-01T01:00:00-05:00&timeMax=2024-03-01T01:00:00-05:00&singleEvents=True&orderBy=startTime&key=AIzaSyBFDfMVc8WUWgXluMpYr4-OVkUn1EyIbuM", true);
xmlhttp.send();
</script>

只需修改unix_to_readable函数，添加AM/PM的判断逻辑，同时处理12小时制的特殊情况（比如0点显示为12AM，12点显示为12PM）：

function unix_to_readable(value) {
    var date = new Date(value);
    var hours = date.getHours();
    // 判断上午/下午时段
    var period = hours >= 12 ? 'PM' : 'AM';
    // 转换为12小时制，处理0点和12点的特殊显示
    var displayHours = hours % 12 || 12;
    
    return ('0' + (date.getMonth()+1)).slice(-2) + '/'
         + ('0' + date.getDate()).slice(-2) + '/'
         + date.getFullYear() + '<br/>'
        + displayHours 
        + ':' + ('0' + date.getMinutes()).slice(-2) 
        + ' ' + period; 
}

<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
var myObj, i, x = "";
myObj = JSON.parse(this.responseText, function (key, value){
if (key == "dateTime") {

    function unix_to_readable(value) {
    var date = new Date(value);
    var hours = date.getHours();
    var period = hours >= 12 ? 'PM' : 'AM';
    var displayHours = hours % 12 || 12;
    
    return ('0' + (date.getMonth()+1)).slice(-2) + '/'
         + ('0' + date.getDate()).slice(-2) + '/'
         + date.getFullYear() + '<br/>'
        + displayHours 
        + ':' + ('0' + date.getMinutes()).slice(-2) 
        + ' ' + period; 
    }
    return unix_to_readable(value);
    } 

    else {
        return value;
    }
}
);

for (i = 0; i < myObj.items.length; i++) 
{
  x += "<tr class='TableHeader'><td colspan='2' align='center'>" + myObj.items[i].summary + "</td></tr><tr><td align='center'><b>" + myObj.items[i].start.dateTime + "</b></td><td align='center' style='font-size:12px'>" + myObj.items[i].location + "</td></tr><tr><td colspan='2'></td></tr>";
}
document.getElementById("demo").innerHTML = x;  }
};

xmlhttp.open("GET", "https://www.googleapis.com/calendar/v3/calendars/9lh231pkuunmglga33vso1cnv8%40group.calendar.google.com/events?q=" + q + "&timeMin=2023-09-01T01:00:00-05:00&timeMax=2024-03-01T01:00:00-05:00&singleEvents=True&orderBy=startTime&key=AIzaSyBFDfMVc8WUWgXluMpYr4-OVkUn1EyIbuM", true);
xmlhttp.send();
</script>

内容的提问来源于stack exchange，提问作者Michael Casserly