JavaScript计算时间差，包括年、月、周、天、小时、分钟和秒数的差值

JavaScript计算当前时间到指定日期（如2020年1月1日）的精确时间差，包括年、月、周、天、小时、分钟和秒数。代码如下：

        document.addEventListener('DOMContentLoaded', function() {
            const targetDateInput = document.getElementById('target-date');
            const calculateBtn = document.getElementById('calculate-btn');
            const currentTimeDisplay = document.getElementById('current-time-display');
            
            const yearsEl = document.getElementById('years');
            const monthsEl = document.getElementById('months');
            const weeksEl = document.getElementById('weeks');
            const daysEl = document.getElementById('days');
            const hoursEl = document.getElementById('hours');
            const minutesEl = document.getElementById('minutes');
            const secondsEl = document.getElementById('seconds');
            
            let updateInterval;
            
            // 更新当前时间显示
            function updateCurrentTime() {
                const now = new Date();
                currentTimeDisplay.textContent = now.toLocaleString();
            }
            
            // 计算时间差
            function calculateTimeDifference() {
                const targetDate = new Date(targetDateInput.value);
                const now = new Date();
                
                // 计算总毫秒差
                let diffMs = Math.abs(now - targetDate);
                
                // 计算秒数
                const seconds = Math.floor(diffMs / 1000);
                
                // 计算分钟数
                const minutes = Math.floor(seconds / 60);
                
                // 计算小时数
                const hours = Math.floor(minutes / 60);
                
                // 计算天数
                const days = Math.floor(hours / 24);
                
                // 计算周数
                const weeks = Math.floor(days / 7);
                
                // 计算月数（近似值）
                const months = Math.floor(days / 30.44);
                
                // 计算年数（近似值）
                const years = Math.floor(days / 365.25);
                
                // 更新显示
                yearsEl.textContent = years;
                monthsEl.textContent = months;
                weeksEl.textContent = weeks;
                daysEl.textContent = days;
                hoursEl.textContent = hours % 24;
                minutesEl.textContent = minutes % 60;
                secondsEl.textContent = seconds % 60;
            }
            
            // 初始计算
            calculateTimeDifference();
            updateCurrentTime();
            
            // 设置定时器，每秒更新一次
            updateInterval = setInterval(() => {
                calculateTimeDifference();
                updateCurrentTime();
            }, 1000);
            
            // 按钮点击事件
            calculateBtn.addEventListener('click', calculateTimeDifference);
            
            // 日期变化时重新计算
            targetDateInput.addEventListener('change', calculateTimeDifference);
        });

页面的html代码：

    <div class="container">
        <h1>⏰ 时间差计算器</h1>
        
        <div class="date-selector">
            <label for="target-date">选择目标日期：</label>
            <input type="date" id="target-date" value="2020-01-01">
            <button id="calculate-btn">计算时间差</button>
        </div>
        
        <div class="current-time">
            当前时间：<span id="current-time-display"></span>
        </div>
        
        <div class="time-difference">
            <div class="time-unit">
                <div class="value" id="years">0</div>
                <div class="label">年数</div>
            </div>
            <div class="time-unit">
                <div class="value" id="months">0</div>
                <div class="label">月数</div>
            </div>
            <div class="time-unit">
                <div class="value" id="weeks">0</div>
                <div class="label">周数</div>
            </div>
            <div class="time-unit">
                <div class="value" id="days">0</div>
                <div class="label">天数</div>
            </div>
            <div class="time-unit">
                <div class="value" id="hours">0</div>
                <div class="label">小时数</div>
            </div>
            <div class="time-unit">
                <div class="value" id="minutes">0</div>
                <div class="label">分钟数</div>
            </div>
            <div class="time-unit">
                <div class="value" id="seconds">0</div>
                <div class="label">秒数</div>
            </div>
        </div>
    </div>