又来一个时钟效果了，这个的实现不需要canvas，都是div、ul、li画出的，好玩有真实。

哈哈~

需要的js才能实现到走动这个效果，但js的内容不多，也不难。

主要是一个css里transform的使用的思路，transform里有很多变幻属性，而普通的时钟

在我心中就是个圆圆的东西，那么是不是可以旋转这个属性（rotate）实现了，它的刻度

使用旋转且把旋转点设置在圆心，那不就可以绕着圆心转了吗，而时针它们的底部不是和

圆心接触的吗，那么设置时针的底部为旋转点不就OK了，大概的说了说思路。

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>transform</title>

    <style id="css">

        #clock{

            width: 200px;

            height: 200px;

            border: 2px solid #000;

            border-radius: 50%;

            margin: 100px auto 0;

            position: relative;

        }

        #clock ul{

            width: 200px;

            height: 200px;

            position: relative;

            list-style: none;

            padding:0;

            margin: 0;

        }

        #clock ul li{

            width: 2px;

            height: 10px;

            background: #000;

            transform-origin: center 100px;

            position: absolute;

            top: 0;

            left: 50%;

        }

        #clock ul li:nth-of-type(5n+1){

            height: 20px;

        }

        #hour{

            height: 40px;

            width: 4px;

            background: #00fefe;

            position: absolute;

            top: 60px;

            left: 99px;

            transform-origin:center bottom;

        }

        #min{

            height: 60px;

            width: 3px;

            background: #001afe;

            position: absolute;

            top: 40px;

            left: 99px;

            transform-origin: center bottom;

            transform: rotate(15deg);

        }

        #sec{

            height: 70px;

            width: 2px;

            background: #000;

            position: absolute;

            top: 30px;

            left: 99px;

            transform-origin:center bottom;

        }

        #dot{

            width: 10px;

            height: 10px;

            position: absolute;

            left: 95px;

            top: 95px;

            background: #aaa;

            border-radius: 50%;

        }

    </style>

</head>

<body>

    <div id="clock">

        <ul></ul>

        <div id="hour"></div>

        <div id="min"></div>

        <div id="sec"></div>

        <div id="dot"></div>

    </div>

    <script>

        var oCss=document.getElementById("css");

        var oClock=document.getElementById("clock");

        var oUl=oClock.getElementsByTagName("ul")[0];

        var oHour=document.getElementById("hour");

        var oMin=document.getElementById("min");

        var oSec=document.getElementById("sec");

        var strLi="";

        var strCss="";

        for(var i=0;i<60;i++){

            strLi+="<li></li>";

        }

        oUl.innerHTML=strLi;

        for(var i=0;i<60;i++){

            strCss+='#clock ul li:nth-of-type('+(i+1)+'){transform:rotate('+i*6+'deg);}';

        }

        oCss.innerHTML+=strCss;

        time();

        setInterval(time,1000);

        function time(){

        var date=new Date();

        var h=date.getHours();

        var m=date.getMinutes();

        var s=date.getSeconds();

        oHour.style.transform="rotate("+(h+m/60)*30+"deg)";

        oMin.style.transform="rotate("+(m+s/60)*6+"deg)";

        oSec.style.transform="rotate("+s*6+"deg)";

        }

    </script>

</body>

</html>

使用标签画图最主要的是定位，因为这样我们就可以把弄到形状的盒子放到你所想要的位置，内部css样式表是可以使用获取元素的方式获取的，这样就可以

使用innerHTML为其添加样式，且可以循环添加，还有因为刻度太多所以使用循环添加，这样省时省力，至于剩下的就是定时器了，给定好1秒的时间，每1

秒执行一次函数，这样它就是动起来了。

transform实现的时钟效果的更多相关文章

  1. 史上最简单的js+css3实现时钟效果

    今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...

  2. 转 CSS3+js实现多彩炫酷旋转圆环时钟效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. ios开发核心动画三：隐式动画与时钟效果

    一:隐式动画 #import "ViewController.h" @interface ViewController () /** <#注释#> */ @proper ...

  4. jQuery+css3实现极具创意的罗盘旋转时钟效果源码

    效果 HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  5. 学习CSS之用CSS实现时钟效果

    一.机械时钟 1.最终效果 用 CSS 绘制的机械时钟效果如下: HTML 中代码结构为: <body>     <div class="clock">   ...

  6. 每日CSS_实时时钟效果

    每日CSS_实时时钟效果 2020_12_22 源码链接 1. 代码解析 1.1 html 代码片段 <div class="clock"> <div class ...

  7. web实现时钟效果

    纯原生开发时钟效果,话不多说直接上代码. HTML标签部分 <div class="cricles">         <div class="poin ...

  8. 圆盘时钟效果 原生JS

    圆盘时钟 旋转时钟 数字时钟 写在前面 仿荣耀手机时钟,设计的同款时钟效果 实现效果 实现原理 数字时钟 利用Date内置对象获取当下的时间,通过处理呈现在页面上 这一步获取时间是非常简单的,通过Da ...

  9. 实用CSS3的transform实现多种动画效果

    查看效果:http://keleyi.com/a/bjad/b6x9q8gs.htm 以下是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. ...

随机推荐

  1. python学习笔记-Day6(1)

    shelve模块是一个简单的k,v将内存数据通过文件持久化的模块,可以持久化任何pickle可支持的python数据格式 >>> s=shelve.open('test') > ...

  2. 使用并行的方法计算斐波那契数列 (Fibonacci)

    更新:我的同事Terry告诉我有一种矩阵运算的方式计算斐波那契数列,更适于并行.他还提供了利用TBB的parallel_reduce模板计算斐波那契数列的代码(在TBB示例代码的基础上修改得来,比原始 ...

  3. linux笔记-硬链接和符号链接

    硬链接:指多个路径名(不同目录下的不同文件名)指向同一个硬盘数据,用其中的随便哪个文件打开修改数据,都会在其他文件打开中更新, 原因就是硬链接和“原”文件inode相同,每增加或者删除一个链接,链接计 ...

  4. VS2015 建立C++ dll库文件

    最近在写一个图片处理,正好用到C++封装DLL给C#调用,一下是总结:   建立一个C++的Win32DLL,这里要注意选择"Export symbols"导出符号.点击完成. 如 ...

  5. Win7（32/64）VS2010配置编译GDAL环境（图文教程+亲测可用!）

    最近的一个VS2010的项目中用到了GDAL,关于GDAL这个库的说明与赞美,这里就不赘述了,下面是在VS2010中配置GDAL的详细过程. 系统说明 Win7(32位/64位),VS2010,GDA ...

  6. log4j2自定义输出线程环境信息

    在配置日志的输出格式的时候,我们可以按照内置的规则输出日志,但是有时候需要及时输出我们自定义的信息,这时需要借助ThreadContext类. ThreadContext类类似于MDC和NDC,它是一 ...

  7. c# 后台调前台的js

    ScriptManager.RegisterStartupScript(this.Page, typeof(Page), "", "<script type=\&q ...

  8. 【整理】--VC 编译整理

    .h用于编译阶段的审核,如在math.h中有函数声明:int abs(int);但是在使用中写为#include <math.h>...abs(3,5);编译器阶段就会检测出错误. .dl ...

  9. Oracle11G R2用exp无法导出空表解决方法

    在11G R2中有个新特性,当表无数据时,不分配segment,以节省空间Oracle当然在执行export导出时,空表则无法导出,但是还是有解决办法的: 解决方法: 一.insert一行,再roll ...

  10. 谈谈自己了解的spring.NET的依赖注入

         spring.net里实现了控制反转IOC(Inversion of control),也即依赖注入DI(Dependency Injection),以达到解耦的目的,实现模块的组件化.程序 ...