css3-手把手 transform 小时钟

学习css3ing，正在学习transfomr，突发奇想用此做个小时钟，开始吧：

准备前期工作，把时钟的表盘，时分秒针，实时时间标签的大概样子做好，效果如图：

html代码如下：

<div class="main">

        <div id="timeLabel"></div>

        <div id="hour"></div>

        <div id="minute"></div>

        <div id="second"></div>

    </div>

css 代码如下：

 1  <style>

 2         * {

 3             margin: 0;

 4             padding: 0;

 5         }

 6         .main {

 7             position: relative;

 8             margin: 100px auto;

 9             width: 300px;

10             height: 300px;

11             border-radius: 300px;

12             border: 1px solid #000;

13            box-shadow:2px 5px;

14         }

15         #timeLabel {

16             position: absolute;

17             background-color:pink;

18             width:100px;

19             height:30px;

20             left:100px;

21             top:180px;

22         }

23

24         #hour {

25             width: 100px;

26             height: 10px;

27             background-color: red;

28             position:absolute;

29             left:150px;

30             top:145px;

31         }

32         #minute {

33             width:120px;

34             height:8px;

35             background-color:blue;

36             position:absolute;

37             left:150px;

38             top:146px;

39         }

40         #second {

41             width: 140px;

42             height: 4px;

43             background-color: green;

44             position: absolute;

45             left: 150px;

46             top: 148px;

47         }

48     </style>

　　2. 初始化默认时间，和表盘刻度，效果如下：

更改后的css代码：

 <style>

        * {

            margin:;

            padding:;

        }

        .main {

            position: relative;

            margin: 100px auto;

            width: 300px;

            height: 300px;

            border-radius: 300px;

            border: 1px solid #000;

            box-shadow: 2px 5px #808080;

        }

        #timeLabel {

            position: absolute;

            background-color: pink;

            width: 80px;

            height: 25px;

            left: 110px;

            top: 180px;

            color: #fff;

            line-height: 25px;

            text-align: center;

        }

        #hour {

            width: 100px;

            height: 10px;

            background-color: red;

            position: absolute;

            left: 150px;

            top: 145px;

            transform-origin: 0 50%;

        }

        #minute {

            width: 120px;

            height: 8px;

            background-color: blue;

            position: absolute;

            left: 150px;

            top: 146px;

            transform-origin: 0 50%;

        }

        #second {

            width: 140px;

            height: 4px;

            background-color: green;

            position: absolute;

            left: 150px;

            top: 148px;

            transform-origin: 0 50%;

        }

        .hourPointer, .minuterPointer, .secondPointer {

            position: absolute;

            transform-origin: 0 50%;

        }

        .hourPointer {

            height: 10px;

            width: 12px;

            left: 150px;

            top: 145px;

            background-color: #f00;

            z-index:;

        }

        .minuterPointer {

            height: 8px;

            width: 10px;

            left: 150px;

            top: 146px;

            background-color: #b6ff00;

            z-index:;

        }

        .secondPointer {

            height: 6px;

            width: 8px;

            left: 150px;

            top: 147px;

            background-color: #fa8;

            z-index:;

        }

    </style>

初始化 js代码：

window.onload = function () {

            initClock();

        }

        var timer = null;

        function $(id) {

            return document.getElementById(id)

        }

        function CreateKeDu(pElement, className, deg, translateWidth) {

            var Pointer = document.createElement("div");

            Pointer.className = className

            Pointer.style.transform = "rotate(" + deg + "deg)   translate(" + translateWidth + "px)";

            pElement.appendChild(Pointer);

        }

        function initClock() {

            var main = $("biaopan");

            var timeLabel = $("timeLabel");

            var hour = $("hour");

            var minute = $("minute");

            var second = $("second");

            var now = new Date();

            var nowHour = now.getHours();

            var nowMinute = now.getMinutes();

            var nowSecond = now.getSeconds();

            //初始化timeLabel

            timeLabel.innerHTML = nowHour + ":" + nowMinute + ":" + nowSecond;

            //初始化表盘

            for (var index = 0; index < 4; index++) {

                CreateKeDu(main, "hourPointer", index * 90, 138);

            }

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

                CreateKeDu(main, "minuterPointer",index*30, 140);

            }

            for (var index = 0; index < 60; index++) {

                CreateKeDu(main, "secondPointer", index * 6, 142);

            }

            //初始化时分秒针

            second.style.transform = "rotate(" + (nowSecond * 6 - 90) + "deg)";

            minute.style.transform = "rotate(" + (nowMinute * 6 + 1 / 10 * nowSecond - 90) + "deg)";

            hour.style.transform = "rotate(" + (nowHour * 30 + 1 / 2 * nowMinute + 1 / 120 * nowSecond - 90) + "deg)";

        }

3.添加定时器：

js代码如下：

 //定时器

        function startMove() {

            clearInterval(timer);

            timer = setInterval(function () {

                var now = new Date();

                var nowSecond = now.getSeconds();

                var nowMinute = now.getMinutes();

                var nowHour = now.getHours();

                second.style.transform = "rotate(" + (nowSecond * 6 - 90) + "deg)";

                minute.style.transform = "rotate(" + (nowMinute * 6 + 1 / 10 * nowSecond - 90) + "deg)";

                hour.style.transform = "rotate(" + (nowHour * 30 + 1 / 2 * nowMinute + 1 / 120 * nowSecond - 90) + "deg)";

                timeLabel.innerHTML = nowHour + ":" + nowMinute + ":" + nowSecond;

            }, 1000);

        }

　　4.使用OOP方式更改：

修改后的js代码如下：

function Clock() {

            //定义属性

            this.main = this.$("biaopan");

            this.timeLabel = this.$("timeLabel");

            this.hour = this.$("hour");

            this.minute = this.$("minute");

            this.second = this.$("second");

            this.nowHour = null;

            this.nowMinute = null;

            this.nowSecond = null;

            this.timer = null;

            var _this = this;

            //初始化函数

            var init = function () {

                _this.getNowTime();

                _this.initClock();

                _this.InterVal();

            }

            init();

        }

        Clock.prototype.$ = function (id) {

            return document.getElementById(id)

        }

        Clock.prototype.CreateKeDu = function (className, deg, translateWidth) {

            var Pointer = document.createElement("div");

            Pointer.className = className

            Pointer.style.transform = "rotate(" + deg + "deg)   translate(" + translateWidth + "px)";

            this.main.appendChild(Pointer);

        }

        Clock.prototype.getNowTime = function () {

            var now = new Date();

            this.nowHour = now.getHours();

            this.nowMinute = now.getMinutes();

            this.nowSecond = now.getSeconds();

        }

        Clock.prototype.setPosition = function () {

            this.second.style.transform = "rotate(" + (this.nowSecond * 6 - 90) + "deg)";

            this.minute.style.transform = "rotate(" + (this.nowMinute * 6 + 1 / 10 * this.nowSecond - 90) + "deg)";

            this.hour.style.transform = "rotate(" + (this.nowHour * 30 + 1 / 2 * this.nowMinute + 1 / 120 * this.nowSecond - 90) + "deg)";

        }

        Clock.prototype.initClock = function () {

            //初始化timeLabel

            this.timeLabel.innerHTML = this.nowHour + ":" + this.nowMinute + ":" + this.nowSecond;

            //初始化表盘

            for (var index = 0; index < 4; index++) {

                this.CreateKeDu("hourPointer", index * 90, 138);

            }

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

                this.CreateKeDu("minuterPointer", index * 30, 140);

            }

            for (var index = 0; index < 60; index++) {

                this.CreateKeDu("secondPointer", index * 6, 142);

            }

            this.setPosition();

        }

        Clock.prototype.InterVal = function () {

            clearInterval(this.timer);

            var _this = this;

            this.timer = setInterval(function () {

                _this.getNowTime();

                _this.second.style.transform = "rotate(" + (_this.nowSecond * 6 - 90) + "deg)";

                _this.minute.style.transform = "rotate(" + (_this.nowMinute * 6 + 1 / 10 * _this.nowSecond - 90) + "deg)";

                _this.hour.style.transform = "rotate(" + (_this.nowHour * 30 + 1 / 2 * _this.nowMinute + 1 / 120 * _this.nowSecond - 90) + "deg)";

                _this.timeLabel.innerHTML = _this.nowHour + ":" + _this.nowMinute + ":" + _this.nowSecond;

            }, 1000);

        }

最后调用如下：

window.onload = function () {

            new Clock();

        }

最终页面代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .main {

            position: relative;

            margin: 100px auto;

            width: 300px;

            height: 300px;

            border-radius: 300px;

            border: 1px solid #000;

            box-shadow: 2px 5px #808080;

        }

        #timeLabel {

            position: absolute;

            background-color: pink;

            width: 80px;

            height: 25px;

            left: 110px;

            top: 180px;

            color: #fff;

            line-height: 25px;

            text-align: center;

        }

        #hour {

            width: 100px;

            height: 10px;

            background-color: red;

            position: absolute;

            left: 150px;

            top: 145px;

            transform-origin: 0 50%;

        }

        #minute {

            width: 120px;

            height: 8px;

            background-color: blue;

            position: absolute;

            left: 150px;

            top: 146px;

            transform-origin: 0 50%;

        }

        #second {

            width: 140px;

            height: 4px;

            background-color: green;

            position: absolute;

            left: 150px;

            top: 148px;

            transform-origin: 0 50%;

        }

        .hourPointer, .minuterPointer, .secondPointer {

            position: absolute;

            transform-origin: 0 50%;

        }

        .hourPointer {

            height: 10px;

            width: 12px;

            left: 150px;

            top: 145px;

            background-color: #f00;

            z-index: 3;

        }

        .minuterPointer {

            height: 8px;

            width: 10px;

            left: 150px;

            top: 146px;

            background-color: #b6ff00;

            z-index: 2;

        }

        .secondPointer {

            height: 6px;

            width: 8px;

            left: 150px;

            top: 147px;

            background-color: #fa8;

            z-index: 1;

        }

    </style>

    <script>

        function Clock() {

            //定义属性

            this.main = this.$("biaopan");

            this.timeLabel = this.$("timeLabel");

            this.hour = this.$("hour");

            this.minute = this.$("minute");

            this.second = this.$("second");

            this.nowHour = null;

            this.nowMinute = null;

            this.nowSecond = null;

            this.timer = null;

            var _this = this;

            //初始化函数

            var init = function () {

                _this.getNowTime();

                _this.initClock();

                _this.InterVal();

            }

            init();

        }

        Clock.prototype.$ = function (id) {

            return document.getElementById(id)

        }

        Clock.prototype.CreateKeDu = function (className, deg, translateWidth) {

            var Pointer = document.createElement("div");

            Pointer.className = className

            Pointer.style.transform = "rotate(" + deg + "deg)   translate(" + translateWidth + "px)";

            this.main.appendChild(Pointer);

        }

        Clock.prototype.getNowTime = function () {

            var now = new Date();

            this.nowHour = now.getHours();

            this.nowMinute = now.getMinutes();

            this.nowSecond = now.getSeconds();

        }

        Clock.prototype.setPosition = function () {

            this.second.style.transform = "rotate(" + (this.nowSecond * 6 - 90) + "deg)";

            this.minute.style.transform = "rotate(" + (this.nowMinute * 6 + 1 / 10 * this.nowSecond - 90) + "deg)";

            this.hour.style.transform = "rotate(" + (this.nowHour * 30 + 1 / 2 * this.nowMinute + 1 / 120 * this.nowSecond - 90) + "deg)";

        }

        Clock.prototype.initClock = function () {

            //初始化timeLabel

            this.timeLabel.innerHTML = this.nowHour + ":" + this.nowMinute + ":" + this.nowSecond;

            //初始化表盘

            for (var index = 0; index < 4; index++) {

                this.CreateKeDu("hourPointer", index * 90, 138);

            }

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

                this.CreateKeDu("minuterPointer", index * 30, 140);

            }

            for (var index = 0; index < 60; index++) {

                this.CreateKeDu("secondPointer", index * 6, 142);

            }

            this.setPosition();

        }

        Clock.prototype.InterVal = function () {

            clearInterval(this.timer);

            var _this = this;

            this.timer = setInterval(function () {

                _this.getNowTime();

                _this.second.style.transform = "rotate(" + (_this.nowSecond * 6 - 90) + "deg)";

                _this.minute.style.transform = "rotate(" + (_this.nowMinute * 6 + 1 / 10 * _this.nowSecond - 90) + "deg)";

                _this.hour.style.transform = "rotate(" + (_this.nowHour * 30 + 1 / 2 * _this.nowMinute + 1 / 120 * _this.nowSecond - 90) + "deg)";

                _this.timeLabel.innerHTML = _this.nowHour + ":" + _this.nowMinute + ":" + _this.nowSecond;

            }, 1000);

        }

        window.onload = function () {

            new Clock();

        }

    </script>

</head>

<body>

    <div class="main" id="biaopan">

        <div id="timeLabel"></div>

        <div id="hour"></div>

        <div id="minute"></div>

        <div id="second"></div>

    </div>

</body>

</html>

总结：本例中使用了css3 的transform属性中的 rotate的旋转效果和translate的位移效果，关于transform的使用请参考 http://www.w3school.com.cn/cssref/pr_transform.asp

css3-手把手 transform 小时钟的更多相关文章

分别用canvas和css3的transform做出钟表的效果
两种方式实际上在js上的原理都是一样的.都是获取时间对象,再获取时间对象的时分秒,时分秒乘以其旋转一刻度(一秒.一分.一小时)对应的角度.css3中要赋值于transform:rotate(角度),c ...
CSS3形变——transform与transform-origin画时钟
css3属性transform和transform-origin"画"时钟效果图前言八哥:哈喽,大家好!好攻城狮就是我就是你们的小八,欢迎收听你的月亮...哦不,是很高兴与你 ...
关于CSS3中transform变换的小坑
2017年6月30日15:05:46 今天在写一个demo的时候,发现CSS3中transform变换的一个特性. 首先,我先描述一下我发现的情况(问题再现): <div class=" ...
用CSS3的transform来做一个立方体
有一次上数据结构课老师布置了一个用队列的思想通过js和Html来做一个“跳舞配对”的网页,当时那个跳舞的部分用了css3里面transform的相关属性做了个个让图片无限翻转的效果,可能正是由于这个效 ...
好吧，CSS3 3D transform变换，不过如此！
一.写在前面的秋裤早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...
CSS3 3D Transform
CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...
好吧，CSS3 3D transform变换，不过如此！——张鑫旭
一.写在前面的秋裤早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...
一款html5和css3实现的小机器人走路动画
之前介绍了好多款html5和css3实现的动画,今天要给大家带来一款html5和css3实现的小机器人走路动画.该实例的人物用html5绘画的,动画效果是html5和css3实现的.一起看下效果图. ...
CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

随机推荐

【leetcode】44. Wildcard Matching
题目如下: 解题思路:本题和[leetcode]97. Interleaving String非常相似,同样可以采用动态规划的方法.记dp[i][j] = 1或者0 表示pattern[0:i]是否匹 ...
C++ 常用数学运算(加减乘除)代码实现 Utils.h, Utils.cpp（有疑问欢迎留言）
Utils.h #pragma once class Utils { public: static double* array_diff(double*A,double B[],int n); sta ...
【8.0.0_r4】AMS分析（十七）（ActivityManagerService.java下）
代码位于frameworks/base/services/core/java/com/android/server/am/,一共有七十个文件. Java源码位于package com.android. ...
vue项目打包之后原本好的样式变得不好了的原因分析
这个主要是打包的过程将所有的css文件进行归类压缩,导致原先其他文件里的样式对当前的产生了影响,应该有同样的类名了.怎么改?要么改类名,要么用scope,scss的写法.
获取数组NSArray元素的className
正确读取NSArray里面元素的Class类型的方法 object_getClass(columnsArray.firstObject) 错误的方法是 [columnsArray.firstObjec ...
Luogu P1478 陶陶摘苹果
Luogu P1478 陶陶摘苹果(升级版) 题目描述又是一年秋季时,陶陶家的苹果树结了n个果子.陶陶又跑去摘苹果,这次她有一个a公分的椅子.当他手够不着时,他会站到椅子上再试试. 这次与NOIp2 ...
[CSP-S模拟测试]:序列（主席树）
题目描述小$A$把自己之前得到的序列展示给了小$B$,不过这一次,他并不要求小$B$模仿他之前的行为.他给了小$B$一些询问,每个询问都是$l\ r\ x$的形式,要求小$B$数出在序列的第$l$个 ...
linux系统中查看日志及系统信息
cat tail -f 日志文件说明 /var/log/message系统启动后的信息和错误日志,是Red Hat Linux中最常用的日志之一 /var/log/secure与安全相关的日志 ...
CPU C-States Power Saving Modes
http://www.hardwaresecrets.com/article/611 Everything You Need to Know About the CPU C-States Power ...
nRF51822 蓝牙低功耗和 2.4GHz 专利 SoC
DESCRIPTION nRF51822 是功能强大.高灵活性的多协议 SoC,非常适用于 Bluetooth® 低功耗和 2.4GHz 超低功耗无线应用. nRF51822 基于配备 256kB f ...

css3-手把手 transform 小时钟

css3-手把手 transform 小时钟的更多相关文章

随机推荐

热门专题