Web学习网站

Appearance

Date 对象 ​

Date 对象是 JavaScript 的内置对象，用于处理日期和时间。它提供了丰富的 API 来创建、操作和格式化日期时间。

创建 Date 对象 ​

有多种方式可以创建 Date 对象：

当前日期和时间 ​

javascript
// 创建表示当前日期和时间的 Date 对象
let now = new Date();
console.log(now); // 例如：Wed Oct 25 2023 14:30:45 GMT+0800 (中国标准时间)

指定日期和时间 ​

javascript
// 使用日期字符串
let date1 = new Date("2023-10-25");
let date2 = new Date("October 25, 2023 14:30:00");
let date3 = new Date("2023-10-25T14:30:00");

// 使用数字参数（年, 月, 日, 时, 分, 秒, 毫秒）
let date4 = new Date(2023, 9, 25, 14, 30, 0, 0); // 注意：月份从 0 开始计数

// 使用时间戳（毫秒数）
let date5 = new Date(1698225045000);

Date 对象的 getter 方法 ​

获取年、月、日 ​

javascript
let date = new Date("2023-10-25T14:30:45");

console.log(date.getFullYear());    // 2023
console.log(date.getMonth());       // 9 (注意：月份从 0 开始，0 表示一月)
console.log(date.getDate());        // 25 (月份中的日期)
console.log(date.getDay());         // 3 (星期几，0 表示星期日)

获取时、分、秒 ​

javascript
let date = new Date("2023-10-25T14:30:45");

console.log(date.getHours());       // 14
console.log(date.getMinutes());     // 30
console.log(date.getSeconds());     // 45
console.log(date.getMilliseconds()); // 0

获取时间戳 ​

javascript
let date = new Date("2023-10-25T14:30:45");

console.log(date.getTime());        // 1698225045000 (毫秒时间戳)
console.log(date.valueOf());        // 1698225045000 (与 getTime() 相同)

Date 对象的 setter 方法 ​

javascript
let date = new Date();

// 设置年、月、日
date.setFullYear(2024);
date.setMonth(11); // 11 表示 12 月
date.setDate(25);

// 设置时、分、秒
date.setHours(18);
date.setMinutes(30);
date.setSeconds(45);

// 设置时间戳
date.setTime(1703500245000);

console.log(date); // Wed Dec 25 2024 18:30:45 GMT+0800

UTC 方法 ​

Date 对象还提供了对应的 UTC 方法：

javascript
let date = new Date();

console.log(date.getUTCFullYear());
console.log(date.getUTCMonth());
console.log(date.getUTCDate());
console.log(date.getUTCHours());
console.log(date.getUTCMinutes());
console.log(date.getUTCSeconds());

date.setUTCFullYear(2024);
date.setUTCMonth(11);
date.setUTCDate(25);
// ... 其他 UTC setter 方法

日期格式化 ​

toISOString 方法 ​

javascript
let date = new Date("2023-10-25T14:30:45");
console.log(date.toISOString()); // "2023-10-25T06:30:45.000Z"

toDateString 方法 ​

javascript
let date = new Date("2023-10-25T14:30:45");
console.log(date.toDateString()); // "Wed Oct 25 2023"

toTimeString 方法 ​

javascript
let date = new Date("2023-10-25T14:30:45");
console.log(date.toTimeString()); // "14:30:45 GMT+0800 (中国标准时间)"

toLocaleDateString 方法 ​

javascript
let date = new Date("2023-10-25T14:30:45");

// 使用本地格式
console.log(date.toLocaleDateString()); // "2023/10/25"

// 指定地区和选项
console.log(date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
})); // "2023年10月25日"

toLocaleTimeString 方法 ​

javascript
let date = new Date("2023-10-25T14:30:45");

console.log(date.toLocaleTimeString()); // "14:30:45"

console.log(date.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
})); // "14:30:45"

日期计算 ​

时间差计算 ​

javascript
let startDate = new Date("2023-01-01");
let endDate = new Date("2023-12-31");

// 计算时间差（毫秒）
let timeDiff = endDate.getTime() - startDate.getTime();

// 转换为天数
let daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
console.log(daysDiff); // 364

日期加减 ​

javascript
let date = new Date("2023-10-25");

// 增加天数
date.setDate(date.getDate() + 7);
console.log(date); // 2023-11-01

// 减少月份
date.setMonth(date.getMonth() - 2);
console.log(date); // 2023-09-01

// 增加小时
date.setHours(date.getHours() + 5);
console.log(date); // 2023-09-01 05:00:00

静态方法 ​

Date.now() ​

javascript
// 获取当前时间戳（毫秒）
let timestamp = Date.now();
console.log(timestamp); // 例如：1698225045000

Date.parse() ​

javascript
// 解析日期字符串并返回时间戳
let timestamp = Date.parse("2023-10-25");
console.log(timestamp); // 1698192000000

实际应用示例 ​

倒计时器 ​

javascript
function createCountdown(targetDate) {
    let target = new Date(targetDate);
    
    function updateCountdown() {
        let now = new Date();
        let diff = target.getTime() - now.getTime();
        
        if (diff <= 0) {
            console.log("倒计时结束！");
            return;
        }
        
        let days = Math.floor(diff / (1000 * 60 * 60 * 24));
        let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        let seconds = Math.floor((diff % (1000 * 60)) / 1000);
        
        console.log(`${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`);
    }
    
    // 每秒更新一次
    let timer = setInterval(updateCountdown, 1000);
    return timer;
}

// 使用示例
let countdownTimer = createCountdown("2024-01-01");

格式化时间显示 ​

javascript
function formatTime(date) {
    let hours = date.getHours().toString().padStart(2, '0');
    let minutes = date.getMinutes().toString().padStart(2, '0');
    let seconds = date.getSeconds().toString().padStart(2, '0');
    return `${hours}:${minutes}:${seconds}`;
}

function formatDate(date) {
    let year = date.getFullYear();
    let month = (date.getMonth() + 1).toString().padStart(2, '0');
    let day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
}

let now = new Date();
console.log(formatDate(now)); // "2023-10-25"
console.log(formatTime(now)); // "14:30:45"

计算年龄 ​

javascript
function calculateAge(birthDate) {
    let birth = new Date(birthDate);
    let now = new Date();
    
    let age = now.getFullYear() - birth.getFullYear();
    let monthDiff = now.getMonth() - birth.getMonth();
    
    // 如果还没过生日，年龄减一
    if (monthDiff < 0 || (monthDiff === 0 && now.getDate() < birth.getDate())) {
        age--;
    }
    
    return age;
}

console.log(calculateAge("1990-05-15")); // 例如：33

工作日计算 ​

javascript
function addWorkdays(startDate, days) {
    let result = new Date(startDate);
    
    while (days > 0) {
        result.setDate(result.getDate() + 1);
        // 检查是否为工作日（周一到周五）
        if (result.getDay() !== 0 && result.getDay() !== 6) {
            days--;
        }
    }
    
    return result;
}

let startDate = new Date("2023-10-25"); // 周三
let endDate = addWorkdays(startDate, 5); // 5个工作日后
console.log(endDate); // 2023-11-01（周三）

注意事项和最佳实践 ​

  1. 月份从 0 开始：在使用 Date 构造函数和 setMonth/getMonth 方法时，要注意月份是从 0 开始的（0 表示一月）。

  2. 时区问题：Date 对象会根据本地时区进行显示，如需处理特定时区，建议使用 toLocaleString 方法或第三方库如 moment.js。

  3. 日期字符串解析：不同浏览器对日期字符串的解析可能不一致，建议使用明确的格式。

  4. 性能考虑：在循环中创建大量 Date 对象时，考虑重用对象或使用时间戳进行计算。

  5. 使用现代 API：对于复杂的日期处理，考虑使用 Intl API 或第三方库。

Date 对象是处理日期和时间的核心工具，掌握其各种方法对于开发涉及时间处理的应用至关重要。