做一个时间挂钟，让我们先来回顾回顾时间对像
时间日期对象
- 创建当前日期
const d1 = new Date() - 字符串，指定日期时间
const d2 = new Date('2022-4-23 6:6:6') - 数字，指定时间日期
const d3 = new Date(2022,4,23,6,6,6) - 时间日期.toLocaleString();
console.log(d1.toLocaleString());
console.log(d2.toLocaleString());
console.log(d3.toLocaleString());
时间日期对象方法
- 获取年份
const year = date.getFullYear() - 获取月份
const month = date.getMonth() + 1 - 获取日期
const date = date.getDate() - 获取小时
const hours = date.getHours() - 获取分钟
const minutes = date.getMinutes() - 获取秒数
const seconds = date.getSeconds() - 获取毫秒数
const milliSeconds = date.getMilliseconds() - 获取星期
const week = date.getDay()tips: 因为歪果仁的月份是从0开始数的，所以咱们转换过来得+1.
时间戳
时间戳是指1970年01月01日00时00分00秒起至现在的总毫秒数或总秒数，是一种特殊的计量时间的方式。也叫做格林威治时间。获取时间戳：
const re = new Date().getTime()const re = +new Date()Date.now()
下班倒计时
先来一个下班倒计时吧，下面是完整的代码
思路：
- 结束时间-当前时间 = 差值（毫秒值）
- 把毫秒值转换为时分秒，然后放到标签里
<!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">今天是2222年4月23日</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">23:00:00下班</p>
</div>
<script>
//先获取元素标签
const hour = document.querySelector('#hour');
const minutes = document.querySelector('#minutes');
const scond = document.querySelector('#scond');
//最后创建一个定时器，
const timer = setInterval(showTime, 1000)
function showTime () {
// 创建时间
// 开始时间
const start = new Date();
// 结束时间
const end = new Date('2022-4-23 23:00:00');
// 计算差值
const val = end.getTime() - start.getTime();
// 把差值转换为时分秒放到span即可
let h = parseInt( val / 1000 / 60 / 60 );
let m = parseInt( val / 1000 / 60 % 60 );
let s = parseInt( val / 1000 % 60 );
//小于10自动补0
h = h < 10 ? '0' + h : h;
m = m < 10 ? '0' + m : m;
s = s < 10 ? '0' + s : s;
// 放到span里面
hour.innerHTML = h;
minutes.innerHTML = m;
scond.innerHTML = s;
// 判断当倒计时结束之后关闭定时器
// 并且让时分秒都归0，不然会显示负值
if ( val <= 0 ) {
clearInterval(timer);
hour.innerHTML = '00';
minutes.innerHTML = '00';
scond.innerHTML = '00';
}
}
//定时器之前先调用一次，不然一开始会有一秒钟的留白。
showTime();
</script>
</body>
</html>
效果如下
挂钟
思路：
- 创建日期对象，获取当前时间
- 多次定时器，重复获取时间，让指针转起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页时钟</title>
<style>
* {
box-sizing: border-box;
}
.clock {
width: 600px;
height: 600px;
background: url(./images/clock.jpg) no-repeat;
margin: 50px auto 0;
position: relative;
}
.hh,
.mm,
.ss {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(./images/hour.png) no-repeat center;
}
.mm {
background-image: url(./images/minute.png);
transform: rotate(270deg);
}
.ss {
background-image: url(./images/second.png);
transform: rotate(30deg);
}
</style>
</head>
<body>
<div class="clock">
<div class="hh" id="h"></div>
<div class="mm" id="m"></div>
<div class="ss" id="s"></div>
</div>
<script>
// 查找页面的元素，定时器调用的函数外面
let hour = document.getElementById('h');
let minute = document.getElementById('m');
let second = document.getElementById('s');
// 封装时钟效果，定时器定时调用的函数
function clock() {
/* 获取系统时间 */
let date = new Date();
// 获取时分秒
let hh = date.getHours();
let mm = date.getMinutes();
let ss = date.getSeconds();
/* 时钟动画效果 */
// 角度换算： 公式直接cv
// 小时角度公式：小时 * 30 + 分钟 / 60 * 30
// 分钟角度公式：分钟* 6 + 秒 / 60 * 6
// 秒角度公式： 当前秒数 * 6
hour.style.transform = `rotate(${hh * 30 + mm / 60 * 30}deg)`;
minute.style.transform = `rotate(${mm * 6 + ss / 60 * 6}deg)`;
second.style.transform = `rotate(${ss * 6}deg)`;
}
// 主动调用一次，页面加载之后就要调用一次
clock();
// 通过定时器每隔一秒钟再调用一次。
setInterval(clock, 1000);
</script>
</body>
</html>
效果如下
