如何使用按钮切换AM/PM和MilitaryTime

要实现一个按钮来切换时间格式（AM/PM 和 Military Time，即24小时制），你需要使用JavaScript来处理按钮点击事件，并相应地更新显示的时间格式。以下是一个简单的示例，展示了如何实现这一功能：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Format Toggle</title>
</head>
<body>
<div id="timeDisplay">12:05 PM</div>
<button id="toggleButton">Toggle Time Format</button>

<script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const timeDisplay = document.getElementById('timeDisplay');
    const toggleButton = document.getElementById('toggleButton');
    let isMilitaryTime = false;

    function updateTime() {
        const now = new Date();
        let hours = now.getHours();
        let minutes = now.getMinutes();
        let ampm = hours >= 12 ? 'PM' : 'AM';

        if (isMilitaryTime) {
            // Convert to military time
            hours = hours % 12 || 12; // Convert hours to 12-hour format for display
            timeDisplay.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
        } else {
            // Convert to AM/PM
            hours = hours % 12;
            hours = hours ? hours : 12; // the hour '0' should be '12'
            timeDisplay.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')} ${ampm}`;
        }
    }

    toggleButton.addEventListener('click', function() {
        isMilitaryTime = !isMilitaryTime;
        updateTime();
    });

    // Initial update
    updateTime();
});

解释

HTML部分：创建了一个显示时间的div和一个切换按钮。
JavaScript部分：
- 使用DOMContentLoaded事件确保DOM完全加载后再绑定事件。
- updateTime函数负责根据当前时间格式更新显示的时间。
- toggleButton的点击事件切换isMilitaryTime标志，并调用updateTime更新显示。
- 初始调用updateTime以显示当前时间。