通过原生JS和CSS制作钟表

最新推荐文章于 2024-04-22 23:25:01 发布

置顶

wyhstars

最新推荐文章于 2024-04-22 23:25:01 发布

阅读量650

点赞数

分类专栏：前端开发文章标签： css javascript 文档应用

本文链接：https://blog.csdn.net/wyhstars/article/details/78388841

版权

实现思路：

通过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;

最低0.47元/天解锁文章

wyhstars

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
通过原生JS和CSS制作钟表

实现思路：通过css实现钟表样式；通过JavaScript实现时间调用以及计时器1s刷新。具体应用到的属性介绍：一、CSS部分：position属性(relative/absolute)： ① relative(相对定位)：相对定位是相对于自己原来的位置定位。不会释放掉元素在原有文档流中的位置，不会影响其他文档流元素的位置； ② absolute(绝...
复制链接

扫一扫