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

随机推荐

Docker常规操作
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11601853.html Docker 常⽤命令镜像相关 • docker pull <imag ...
求1+2+3.。。。n的和
思路: 利用递归累加,逻辑运算符的短路运算. class Solution { public: int Sum_Solution(int n) { int result=n; result & ...
appium 安装
1.npm安装: cmd——cnpm install -g appium 卸载: cmd——npm uninstall -g appium 2.下载安装包安装: Appium server: 1. A ...
LUOGU P3759 [TJOI2017]不勤劳的图书管理员(树套树)
传送门解题思路和以前做过的一道题有点像,就是区间逆序对之类的问题,用的是$BIT$套权值线段树,交换时讨论一下计算答案..跑的不如暴力快.. 代码 #include<iostream&g ...
window使用
运行命令 regedit #注册表编译器 firewall.cpl #打开防火墙配置 powershell #打开powershell control #打开控制面版 cnpa.cpl #打开网络设置 ...
Java中static修饰类的问题
Java中static修饰类的问题众所周知,Java中static关键字可以修饰方法与变量: 修饰变量的时候,这个变量属于类变量,可以直接通过类名.变量名来引用. 修饰方法的时候可以直接通过类名.方 ...
datatbales 使用笔记
实例: var datatable_obj = null; $(document).ready(function(){ datatable_obj = $('#merchant-list').Data ...
资源-DotNet-站点：DotNet 站点列表
ylbtech-资源-DotNet-站点:DotNet 站点列表 1.ASP.NET Web返回顶部 1.1.问卷星 https://www.wjx.cn/sample/service.aspx 1. ...
T1219：马走日
[题目描述] 马在中国象棋以日字形规则移动. 请编写一段程序,给定n×m大小的棋盘,以及马的初始位置(x,y),要求不能重复经过棋盘上的同一个点,计算马可以有多少途径遍历棋盘上的所有点. [输入] 第 ...
python 装饰器第三步：使用语法糖
# 第三步:使用语法糖(就是语法) # 用于扩展基本函数的函数 def kuozhan(func): # 扩展功能1 print('饭前要洗手') # 调用基本函数 func() # 扩展功能2 pr ...

css3-手把手 transform 小时钟

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

随机推荐

热门专题