js中Date日期对象

最新推荐文章于 2024-04-11 18:34:44 发布

@剁椒鱼头

最新推荐文章于 2024-04-11 18:34:44 发布

阅读量344

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_57215961/article/details/124645769

版权

Date对象用来处理日期和时间。

与Math对象不同，Date对象需要实例化对象后才可以使用，Date（）是日期对象的构造函数。

Date对象的创建

        //没有参数 使用系统的当前时间作为对象保存时间
        var date1 = new Date();
        //传入 年 月 [ 日 时 分 秒 ]
        var date2 = new Date(2022,5,8,11,41,17);
        //用字符串表示日期和时间
        var date3 = new Date('2022-5-8 11:41:17');

Date对象的常用方法

方法	作用
getFullYear()	年
getMonth()	月[ 0 ,11]
getDate()	日
getDay()	日期 [ 0，6 ]
getHours()	时
getMinutes()	分
getSeconds()	秒
getTime()	获取1970-1-1至今的毫秒数

案例1：使用Date获取当前系统时间

<body>
    <h1></h1>
</body>
<script>
    var h1 = document.getElementsByTagName("h1")[0];
    function setH1() {
        // 获取时间戳
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var riqi = date.getDate();

        var hour = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();

        // var str = year + "/" + month + "/" + riqi + " " + hour + ":" + minutes + ":" + seconds;
        //反引号 可以引入变量，进行字符串拼接
        var str = `${year}/${month}/${riqi}  ${hour}:${minutes}:${seconds}`;
        // 通过innerHtml对标签的内容进行获取及修改
        h1.innerHTML = str;

    }
    // 函数的调用
    setH1();

    // 定时器
    //每间隔1000ms执行一次function
    var timer = setInterval(function(){
        setH1();
    },1000)
</script>

案例二：使用Date制作时钟

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <style>
        *{
            padding: 0;margin: 0;
        }
        .clock {
            width: 200px;
            height: 200px;
            /* background-color: pink; */
            border: 10px solid lightgray;
            border-radius: 50%;
            box-shadow: 5px 5px 5px lightgray;
            margin: 0 auto;
            position: relative;
        }

        .clock p {
            width: 200px;
            height: 20px;
            line-height: 20px;
            /* background-color: pink; */
            position: absolute;
            top: 90px;
        }

        .clock p span{
            display: block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
        }
        
        #shi{
            position: absolute;
            transform-origin: center bottom;
            width: 6px;
            height: 50px;
            background-color: tomato;
            left: 97px;
            top: 50px;
        }
        #fen{
            position: absolute;
            transform-origin: center bottom;
            width: 4px;
            height: 70px;
            background-color: deepskyblue;
            left: 98px;
            top: 30px;
        }
        #miao{
            position: absolute;
            transform-origin: center bottom;
            width: 2px;
            height: 90px;
            background-color: hotpink;
            left: 99px;
            top: 10px;
        }
</style>
</head>

<body>
    <div class="clock">
        <P><span>1</span></P>
        <P><span>2</span></P>
        <P><span>3</span></P>
        <P><span>4</span></P>
        <P><span>5</span></P>
        <P><span>6</span></P>
        <P><span>7</span></P>
        <P><span>8</span></P>
        <P><span>9</span></P>
        <P><span>10</span></P>
        <P><span>11</span></P>
        <P><span>12</span></P>
        <div id="shi"></div>
        <div id="fen"></div>
        <div id="miao"></div>
    </div>
</body>
<script>
    //获取数字
    var num = document.getElementsByTagName("p");
    //获取三个指针
    var dHour = document.getElementById("shi");
    var dMinute  = document.getElementById("fen");
    var dSecond = document.getElementById("miao");
    //定时器
    var timer = null;

    function setNums() {
        for (var i = 0; i<num.length;i++){
            num[i].style.transform = `rotate(${120+i*30}deg)`;
            //获取p下边的span元素
            var span = num[i].getElementsByTagName("span")[0];
            span.style.transform = `rotate(${(120+i*30)*(-1)}deg)`;
        }
    }
    setNums();

    //开启定时器
    timer = setInterval(function(){
        changeZhen();
    },1000)

    function changeZhen(){
        //获取时间戳
        var date = new Date();
        var s = date.getSeconds();
        var m = date.getMinutes()+s/60;
        var h = date.getHours()+m/60;

        dSecond.style.transform=`rotate(${s*6}deg)`;
        dMinute.style.transform=`rotate(${m*6}deg)`;
        dHour.style.transform=`rotate(${h*30}deg)`
    } 
</script>

</html>

@剁椒鱼头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中Date日期对象

Date对象用来处理日期和时间。与Math对象不同，Date对象需要实例化对象后才可以使用，Date（）是日期对象的构造函数。Date对象的创建 //没有参数使用系统的当前时间作为对象保存时间 var date1 = new Date(); //传入年月 [ 日时分秒 ] var date2 = new Date(2022,5,8,11,41,17); //用字符串表示日期和时间 var
复制链接

扫一扫