前言
学了一段时间的前端,三大核心知识总算是磕磕绊绊的学完了,于是花了一个多小时做出来了这么一个相当于总结复习一样的动画时钟。
这个动画时钟实现的功能:
- 固定在页面中央显示。
- 可以在普通时钟模式和计时模式中往返切换。
- 计时模式可以设定目标时间,显示距离目标的剩余时间或在目标之后已经经过的时间。
- 精度以秒为单位。
- 范围为公元1年1月1日开始到公元99999年12月31日。
是真的我试过了有图为证
实际的动画效果如视频所示。
前端开发练习——动画时钟
因为录频软件没法录到日期时间选择框,把下面的代码复制进去即可试用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时钟</title>
<style>
* {
padding: 0;
margin: 0;
}
/* 给时钟加点样式 */
.clock {
width: 240px;
height: 240px;
background-color: rgba(0, 0, 0, 0);
color: rgba(0, 0, 0, 0);
position: absolute;
left: 50%;
top: 50%;
margin-left: -120px;
margin-top: -120px;
border-radius: 120px;
}
.clock h1 {
text-align: center;
line-height: 80px;
}
.clock h2 {
text-align: center;
line-height: 50px;
}
#easy {
width: 240px;
height: 240px;
background-color: grey;
position: absolute;
left: 50%;
top: 50%;
margin-left: -120px;
margin-top: -120px;
border-radius: 120px;
}
#date {
display: