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功能来实现文字或图像的旋转.缩放.倾 ...

随机推荐

Microsoft REST API指南
序言经过3个月的碎片时间的翻译和校验,由长沙.NET技术社区翻译的英文原文文档<Microsoft REST API指南>已经翻译完成,现刊载前十一章如下,欢迎大家点击"查看原 ...
新增16条设计规约！阿里巴巴Java开发手册（详尽版）开放下载！
<阿里巴巴Java开发手册>是阿里内部Java工程师所遵循的开发规范,涵盖编程规约.单元测试规约.异常日志规约.MySQL规约.工程规约.安全规约等,这是近万名阿里Java技术精英的经验总 ...
Windows Server服务器之Linux server与windows server的区别
Linux server与windows server的区别用linux做server,相对于windows server有什么优势? 首先,平均故障时间少,只要配置和使用得当,linux的平均故障( ...
Outlets
Outlets Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Sub ...
python中将'12345'转换为12345，不要使用int
#将'12345'转换为12345,不要使用int s = " #定义一个数字变量 ret = 0 for x in s : ret = ret*10 +( ord(x)-ord(" ...
使用 Gradle 快速创建 Java 项目
上一篇介绍了如何安装 Gradle,现在就可以直接通过已经安装好的 Gradle 创建一个普通 Java 项目 Gradle 默认内建了一个 init 插件,可以生成 Java 项目基础结构 $ gr ...
配送单MYSQL ,一点都不机智
这是配送单制作,后面修改了下表 . 写的太乱. 不过也不想去修改了. 放在这里了.反正还能用. 不然就坑爹了. 以后写好一点. 这都是些神马, 太难受了. /* 配送单制作,缺少商品规格,以及库存查询 ...
Linux操作系统(二)_快速入门
环境安装VM ware,输入VM key 在VM上安装CentOS 6.5 设置网络,能在本机上ping通通过终端连接工具:Xshell或SecureCRT,连接Linux服务器实操可能出现的问 ...
Linux操作系统(一)_常用命令
1.系统工作命令 date 显示/设置系统时间或日期 date:显示时间 date -s “20190319 11:35:56”:设置时间 clock 显示设置硬件时钟 clock -s:以硬件时 ...
FileInputStream_FileOutputStream
Writer的基本方法 //向输出流中写入一个字符数据,该字节数据为参数b的低16位 void write(int c) throws IOException //将一个字符类型的数组中的数据写入输出 ...

css3-手把手 transform 小时钟

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

随机推荐

热门专题