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】592. Fraction Addition and Subtraction
题目如下: 解题思路:本题考察的是分数的加减法.小学时候就学过,分数的加减法是先求两个分母的最小公倍数,然后分子分别乘以最小公倍数与自己分母的商,相加后约分即可.所以,本题只要按+,-两个符号分割输入 ...
Heartbeat安装及配置
1.yum源安装 yum -y install heartbeat 更新yum源 yum install epel-release -y yum源有问题,改用下载rpm包安装 2.rpm安装下载rp ...
PHP curl_multi_close函数
curl_multi_close — 关闭一组cURL句柄说明 void curl_multi_close ( resource $mh ) 关闭一组cURL句柄. 参数 mh 由 curl_mul ...
Orcad Capture元件库介绍--Cadence Allegro
绘制原理图和PCB,最好有自己的元件封装.元件库 ORCAD CAPTURE元件库介绍 AMPLIFIER.OLB amplifier 共182个零件,存放模拟放大器IC,如CA3280,TL027C ...
设置element表格透明样式
1.element table 表格修改背景为透明并去除边框 .el-table{ /* 表格字体颜色 */ color:white; /* 表格边框颜色 */ /* border: 0.5px s ...
BZOJ 2741: 【FOTILE模拟赛】L(可持久化Trie+分块)
传送门解题思路首先求出前缀异或和,那么问题就转化成了区间内选两个数使得其异或和最大.数据范围不是很大考虑分块,设$f[x][i]$表示第$x$块开头到$i$这个位置与$a[i]$异 ...
react教程 — 性能优化
参考:https://segmentfault.com/a/1190000007811296?utm_medium=referral&utm_source=tuicool 或 https: ...
xcode安装pod
参考了: https://blog.csdn.net/AugustDY/article/details/92078639 输入 ruby -v ,查看当前电脑的ruby版本,如果已经安装了ruby环境 ...
ccf 201809-3 元素选择器
一.思路: 1.将结构化文档的每一行处理成一个节点(可定义一个结构体,成员包含标签tag.属性id.层级level.祖先所在行数father). 2.然后整个结构化文档就成了一个树形结构,可从任一节点 ...
git使用记录二：给文件重命名的简单方法
git使用记录三: 给文件重命名的简单方法 git mv file_name_old file_name_new mv: 文件命名 file_name_old : 文件当前的名字 file_name_ ...

css3-手把手 transform 小时钟

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

随机推荐

热门专题