<!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. 36Kr众筹项目比呀比biyabi，调查分析研究报告，背后资方势力的关系梳理

    36Kr众筹项目比呀比biyabi调查报告 个层次的评价.   变革家-比呀比拆解报告:http://biangejia.com/archives/12653 8.其它 没有通过微信,参加路演,有点遗 ...

  2. Springboot分布式限流实践

    高并发访问时,缓存.限流.降级往往是系统的利剑,在互联网蓬勃发展的时期,经常会面临因用户暴涨导致的请求不可用的情况,甚至引发连锁反映导致整个系统崩溃.这个时候常见的解决方案之一就是限流了,当请求达到一 ...

  3. VIjos——V 1782 借教室 | | 洛谷——P1083 借教室

    https://vijos.org/p/1782|| https://www.luogu.org/problem/show?pid=1083 描述 在大学期间,经常需要租借教室.大到院系举办活动,小到 ...

  4. CF(438D) The Child and Sequence(线段树)

    题意:对数列有三种操作: Print operation l, r. Picks should write down the value of . Modulo operation l, r, x. ...

  5. ORACLE-016：ora-01720 授权选项对于&#39;xxxx&#39;不存在

    报错的情形例如以下. A用户:视图V_A B用户:视图V_B,而且用到了V_A C用户:须要用V_B, 授权过程, A用户下: grant select on V_A to B B用户下: grant ...

  6. Android设计模式（七）－－原型模式

    1.定义: 用原型实例指定创建对象种类,并通过拷贝这些原型创建新的对象. 2.目的: 从一个对象创建另外一个可定制的对象,而不须要知道不论什么创建细节. 3.作用: 3.1.简化对象的创建. 3.2 ...

  7. Jetty 类载入问题处理

    前几日使用 Jetty (9.2)部署公司一个 web 项目,这个项目原本部署在 Tomcat server上,一切正常,可是部署到 Jetty 后,启动报错.关键错误信息为"java.la ...

  8. SQL 增删改查（具体）

    一.增:有3种方法 1.使用insert插入单行数据: insert [into] <表名> [列名] values <列值> insert into Strdents (na ...

  9. 一个Java基础练习

    今天在群里又有一个朋友问到了这样一个练习,我索性将代码贴到这里,下次须要的朋友能够来这里看. 用到知识点:数组.集合.IO流 问题描写叙述:在例如以下图所看到的的一个txt文件里读取数据到内存,然后统 ...

  10. SQL查询表中的用那些索引

    方法1. 使用系统表   -- 查询一个表中的索引及索引列 USE AdventureWorks2008 GO SELECT indexname = a.name , tablename = c. n ...