HTML：用JSDate对象做一个简易时钟

最新推荐文章于 2022-07-13 20:13:45 发布

kingboss05

最新推荐文章于 2022-07-13 20:13:45 发布

阅读量430

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/kingboss05/article/details/124783827

版权

1.Date对象简介

a.创建一个Date对象

let Date1 = new Date( );

let Date2 = new Date(Year,month,day,hour,minute,second,milisecond);  //月份是从0开始算起

b.获得Date的值

getDate( ) : 返回一个整数，表示当前日期是月份中的第几天；
getDay( ) : 返回一个整数，表示当前是星期几，0表示星期天；
getMonth( ) : 返回一个当前月份的整数，0表示1月；
getFullYear( ) : 返回一个以4位数表示的年份；
toDateString( ) : 基于当前时区，返回一个人们可以理解的日期字符串；
toTimeString( ) : 类似toDateString;
getHours( ) / getMinutes( ) / getSeconds( ) / getMilliseconds( );

c.设置Date对象的值

setDate( ) : 设置月中某一天，接受一个参数（1~31）；
setMonth( ) : 设置年中某一月，接受一个参数（0~11）；
setFullYear( ) : 以4位数设置年份；
setUTCDate( ) : 设置UTC时间；
getUTCDate( ) : 得到UTC时间；

2.效果图展示

在这里插入图片描述
注：该时钟样式来自pink老师课程，但我没找到是具体哪一节课程，代码是自己写的，比较简单。

3.HTML代码

<body>
    <div class="clock"></div>
    <div class="clock1"></div>
</body>

4.CSS代码

/* 初始化 */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html,
body {
    width: 100%;
    height: 93%;
    /* 背景颜色过渡 */
    background: -webkit-linear-gradient(top left,#fd5300,#fdc800);
}
.clock,
.clock1 {
    width: 700px;
    height: 300px;
    border-radius: 50px;
    background: -webkit-linear-gradient(top,#ffb699,#ffc897);
    line-height: 300px;
    text-align: center;
    font-size: 150px;
}
.clock {
    margin: 100px auto;
    margin-bottom: 0;
}
.clock1 {
   margin: auto;
   transform: rotateX(180deg);
   background: -webkit-linear-gradient(top,#fd8b18,#fb9b0c);
   color: rgba(0,0,0,.3);
}

5.JS代码

let clock = document.querySelector('.clock');
let clock1 = document.querySelector('.clock1');
function getDate() {
    let data = new Date();
    let h = data.getHours();
    let min = data.getMinutes();
    let ss = data.getSeconds();
    // 补零
    if (h < 10) h = '0' + h;
    if (min < 10) min = '0' + min;
    if (ss < 10) ss = '0' + ss;
    return h + ':' + min + ':' + ss;
}
setInterval(function () {
    clock.innerText = getDate();
    clock1.innerText = getDate();
}, 1000);