<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>js时钟效果</title>

        <style>

            .clock{

                width: 600px;

                height: 600px;

                margin: 50px auto;

                background:url(images/clock.jpg) no-repeat;

                position: relative;

            }

            .clock div{

                width: 600px;

                height: 600px;

                position: absolute;

                top: 0;

                left: 0;

            }

            .h{

                background: url(images/hour.png)no-repeat center center;

            }

            .m{

                background: url(images/minute.png)no-repeat center center;

            }

            .s{

                background: url(images/second.png)no-repeat center center;

            }

        </style>

    </head>

    <body>

        <div class="clock" id="clo">

            <div class="h"></div>

            <div class="m"></div>

            <div class="s"></div>

        </div>

    </body>

</html>

<script type="text/javascript">

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

    var h = 0, m = 0 , s =0, ms = 0;

    setInterval(function() {

        var date = new Date();

        ms = date.getMilliseconds();

        s = date.getSeconds()+ms/1000;

        m = date.getMinutes()+s/60;

        h = date.getHours() % 12+m/60;

        clock.children[0].style.WebkitTransform = "rotate("+h*30+"deg)";

        clock.children[1].style.WebkitTransform = "rotate("+m*6+"deg)";

        clock.children[2].style.WebkitTransform = "rotate("+s*6+"deg)";

    },50);

</script>

这里随便附的几张图，代码中用到的也可以自行调换哦~

clock.jpg          hour.png          minute.png        second.png

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

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

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

  2. 基于canvas的原生JS时钟效果

    概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...

  3. 圆盘时钟效果 原生JS

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

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

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

  5. transform实现的时钟效果

    又来一个时钟效果了,这个的实现不需要canvas,都是div.ul.li画出的,好玩有真实. 哈哈~ 需要的js才能实现到走动这个效果,但js的内容不多,也不难. 主要是一个css里transform ...

  6. js人形时钟

    https://blog.csdn.net/rsylqc/article/details/44808063 分享自:http://chabudai.org/blog/?p=59 在这个网站看到一个很有 ...

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

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

  8. web实现时钟效果

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

  9. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

随机推荐

  1. XML解析——SAX解析以及更方便的解析工具（JDOM、DOM4J）

    XML主要用于数据交换,HTML则用于显示. 相对于DOM的树形解析,SAX采用的是顺序解析,这种解析方法可以快速地读取XML数据的方式. SAX主要事件: No. 方法 类型 描述 1 public ...

  2. flex RemoteObject 的两种使用方法

    这里使用的是django1.6 和 postgreSQL9.0  FlashBuilder4.5 django方面就不说了,根据文档来做,建好模块,配置好数据库等等 创建 gateway 和 time ...

  3. 洛谷 P2355 团体操队形

    P2355 团体操队形 题目背景 X中学要团体操比赛了哦.队形该怎样排呢? 题目描述 有n(n<=100000)个团体操队员编号分别为1~n,参加运动会开幕式的团体操表演.其基本队形(分连续队形 ...

  4. 使用Linux遇到的一些问题和解决方案

    1.如何在重装系统或换机器以后继续使用以前用过的thunderbird邮件 执行命令thunderbird -ProfileManager以后会打开一个配置用户界面. 在里面添加一个新的配置,然后选择 ...

  5. IOS基础学习日志(七)利用dispatch_once创建单例及使用

    自苹果引入了Grand Central Dispatch (GCD)(Mac OS 10.6和iOS4.0)后,创建单例又有了新的方法,那就是使用dispatch_once函数,当然,随着演进的进行. ...

  6. C++语言笔记系列之十三——派生类构造函数的调用

    1.派生类构造函数的调用 (1)一个基类的全部数据成员均被派生类继承.创建一个派生类对象时.系统在为派生类对象分配单元时一定要为其基类数据成员分配子空间. (2)一个派生类对象在创建时不仅要调用派生类 ...

  7. StdTranslator - Translate PDMS to STD for STAAD.Pro

    StdTranslator - Translate PDMS to STD for STAAD.Pro eryar@163.com STAAD.Pro是由美国世界著名的工程咨询和CAD软件开发公司—R ...

  8. 设置eclipse中的字体大小

  9. android 图片特效处理之光晕效果

    这篇将讲到图片特效处理的图片光晕效果.跟前面一样是对像素点进行处理,本篇实现的思路可参见android图像处理系列之九--图片特效处理之二-模糊效果和android图像处理系列之十三--图片特效处理之 ...

  10. Android自定义组件系列【13】——Android自定义对话框如此简单

    在我们的日常项目中很多地方会用到对话框,但是Android系统为我们提供的对话框样子和我们精心设计的界面很不协调,在这种情况下我们想很自由的定义对话框,或者有的时候我们的对话框是一个图片,没有标题和按 ...