css3-手把手 transform 小时钟

最新推荐文章于 2023-09-14 00:14:17 发布
最新推荐文章于 2023-09-14 00:14:17 发布
阅读量129 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/CharlieLau/p/4341438.html
版权

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

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

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: 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>
View Code

初始化 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)";
        }
View Code

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);
        }
View Code

　　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);
        }
View Code

　　

最后调用如下：

window.onload = function () {
            new Clock();
        }
View Code

最终页面代码：

<!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>
View Code


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

 

 

转载于:https://www.cnblogs.com/CharlieLau/p/4341438.html

anglu2716
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3--利用transform属性制作时钟效果
Wendy
01-11 6087
首先简单总结一下transform这个属性，transform的含义是：改变，使…变形；转换。 transform的常用属性：        1）rotate()  旋转函数 取值度数              deg  度数              Transform-origin 旋转的基点        2）skew() 倾斜函数 取值度数               skew
用php做动态时钟,CSS_利用CSS3的transform做的动态时钟效果，1. transform 与 transform-origin 使用 - phpStudy...
weixin_31431507的博客
03-23 236
1. transform 与 transform-origin 使用说明目前这两个属性得到了主流浏览器IE，webkit，firefox，opera的支持，属性名分别为-ms-transform -webkit-transform，-moz-transform，-o-transform。可能有人会疑问为什么要加各浏览器的前缀(-ms-),本人认为可能在浏览器新版本发布时，此CSS属性还没有正式被W...
css:transform
最新发布
LikeABC_的博客
09-14 282
*设置时间 */
css3 过渡时长,Css3过渡（transition）
weixin_33836754的博客
08-03 697
CSS3过渡是从元素从一种样式逐渐变成另一种的效果若想实现功能 ，需要规定两项内容：效果需要添加的css属性规定效果的时长如：应用于宽度属性的过渡效果，时长为 2 秒：div{transition: width 2s;-moz-transition: width 2s; /* Firefox 4 */-webkit-transition: width 2s; /* Safari 和 Chro...
CSS transform-origin属性的理解
09-22
`transform-origin` 是CSS3中的一个变换属性，它用于指定元素在进行旋转、缩放、移动或倾斜等变换操作时的基点，即变换的原点。这个原点默认位于元素的中心，但通过设置`transform-origin`，我们可以自定义这个基点...
CSS3-CLOCK:CSS3时钟
06-11
【CSS3时钟】是一个利用CSS3技术实现的动态时钟示例，它展示了CSS3在网页设计中的强大功能和灵活性。在这个项目中，开发者通过纯CSS3代码创建了一个能够实时显示当前时间的时钟。这个时钟不仅包括时、分、秒的指针，...
css3的transform造成z-index无效解决方案
09-25
在CSS3中，`transform`属性是一个非常强大的工具，它允许我们对元素进行旋转、缩放、平移等多种视觉变换。然而，当使用`transform`时，它会产生一个新的堆叠上下文（stacking context），这可能导致`z-index`的行为...
3D-css-transform.zip
09-17
3D-css-transform.zip,css转换操场。可视化二维和三维css3转换功能的在线工具。,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个方面，用于视频游戏，3D打印和VR，以及其他应用程序。
利用CSS3的transform做的动态时钟效果
09-25
近来HTML5+CSS3，以及相关的游戏开发都很火啊，本人也得跟上时代的脚步，做了一个CSS3的小Demo供大家指点。
css画钟表_CSS3形变——transform与transform-origin画时钟
weixin_39633252的博客
12-19 173
css3属性transform和transform-origin“画”时钟效果图前言八哥：哈喽，大家好！好攻城狮就是我就是你们的小八，欢迎收听你的月亮。。。哦不，是很高兴与你们共享知识，诶呀呀，现在夜黑风髙好做事呀，嘿~嘿~嘿，你们懂的！哈哈^_^ 哎哟。哟。哟！九儿你轻点。。。小九：大晚上的不睡觉发什么骚呢！八哥捂着耳朵：你看看你看看，不单纯了吧！本着学无止境，不分时段，我这是跟学友们探讨技术...
css之变换transform
m0_69433535的博客
09-26 199
2D属性：tranform 1、translate()位移 X轴位移：tranform:translateX(100px); Y轴位移：tranform:translateY(100px)； 2、scale()变形 scale(正整数):放大 scale (负值)：倒像放大效果 支持x轴y轴单独放大 X轴方向放大scaleX(); Y轴方向放大scal
CSS3 transform探究
随风丶逆风的博客
07-18 694
今天在使用这个样式属性的时候，发现了一些小问题，值得记录一下。 一、transform属性的适用范围 这是规范文档上写的，第一条说的就是：这个布局属性只用于块级元素或原子行内元素，或者display属性值为table-row, table-row-group, table-header-group, table-footer-group, table-cell, table-caption...
每日一结笔记
xz100599的博客
09-27 243
x轴：水平，向右为正，向左为负y轴：垂直，向下为正，向上为负。
一篇文章吃透 CSS3 属性： transition过渡 与 transform动画
热门推荐
weixin_52212950的博客
09-28 1万+
transition 过渡与transform动画 这两个新属性的参数确实比较复杂，它们可以做出 CSS 的一些基础动画效果，平移，旋转，倾角......等等，这些也是我早期学习 CSS 的难记易忘之处，今天给大家详细总结出来。一：transition 过渡transition 可以做出 CSS 的过渡效果，例如要过渡的属性名称，要过渡的时间，过渡的延迟等待时间，过渡的速度变化（过渡类型）
原生js实现一个简单的时钟(transform属性)
wxt_wjc的博客
01-11 552
图片版请看我的下一篇博客 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
01.transition,transfrom和animation
weixin_43927457的博客
07-04 302
1. transition过渡动画 第一个值：需要过渡的属性 一般为all 第二个值：动画时间，一定要设置 第三个值：动画速度曲线，一般liner(匀速) 第四个值：延迟，一般不设置` transition-property: all; transition-duration: 1s; transition-timing-function: lin...
使用animation和transform快速写一个时钟，
m0_66940434的博客
04-13 361
CSS代码不多，这里没有引入CSS样式，css样式在style里写 div类名line代表表内的刻度线，center代表中间遮挡多余线的圆，second秒针，minute分针，hour时针，origin代表圆中心的点（只是装饰效果） 第一步要先让父盒子居中再把盒子变成一个圆给个边框，因为后面要把刻度线及表针定位到父盒子身上，采用子绝父相的定位方式，先给父盒子添加上相对定位position: relative; <body> <div class="box">
综合案例（窗口拖动，css3线性运动动画，轮播图，跑马灯，闪动的红点）
weixin_45256247的博客
02-27 535
案例一 盒子拖拽案例 <style> * {padding:0px;margin:0px} .login { width: 300px; height:300px; background: pink; position: absolute; } .login .header {cursor:move;width:100%;height:100px;background: black;} &lt
css -webkit-transform 基于中心缩放
09-06
CSS中的-webkit-transform属性可以用于对元素进行旋转、缩放、平移和倾斜等变换效果。其中，基于中心缩放是一种常见的变换效果。 对于基于中心缩放，我们可以使用scale函数来实现。scale函数可以指定元素在水平方向...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值