1.js时钟表盘
代码
<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <style>

            .clock{

                width: 600px;

                height: 600px;

                margin: 50px auto;

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

                position: relative;

            }

            .clock div{

                width: %;

                height: %;

                position: absolute;

                top: ;

                left: ;

            }

            .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">

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

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

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

        </div>

    </body>

    <script>

        function $(id)

        {

            return document.getElementById(id);

        }

        var hour = $('hour');

        var minute = $('minute');

        var second = $('second');

        // var date = new Date();

        // console.log(date);

        // console.log(hour);

        //开始定时

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

        setInterval(function(){

            //内容处理开始

            var date = new Date();//获取时间

            ms = date.getMilliseconds(); //现在的毫秒数

            s = date.getSeconds() + ms/;

            m = date.getMinutes() + s / ;

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

            // document.write(parseInt(h) +":"+parseInt(m ) +":"+parseInt(s) );

            //旋转角度

            //一圈 360度 一共60秒  一秒是 6度

            second.style.WebkitTransform = "rotate("+s* + "deg)";

            minute.style.WebkitTransform = "rotate(" + m* + "deg)";

            hour.style.WebkitTransform = "rotate(" + h* + "deg)";

        },);

    </script>

</html>

2.在线预览

js中时钟表盘的更多相关文章

  1. js实现小时钟,js中Date对象的使用?

    介绍一下js中Date对象的使用 dateObj = new Date() dateObj = new Date(dateValue) dateObj = new Date(year,month,da ...

  2. js 动态时钟

    js 动态时钟 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  3. js实现时钟

    <!DOCTYPE html> <html> <head> <title>Js版带表盘的时钟</title> <meta charse ...

  4. JavaScript基础（3）-JS中的面向对象、定时器、BOM、位置信息

    一.创建对象的几种常用方式. 1.使用Object或对象字面量创建对象: a.使用Object()内置的构造函数来创建对象,例如: var student = new Object(); // 创建一 ...

  5. 积累js中的一些问题及解决方案

    一.取字符串的第i位不兼容的问题 1.问题:对于字符串str来说,要获取第i位,常见的是str[i],但是在低版本的浏览器中不兼容,例如ie7. 2.解决:使用str.charAt(i); 二.使用定 ...

  6. 解读前端js中签名算法伪造H5游戏加分

    信息安全在我们日常开发中息息相关,稍有忽视则容易产生安全事故.对安全测试也提出更高要求.以下是笔者亲自实践过程: 一. 打开某个数钱游戏HTML5页面,在浏览器 F12 开发工具中,查看的js,如下, ...

  7. 5.0 JS中引用类型介绍

    其实,在前面的"js的六大数据类型"文章中稍微说了一下引用类型.前面我们说到js中有六大数据类型(五种基本数据类型 + 一种引用类型).下面的章节中,我们将详细讲解引用类型. 1. ...

  8. 【repost】JS中的异常处理方法分享

    我们在编写js过程中,难免会遇到一些代码错误问题,需要找出来,有些时候怕因为js问题导致用户体验差,这里给出一些解决方法 js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要 ...

  9. JS中给正则表达式加变量

    前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下.   一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...

随机推荐

  1. JAVA程序—HelloWorld 的编译运行

    在我们写好我们的"HelloWorld.java",并且搭建好JAVA的开发环境过后,便可以运行这个JAVA程序了. 具体如何实现,让我们来看看: 打开DOS 通过DOS命令转到& ...

  2. iOS自己定义返回button(不影响返回手势)

    此方法能够自己定义返回button,且不影响返回手势. 新方法: self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] in ...

  3. 打开与关闭Linux防火墙

    1) 重启后生效 开启: chkconfig iptables on 关闭: chkconfig iptables off 2) 即时生效,重启后失效 开启: service iptables sta ...

  4. Vijos 1451 圆环取数 【区间DP】

    背景 小K攒足了路费来到了教主所在的宫殿门前,但是当小K要进去的时候,却发现了要与教主守护者进行一个特殊的游戏,只有取到了最大值才能进去Orz教主…… 描述 守护者拿出被划分为n个格子的一个圆环,每个 ...

  5. YTU 2899: D-险恶逃生 I

    2899: D-险恶逃生 I 时间限制: 1 Sec  内存限制: 128 MB 提交: 130  解决: 55 题目描述 Koha被邪恶的巫师困在一个m*n的矩阵当中,他被放在了矩阵的最左上角坐标( ...

  6. BZOJ_1115_[POI2009]石子游戏Kam_博弈论

    BZOJ_1115_[POI2009]石子游戏Kam_博弈论 Description 有N堆石子,除了第一堆外,每堆石子个数都不少于前一堆的石子个数.两人轮流操作每次操作可以从一堆石子中移走任意多石子 ...

  7. bzoj 4596: [Shoi2016]黑暗前的幻想乡【容斥原理+矩阵树定理】

    真是简单粗暴 把矩阵树定理的运算当成黑箱好了反正我不会 这样我们就可以在O(n^3)的时间内算出一个无向图的生成树个数了 然后题目要求每个工程队选一条路,这里可以考虑容斥原理:全选的方案数-不选工程队 ...

  8. vue中sync，v-model----双向数据绑定

    需求:父子组件同步数据 实现方式:sync或者v-model 一.sync 官网:https://cn.vuejs.org/v2/guide/components-custom-events.html ...

  9. [Usaco2013 Nov]No Change

    Description Farmer John is at the market to purchase supplies for his farm. He has in his pocket K c ...

  10. BFS POJ 3414 Pots

    题目传送门 /* BFS:六种情况讨论一下,BFS轻松解决 起初我看有人用DFS,我写了一遍,TLE..还是用BFS,结果特判时出错,逗了好长时间 看别人的代码简直是受罪,还好自己终于发现自己代码的小 ...