💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨
时间对象
实例化
在代码中发现了 new 关键字时,一般将这个操作称为实例化
创建一个时间对象并获取时间
获得当前时间
let date = new Date()
获得指定时间
let date = new Date('2024-7-12')
时间对象方法
方法 | 作用 | 说明 |
getFullYear() | 获得年份 | 获取四位年份 |
getMonth() | 获得月份 | 取值为 0 ~ 11 |
getDate() | 获取月份中的每一天 | 不同月份取值也不相同 |
getDay() | 获取星期 | 取值为 0 ~ 6 |
getHours() | 获取小时 | 取值为 0 ~ 23 |
getMinutes() | 获取分钟 | 取值为 0 ~ 59 |
getSeconds() | 获取秒 | 取值为 0 ~ 59 |
时间戳
什么是时间戳?
是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计量时间的方式
三种方式获取时间戳
1. 使用 getTime() 方法
//1. 实例化
let date = new Date()
//2. 获取时间戳
console.log(date.getTime())
2. 简写 +new Date()
console.log(+new Date())
3. 使用 Date().now()
console.log(Date.now())
无需实例化
但是只能得到当前的时间戳, 而前面两种可以返回指定时间的时间戳
时间戳案例
案例
分析:
①:用将来时间减去现在时间就是剩余的时间
②:核心: 使用将来的时间戳减去现在的时间戳
③:把剩余的时间转换为 天 时 分 秒
注意:
1. 通过时间戳得到是毫秒,需要转换为秒在计算
2. 转换公式:
d = parseInt(总秒数/ 60/60 /24); // 计算天数
h = parseInt(总秒数/ 60/60 %24) // 计算小时
m = parseInt(总秒数 /60 %60 ); // 计算分数
s = parseInt(总秒数%60); // 计算当前秒数
<!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>Document</title>
<style>
.countdown {
width: 240px;
height: 305px;
text-align: center;
line-height: 1;
color: #fff;
background-color: brown;
/* background-size: 240px; */
/* float: left; */
overflow: hidden;
}
.countdown .next {
font-size: 16px;
margin: 25px 0 14px;
}
.countdown .title {
font-size: 33px;
}
.countdown .tips {
margin-top: 80px;
font-size: 23px;
}
.countdown small {
font-size: 17px;
}
.countdown .clock {
width: 142px;
margin: 18px auto 0;
overflow: hidden;
}
.countdown .clock span,
.countdown .clock i {
display: block;
text-align: center;
line-height: 34px;
font-size: 23px;
float: left;
}
.countdown .clock span {
width: 34px;
height: 34px;
border-radius: 2px;
background-color: #303430;
}
.countdown .clock i {
width: 20px;
font-style: normal;
}
</style>
</head>
<body>
<div class="countdown">
<p class="next"></p>
<p class="title">下班倒计时</p>
<p class="clock">
<span id="hour">00</span>
<i>:</i>
<span id="minutes">25</span>
<i>:</i>
<span id="scond">20</span>
</p>
<p class="tips">
现在是16:30:00
</p>
</div>
<script>
//1.获取时分秒的元素
let next = document.querySelector('.next')
let tips = document.querySelector('.tips')
let hour = document.querySelector('#hour')
let minutes = document.querySelector('#minutes')
let scond = document.querySelector('#scond')
time()
setInterval(time, 1000)
function time() {
//2.获取现在的时间戳
let now = +new Date()
//3.获取指定的时间戳
let last = +new Date('2024-7-13 18:30:00')
let count = (last - now) / 1000
console.log(count)
let date = new Date()
let year = date.getFullYear()
let month = date.getMonth() + 1
let date1 = date.getDate()
let hour1 = date.getHours()
hour1 = hour1 < 10 ? '0' + hour1 : hour1
let min = date.getMinutes()
min = min < 10 ? '0' + min : min
let sec = date.getSeconds()
sec = sec < 10 ? '0' + sec : sec
//4.转换为时分秒
let h = parseInt(count / 60 / 60 % 24)
h = h < 10 ? '0' + h : h
let m = parseInt(count / 60 % 60)
m = m < 10 ? '0' + m : m
let s = parseInt(count % 60)
s = s < 10 ? '0' + s : s
hour.innerHTML = h
minutes.innerHTML = m
scond.innerHTML = s
next.innerHTML = `今天是:${year}年${month}月${date1}日`
tips.innerHTML = `现在是:${hour1}:${min}:${sec}`
}
</script>
</body>
</html>
效果图:
❤️❤️❤️小郑是普通学生水平,如有纰漏,欢迎各位大佬评论批评指正!😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话,也请给个点赞、收藏下吧,非常感谢!👍 👍 👍