js时间API的那些细枝末节

js时间API

Date类

new Date()

new Date()可以有五种传参方式

1.无参数,返回当前时间(中国时间)

2.时间戳,一个单位为毫秒的的数值

3.字符串,一个表示时间的字符串

4.依次表示年,月,日,时,分,秒,毫秒的数值

5.表示时区偏移量的字符串

1.无参数
  let currentDate = new Date();  // 表示:当前的日期和时间
  console.log(currentDate);  //Wed Aug 16 2024 11:27:34 GMT+0800 (中国标准时间)
2.时间戳
var time=1504013129001;
var date=new Date(time);
console.log(date);  //Tue Aug 29 2017 21:25:29 GMT+0800 (中国标准时间)
3.时间字符串
var date=new Date("2024-12-13");
console.log(date);  //Fri Dec 13 2024 08:00:00 GMT+0800 (中国标准时间)

注意确保提供的日期字符串格式与本地设置的格式兼容。

例如,使用ISO 8601格式(YYYY-MM-DD)

4.依次表示年、月、日、时、分、秒、毫秒的数值
var date=new Date(2024,11,23,23,11,27,564);
console.log(date);  //Mon Dec 23 2024 23:11:27 GMT+0800 (中国标准时间)

当然,也可以传递不那么精确的时间参数,如只传递年、月、日参数

var date=new Date(2024,11,23);
console.log(date);  //Mon Dec 23 2024 00:00:00 GMT+0800 (中国标准时间)

注意:

  1. 参数只能省后不省前,即只能省去后面参数不写,前面参数要写
  2. 保存各参数顺序,如年参数不能写在月参数后
  3. 省去的部分默认为0(时、分、秒、毫秒)或1(月,日)
  4. 特别注意:月份特殊,011代表月份112月
5.表示时区偏移量的字符串
let date = new Date("Tue Jun 21 2023 14:40:15 UTC+8");  // 一个表示时区偏移量的字符串,utc+8表示东八区
console.log(date); // Wed Jun 21 2023 14:40:15 GMT+0800 (中国标准时间)

Date常用方法

方法 描述
getTime() 获取时间戳(时间毫秒值)
getFullYear() 获取年份
getMonth() 获取月份(从第0月开始)
getDate() 获取日成分
getHours() 获取小时
getMinutes() 获取分钟
getSeconds() 获取秒
getMilliseconds() 获取毫秒
getDay() 获取星期

注意:

  1. getDay()返回当前日期星期几,0表示星期日,16表示星期一星期六
  2. getMonth()返回月份,从0开始

Date还有对应的set方法,就不赘述了。

案例Demo

倒计时

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box{
            height: 600px;
            width: 400px;
            margin: 80px auto;
            border: 1px solid #000;
            background: #b22222;
        }
        p{
            color: #fff;
            font-size: 35px;
            font-weight: 800;
            /* border: 1px solid #000; */
            margin: 30px auto;
            text-align: center;
        }
        .bottom{
            /* border: 1px solid #000; */
            color: #fff;
            font-size: 35px;
            font-weight: 800;
            height: 100px;
            margin-top: 80px;
            display: flex;
            justify-content: space-around;
        }
        .bottom span{
            background: #3c3c3c;
            display: block;
            width: 40px;
            height: 40px;
        }
    style>
head>
<body>
    <div class="box">
        <p>距离p>
        <p>2025年1月1日p>
        <p>倒计时p>
       <div class="bottom">
        <span name="date">span><span name="date">span><span name="date">span><span name="date">span>div>
    div>
    <script>
        var begin=new Date();
        var end=new Date("2025-01-01");
        var ans=end.getTime()-begin.getTime();
        console.log(ans)
        var date=document.getElementsByName("date");

        const DATE=[
            86400000,  //一天的毫秒值
            3600000,  //一小时的毫秒值
            60000,  //一分钟的毫秒值
            1000  //一秒的毫秒值
        ]
        
        setInterval(function(){
            let cnt=ans;
            let t=new Array(4);
            for(let i=0;i<4;i++){
                t[i]=Math.floor(cnt/DATE[i]);
                cnt%=DATE[i];
            }

            for(let i=0;i<4;i++){
                date[i].innerText=t[i];
            }
            ans-=1000;
        },1000)
    script>
body>
html>

效果:

![外链图片转js时间API的那些细枝末节_第1张图片

你可能感兴趣的:(前端入门必须掌握知识,javascript,学习,前端)