一、机械时钟

1.最终效果

　　用 CSS 绘制的机械时钟效果如下：

　　

　　HTML 中代码结构为：

<body>
    <div class="clock">
        <ul class="min"></ul>
        <ul class="hour"></ul>
        <ul class="numbers"></ul>
        <ul class="pointer"></ul>
    </div>
</body>

　　其中 clock 类为表盘， min 类是分钟刻度，hour 类是时钟刻度，numbers 类是数字刻度，类名为 pointer 的 ul 中包含的则是时针、分针和秒针等。

2.绘制表盘

　　首先要把表盘和表盘中心给绘制出来，如下图：

　　

　　表盘中心要处在正中心，使用绝对定位进行实现，代码如下：

/* 表盘 */

.clock {

    width: 200px;

    height: 200px;

    margin: 30px auto;

    border-radius: 100px;

    background-color: #292a38;

    position: relative;

}

.circle {

    position: absolute;

    top: 50%;

    left: 50%;

    background: white;

    width: 10px;

    height: 10px;

    border-radius: 5px;

    margin-top: -5px;

    margin-left: -5px;

}

3.绘制刻度

　　钟表的刻度就是一个矩形，只不过需要根据表盘中心进行偏移，例如：

　　

　　对应的代码为：

/* 刻度 */


.line-demo {

    position: absolute;

    width: 20px;

    height: 10px;

    left: 50%;

    top: 50%;

    transform-origin: left center;

    transform: translate(85px, -5px);

}

　　但要实现一点到十二点总共十二个刻度，还需要使用 transform 中的 rotate() 进行旋转，实现的代码如下，其中 val 表示的是各个刻度线对应的旋转角度，而 key1 和 key2 分别表示 x 方向和 y 方向上的偏移量，而对 key1 和 key2 进行调整，是为了改善刻度线显示的效果。

 function CreateHourLines() {

     /* 绘制钟表的时钟刻度线 */

     var html = "";

     // key1表示x方向上的偏移量，key2表示y方向上的偏移量

     var val, key1, key2;

     for (var i = 0; i < 12; i++) {

         val = i * 30;

         key1 = 88;

         key2 = 0;

         if (val > 180 && val < 360) {

             key1 = 90;

         }

         if (val > 0 && val < 180) {

             key1 = 85

         }

         if (val > 90 && val < 270) {

             key2 = 3;

         }

         if (val < 90 || val > 270) {

             key2 = -3;

         }

         html += "<li style='transform: rotate(" + val + "deg) translate(" + key1 + "px, " + key2 + "px)'></li>";

     }

     $(".hour").html(html);

 }

　　分钟的刻度线绘制和时钟类似，除此之外，还要绘制各个小时的数字刻度，效果如下：

　　

4.绘制指针

　　指针的绘制要把时针、分针和秒针都绘制出来，需要注意的是时钟最短最粗，秒针最长最细，而且都要用绝对定位使指针处在表盘中心，实现的效果如下：

　　

　　时针、分针和秒针的 CSS 代码如下：

/* 指针 */

.p-hour {

    position: absolute;

    width: 45px;

    height: 3px;

    top: 50%;

    left: 50%;

    transform-origin: left center;

    background: #fff;

    margin-top: -2px;

}

.p-min {

    position: absolute;

    width: 60px;

    height: 2px;

    top: 50%;

    left: 50%;

    transform-origin: left center;

    background: #fff;

    margin-top: -2px;

}

.p-sec {

    position: absolute;

    width: 80px;

    height: 1px;

    top: 50%;

    left: 50%;

    transform-origin: left center;

    background: #fff;

    margin-top: -2px;

}

5.转动指针

　　指针的转动要通过使用 transform 中的 rotate 进行实现，而转动的角度则要根据此刻的时分秒进行计算得到，代码如下：

 function move() {

     setInterval(function() {

         // 获取当前时刻

         var date = new Date();

         var sec = date.getSeconds();

         var min = date.getMinutes();

         var hour = date.getHours();

         // 计算各指针对应的角度

         var secAngle = sec * 6 - 90; // s*6-90

         var minAngle = min * 6 + sec * 0.1 - 90; // m*6+s*0.1-90

         var hourAngle = hour * 30 + min * 0.5 - 90; // h*30+m*0.5 - 90

         // 转动指针

         $(".p-sec").css("transform", "rotate(" + secAngle + "deg)");

         $(".p-min").css("transform", "rotate(" + minAngle + "deg)");

         $(".p-hour").css("transform", "rotate(" + hourAngle + "deg)");

     }, 1000)

 }

二、数字时钟

1.最终效果

　　用 CSS 绘制的数字时钟效果如下：

　　

　　HTML 中代码结构为：

<body>
    <div class="back">
        <div class="content">
            <div class="one"> </div>
            <div class="two"></div>
            <div class="three"></div>
            <div class="four"></div>
            <div class="five"></div>
            <div class="six"></div>
            <div class="seven"></div>
            <div class="eight"></div>
        </div>
    </div>
</body>

　　其中 back 类是时钟的背景，content 类则是数字时钟表盘，在 content 类的 div 中包含了八个 div，分别表示六个数字和两个分隔符号。

2.绘制数字

　　每一个数字由七个部分组成，每个部分都类似下图中的样式：

　　

　　这就是一个矩形，两端分别有一个三角形，而这两个三角形都可以通过使用伪元素 before 和 after 实现，实现的代码如下：

.part-1 {

    width: 30px;

    height: 6px;

    background: white;

    position: absolute;

    left: 10px;

}

.part-1::before {

    content: "";

    position: absolute;

    left: -6px;

    width: 0;

    height: 0;

    border-top: 3px solid white;

    border-left: 3px solid;

    border-right: 3px solid white;

    border-bottom: 3px solid;

}

.part-1::after {

    content: "";

    position: absolute;

    left: 30px;

    width: 0;

    height: 0;

    border-top: 3px solid white;

    border-left: 3px solid white;

    border-right: 3px solid;

    border-bottom: 3px solid;

}

　　通过修改 CSS 样式就能将其余部分绘制出来了，除了绘制数字，还需要把每两个数字间的分隔符号给绘制出来，如下图：

　　

3.显示数字

　　要显示数字0-9，需要将七个部分中的某些部分进行改动，例如将背景色修改成黑色，就能达到显示数字的效果，如下：

　　

　　显示数字的代码如下，其中 showDigit() 需要传入两个参数，name 表示的是显示第几位数字的 CSS 类名，num 表示的是要显示的数字：

 function showDigit(name, num) {

     // show digit

     if (num === 1) {

         $(name + " .part-1").css("background", "black");

         $(name + " .part-1").addClass("change");

         $(name + " .part-2").css("background", "black");

         $(name + " .part-2").addClass("change");

         $(name + " .part-3").css("background", "black");

         $(name + " .part-3").addClass("change");

         $(name + " .part-6").css("background", "black");

         $(name + " .part-6").addClass("change");

         $(name + " .part-7").css("background", "black");

         $(name + " .part-7").addClass("change");

     }

     if (num === 2) {

         $(name + " .part-5").css("background", "black");

         $(name + " .part-5").addClass("change");

         $(name + " .part-6").css("background", "black");

         $(name + " .part-6").addClass("change");

     }

     if (num === 3) {

         $(name + " .part-6").css("background", "black");

         $(name + " .part-6").addClass("change");

         $(name + " .part-7").css("background", "black");

         $(name + " .part-7").addClass("change");

     }

     if (num === 4) {

         $(name + " .part-1").css("background", "black");

         $(name + " .part-1").addClass("change");

         $(name + " .part-3").css("background", "black");

         $(name + " .part-3").addClass("change");

         $(name + " .part-7").css("background", "black");

         $(name + " .part-7").addClass("change");

     }

     if (num === 5) {

         $(name + " .part-4").css("background", "black");

         $(name + " .part-4").addClass("change");

         $(name + " .part-7").css("background", "black");

         $(name + " .part-7").addClass("change");

     }

     if (num === 6) {

         $(name + " .part-4").css("background", "black");

         $(name + " .part-4").addClass("change");

     }

     if (num === 7) {

         $(name + " .part-2").css("background", "black");

         $(name + " .part-2").addClass("change");

         $(name + " .part-3").css("background", "black");

         $(name + " .part-3").addClass("change");

         $(name + " .part-6").css("background", "black");

         $(name + " .part-6").addClass("change");

         $(name + " .part-7").css("background", "black");

         $(name + " .part-7").addClass("change");

     }

     if (num === 9) {

         $(name + " .part-7").css("background", "black");

         $(name + " .part-7").addClass("change");

     }

     if (num === 0) {

         $(name + " .part-2").css("background", "black");

         $(name + " .part-2").addClass("change");

     }

 }

　　在上面的代码中，每次改动都要 addClass("change")，其中 change 类是一个新的 class，用于对伪元素进行覆盖，相应代码为：

.change::before {

    border: 0;

}

.change::after {

    border: 0;

}

4.显示时间

　　首先需要使用 JavaScript 获取当前时间，然后计算得到六个数字，再使用上面的 showDigit() 来显示数字，效果如下：

　　

　　显示时间的代码为：

 function getDigit() {

     // get the present time

     var date = new Date();

     var hour = date.getHours();

     var min = date.getMinutes();

     var sec = date.getSeconds();

     // six digits

     var d1, d2, d3, d4, d5, d6;

     d1 = parseInt(hour / 10);

     d2 = hour % 10;

     d3 = parseInt(min / 10);

     d4 = min % 10;

     d5 = parseInt(sec / 10);

     d6 = sec % 10;

     showDigit(".one", d1);

     showDigit(".two", d2);

     showDigit(".four", d3);

     showDigit(".five", d4);

     showDigit(".seven", d5);

     showDigit(".eight", d6);

 }

5.时间变换

　　由于我们显示数字的时候不仅修改了背景色，而且还增加了一个新的 class，所以在时间变换的时候，不仅需要修改显示的数字，还需要对相应的 CSS 进行修改，这样才能正确的变换时间。实现的具体方法为每次显示数字时，先把每个部分的 CSS 重置成最开始的样子，背景色改为白色，因而显示数字的代码改为：

 function showDigit(name, num) {

     // initial

     $(name + " .part-1").css("background", "white");

     $(name + " .part-1").removeClass("change");

     $(name + " .part-2").css("background", "white");

     $(name + " .part-2").removeClass("change");

     $(name + " .part-3").css("background", "white");

     $(name + " .part-3").removeClass("change");

     $(name + " .part-4").css("background", "white");

     $(name + " .part-4").removeClass("change");

     $(name + " .part-5").css("background", "white");

     $(name + " .part-5").removeClass("change");

     $(name + " .part-6").css("background", "white");

     $(name + " .part-6").removeClass("change");

     $(name + " .part-7").css("background", "white");

     $(name + " .part-7").removeClass("change");

     // show digit

     if (num === 1) {

         $(name + " .part-1").css("background", "black");

         $(name + " .part-1").addClass("change");

         $(name + " .part-2").css("background", "black");

         $(name + " .part-2").addClass("change");

         $(name + " .part-3").css("background", "black");

         $(name + " .part-3").addClass("change");

         $(name + " .part-6").css("background", "black");

         $(name + " .part-6").addClass("change");

         $(name + " .part-7").css("background", "black");

         $(name + " .part-7").addClass("change");

     }

     if (num === 2) {

         $(name + " .part-5").css("background", "black");

         $(name + " .part-5").addClass("change");

         $(name + " .part-6").css("background", "black");

         $(name + " .part-6").addClass("change");

     }

     if (num === 3) {

         $(name + " .part-6").css("background", "black");

         $(name + " .part-6").addClass("change");

         $(name + " .part-7").css("background", "black");

         $(name + " .part-7").addClass("change");

     }

     if (num === 4) {

         $(name + " .part-1").css("background", "black");

         $(name + " .part-1").addClass("change");

         $(name + " .part-3").css("background", "black");

         $(name + " .part-3").addClass("change");

         $(name + " .part-7").css("background", "black");

         $(name + " .part-7").addClass("change");

     }

     if (num === 5) {

         $(name + " .part-4").css("background", "black");

         $(name + " .part-4").addClass("change");

         $(name + " .part-7").css("background", "black");

         $(name + " .part-7").addClass("change");

     }

     if (num === 6) {

         $(name + " .part-4").css("background", "black");

         $(name + " .part-4").addClass("change");

     }

     if (num === 7) {

         $(name + " .part-2").css("background", "black");

         $(name + " .part-2").addClass("change");

         $(name + " .part-3").css("background", "black");

         $(name + " .part-3").addClass("change");

         $(name + " .part-6").css("background", "black");

         $(name + " .part-6").addClass("change");

         $(name + " .part-7").css("background", "black");

         $(name + " .part-7").addClass("change");

     }

     if (num === 9) {

         $(name + " .part-7").css("background", "black");

         $(name + " .part-7").addClass("change");

     }

     if (num === 0) {

         $(name + " .part-2").css("background", "black");

         $(name + " .part-2").addClass("change");

     }

 }

完整代码已上传到 GitHub！

 

学习CSS之用CSS实现时钟效果的更多相关文章

  1. [CSS3] 学习笔记-HTML与CSS简单页面效果实例

    一个简单的首页的设计: html文件: <!doctype html> <html> <head> <meta charset="UTF-8&quo ...

  2. HTML+CSS技术实现网页滑动门效果

    一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...

  3. 李洪强和你一起学习前端之(3)Css基础和选择器

    大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...

  4. 学习使用html与css，并尝试写php

    这两天看了一点php,本想着实践一下,发现自己的服务器还没弄好,php的代码只写了两三行嵌在html中,还运行不了,同时还发现自己这几天学的html和css还不够,总是频频出现问题,学习的样式和布局都 ...

  5. python 学习笔记十二 CSS基础（进阶篇）

    1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与 ...

  6. css的img移上去边框效果及CSS透明度

    css的img移上去边框效果: .v_comment img{ height:36px; height:36px; float:left; padding:1px; margin:2px; borde ...

  7. 三角形变形记之纯css实现的分布导航条效果

    三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...

  8. CSS权威指南学习笔记系列(1)CSS和文档

    题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...

  9. css浮动+应用（瀑布流效果的实现）

    首先是index.html文件: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

随机推荐

  1. 快速搭建一个自己的个人博客(Github Pages~二次元主题)

    前言 本次的一个布局技术都写的非常详细了,只要按着来就行,不过,先说明本次主题为二次元主题. 如果真的喜欢本主题的不妨可以试一试(==建议跟据目录来看==) 在很久很久以前.... 嘛,就在前不久我正 ...

  2. 公司没有 DBA，Mysql 运维自己来

    如果你的公司有 DBA,那么我恭喜你,你可以无视 Mysql 运维.如果你的公司没有 DBA,那你就好好学两手 Mysql 基本运维操作,行走江湖,防身必备. 环境:CentOS7 版本: 一.虚拟机 ...

  3. IDEA不编译空文件夹

    今天做项目的时候发现idea编译工程不会编译空文件夹,在resources下新建了个存储文件的空文件夹,编译后target里竟然没有,一直报空指针. 随便丢一个文件进去就行了,放一个demo.txt的 ...

  4. [组合数学][多项式][拉格朗日插值]count

    源自 ditoly 大爷的 FJ 省队集训课件 Statement 有 \(m\) 个正整数变量,求有多少种取值方案 使得所有变量的和不超过 \(S\) 并且前 \(n\) 个变量的值都不超过 \(t ...

  5. MySql主要性能指标说明

    在项目当中数据库一般都会成为主要的性能与负载瓶颈,那么针对数据库各项性能指标的监控与对应的优化是开发与运维人员需要面对的主要工作,而且这部分的工作会贯穿项目从开发到运行的整个周期里. 这篇文章中我们对 ...

  6. .net core 第三方工具包集合

    日志 Nlog 单点登录

  7. latex一些有用的写法

    编辑博文的时候总是忘语法,然后到网上查-- 干脆记一下! 1.编辑漂亮的函数上下标 \(\sum\limits_{i=1}^n\) 对于原有的函数:$\sum\limits_{i=1}^n$ \(\m ...

  8. [洛谷P1606] [USACO07FEB] 荷叶塘Lilypad Pond

    Description 为了让奶牛们娱乐和锻炼,农夫约翰建造了一个美丽的池塘.这个长方形的池子被分成了M行N列个方格(1≤M,N≤30).一些格子是坚固得令人惊讶的莲花,还有一些格子是岩石,其余的只是 ...

  9. 如何取消chrome的自动翻译

    设置中搜索“翻译” 然后关掉“询问是否翻译非您所用语言的网页”的选项即可 需要翻译的时候在目标网页右键“翻译成中文”即可 用github的时候烦的要死,翻译的贼不准.

  10. 机器学习笔记P1(李宏毅2019)

    该博客将介绍机器学习课程by李宏毅的前两个章节:概述和回归. 视屏链接1-Introduction 视屏链接2-Regression 该课程将要介绍的内容如下所示: 从最左上角开始看: Regress ...