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]是否匹 ...
python每日练习--基础题
""" 1. 现有面包.热狗.番茄酱.芥末酱以及洋葱,数字显示有多少种订购组合, 其中面包必订,0 不订,1 订,比如 10000,表示只订购面包 "&quo ...
媲美5G的Wifi网速、“备战”资产一键领……揭秘双11小二背后的保障力量
如今,双11不光是购物狂欢节,更是对技术的一次“大考”,对于阿里巴巴企业内部运营的基础保障技术而言,亦是如此. 回溯双11历史,这背后也经历过“小米加步枪”的阶段:作战室从随处是网线,交换机放地上的“ ...
在Developerkit开发板上运行blink例程
本文将介绍怎么样在VScode环境下,将AliOS Tings提供的blink例程在Developerkit开发板上运行起来. DeveloperKit开发板在例程中分别用到两个led和一个按钮 ...
gitHub那些优秀的库和想要实现的效果
1. 轮播库SDCycleScrollView 2. 自动布局库SDAutoLayout 3. 类似支付宝福卡滑动切换的效果 https://github.com/huangxuan518/HXCar ...
spring-cloud:利用eureka实现服务提供与调用示例
1.运行环境开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 4.0.0 2.GITHUB地址 https://github.com/nbfujx/springCl ...
PHP curl_multi_close函数
curl_multi_close — 关闭一组cURL句柄说明 void curl_multi_close ( resource $mh ) 关闭一组cURL句柄. 参数 mh 由 curl_mul ...
Sticks
题目链接题意:给你一组等长木棒,然后他随意砍断成n个木棒,木棒长度不一,但你知道分别是多少,要你求出原始木棒可能的最小长度. 思路:首先那个原始木棒的长度肯定是其总长度的约数,然后也肯定大于等于所有 ...
sqlserver数据库里怎样设置datetime类型的小数位数为3位
要用datetime2(7)这种类型!将7改为3就行了
Redis详细用法
Redis详细用法 1.redis启动命令本机Redis 安装路径是在usr/local/redis 目录下启动命令: ./redis-server redis.conf(启动时指定配置文件) 测 ...

css3-手把手 transform 小时钟

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

随机推荐

热门专题