实现思路:
- 通过css实现钟表样式;
- 通过JavaScript实现时间调用以及计时器1s刷新。
具体应用到的属性介绍:
一、CSS部分:
position属性(relative/absolute):
① relative(相对定位):
相对定位是相对于自己原来的位置定位。
不会释放掉元素在原有文档流中的位置,不会影响其他文档流元素的位置;
② absolute(绝对定位):
相对于第一个非static定位的父元素进行定位。
使用absolute的元素,会从文档流中删除,原有空间会被释放。border-radius属性:
这个属性允许你为元素添加圆角边框。
每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。transform属性(-origin/-timing-function/-duration):
① transform-origin:设置旋转元素的基点位置;
② transition-timing-function:指定切换效果的速度;
③ transition-duration:规定完成过渡效果需要花费的时间。
代码部分:
Body部分(构建整体框架):
<body>
<div class="clock" id="clock">
<!-- 原点 -->
<div class="origin"></div>
<!-- 时分秒针 -->
<div class="clock-line hour-line" id="hour-line"></div>
<div class="clock-line minute-line" id="minute-line"></div>
<div class="clock-line second-line" id="second-line"></div>
<!-- 日期 -->
<div class="date-info" id="date-info"></div>
<!-- 时间 -->
<div class="time-info">
<div class="time" id="hour-time"></div>
<div class="time" id="minute-time"></div>
<div class="time" id="second-time"></div>
</div>
</div>
<br>
<h1 style="text-align: center">大家好,我是一个表。</h1>
</body>
CSS部分(样式):
<style>
* {
margin: 0;
padding: 0;
}
body {
margin-top: 150px;
}
.clock {
width: 400px;
height: 400px;
border: 10px solid #333;
box-shadow: 0px 0px 20px 3px #444 inset;
border-radius: 210px;
position: relative;
margin: 5px auto;
z-index: 10;