JS中的Date

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

小选有在认真学前端

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

阅读量1.1k

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_52484792/article/details/124595725

版权

1.获取年月日时分秒；

2.Date的声明和初始化 var date=new Date();

3.获取指定时间对象：

（1）传入时间戳 var date = new Date(1000);

（2）传入合法的可识别的时间字符串；

（3）按年月日时分秒毫秒的顺序传参。

4.获取年月日时分秒毫秒的方法：

（1）getFullYear() 年；

（2）getMonth() 月获取的是[0,11]；

（3）getDate() 日；

（4）getHours() 时；

（5）getMinutes() 分；

（6）getSeconds() 秒；

（7）getTime() 获取1970、1、1号至今的毫秒数。

5.时钟练习：

代码如下：

<!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>
        .sz {
            position: relative;
            margin: 0 auto;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 6px solid lightgray;
            box-shadow: 5px 5px 5px lightgray;
        }
        
        .sz p {
            position: absolute;
            width: 100px;
            height: 20px;
            /* background-color: aqua; */
            top: 24px;
        }
        
        .sz p span {
            width: 20px;
            height: 20px;
            display: block;
            /* background-color: antiquewhite; */
            /* position: absolute; */
            font-size: 12px;
            line-height: 20px;
            text-align: center;
        }
        
        #hour {
            position: absolute;
            width: 4px;
            height: 20px;
            background-color: brown;
            top: 35px;
            left: 50px;
            transform-origin: center bottom;
        }
        
        #minute {
            position: absolute;
            width: 3px;
            height: 30px;
            background-color: rgb(25, 223, 28);
            top: 25px;
            left: 50.5px;
            transform-origin: center bottom;
        }
        
        #second {
            position: absolute;
            width: 2px;
            height: 40px;
            background-color: rgb(59, 20, 217);
            top: 15px;
            left: 51px;
            transform-origin: center bottom;
        }
    </style>
</head>

<body>
    <div class="sz">
        <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="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
    </div>

</body>
<script>
    //获取所有的p元素
    var ps = document.getElementsByTagName("p");
    var hour = document.getElementById("hour");
    var minute = document.getElementById("minute");
    var second = document.getElementById("second");
    var timer = null;

    function setNums() {
        for (var i = 0; i < ps.length; i++) {
            // 通过数组让所有的p标签旋转        
            ps[i].style.transform = `rotate(${120+i*30}deg)`;
            // 获取span 
            var span = ps[i].getElementsByTagName("span")[0];
            // 让其居正
            span.style.transform = 'rotate(' + ((120 + i * 30) * -1) + 'deg)';

        }
    }
    setNums();
    timer = setInterval(function() {
        szRoll();
    }, 1000);

    function szRoll() {
        var date = new Date();
        var s = date.getSeconds();
        var m = date.getMinutes() + s / 60;
        var h = date.getHours() + m / 60;

        second.style.transform = `rotate(${s * 6}deg)`;
        minute.style.transform = `rotate(${m * 6}deg)`;
        hour.style.transform = `rotate(${h * 30}deg)`;




    }
</script>

</html>

</html>

小选有在认真学前端

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS中的Date

1.获取年月日时分秒；2.Date的声明和初始化 var date=new Date();3.获取指定时间对象：（1）传入时间戳 var date = new Date(1000);（2）传入合法的可识别的时间字符串；（3）按年月日时分秒毫秒的顺序传参。4.获取年月日时分秒毫秒的方法：（1）getFullYear() 年；（2）getMonth() 月获取的是[0,11]；（3）getDate() 日；（4）getHours() 时；（5）getMinutes(
复制链接

扫一扫

JS中的Date

“相关推荐”对你有帮助么？