效果如图所示，代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>

        .hour{height: 200px;width: 200px;position: relative;top:100px;left: 100px;border-radius: 50%;

            border: 3px solid #666666;display: inline-block}

        .minute{height: 200px;width: 200px;position: relative;top:100px;left: 100px;border-radius: 50%;

            border: 3px solid #666666;display: inline-block}

        .second{height: 200px;width: 200px;position: relative;top:100px;left: 100px;border-radius: 50%;

            border: 3px solid #666666;display: inline-block}

        .innerLeft{height: 178px;width: 89px;position: absolute;top: 1px;left: 1px;border-radius: 178px 0 0 178px

                ;border-bottom: 10px solid #009bff;border-top: 10px solid #009bff;border-left: 10px solid #009bff;background: white

                ;transform-origin: 100% 50%;}

        .innerRight{height: 178px;width: 89px;position: absolute;top: 1px;right: 1px;border-radius:0 178px  178px 0

            ;border-bottom: 10px solid #009bff;border-top: 10px solid #009bff;border-right: 10px solid #009bff;background: white;transform-origin: 0 50%;

            transform: rotate(-180deg) ;}

        .cover{position: absolute;height: 200px;width: 100px;border-radius: 198px 0 0 198px;background: white;z-index: 1}

        input{position: absolute;top: 60px;left: 120px;}

        span{height: 20px;width: 80px;line-height: 20px;display: block;position: absolute;;top: 90px;

            z-index: 2; left: 60px;font-size: 16px;font-weight: bold;text-align: center}

    </style>

</head>

<body>

    <div class="hour">

        <div class="innerLeft"></div>

        <div class="cover"></div>

        <div class="innerRight"></div>

        <span></span>

    </div>

    <div class="minute">

        <div class="innerLeft"></div>

        <div class="cover"></div>

        <div class="innerRight"></div>

        <span></span>

    </div>

    <div class="second">

        <div class="innerLeft"></div>

        <div class="cover"></div>

        <div class="innerRight"></div>

        <span></span>

    </div>

    <script>

        window.onload=function(){

            function roll(progress,n) {

                innerLeft = document.querySelector('.'+this.className + ' .innerLeft');

                innerRight = document.querySelector('.'+this.className +  ' .innerRight');

                span = document.querySelector('.'+this.className + ' span');

                cover = document.querySelector('.'+this.className + ' .cover');

                span.innerHTML = progress+''+this.className;

                if (progress*n < 180) {

                    console.log(this.className);

                    cover.style.display = 'block';

                    innerLeft.style.transform = 'rotate(' + (progress*n) + "deg)";

                    innerRight.style.transform = 'rotate(' + (progress*n - 180) + 'deg)';

                }

                else{

                    console.log(this.className);

                    cover.style.display = 'none';

                    innerLeft.style.transform = 'rotate(' + (progress*n) + "deg)";

                    innerRight.style.transform = 'rotate(0deg)';

                }

            }

            var T=setInterval(function(){

                var time=new Date();

                var hours=time.getHours();

                var minutes=time.getMinutes();

                var seconds=time.getSeconds();

                var hour=document.querySelector('.hour');

                var minute=document.querySelector('.minute');

                var second=document.querySelector('.second');

                roll.call(hour,hours,30);

                roll.call(minute,minutes,6);

                roll.call(second,seconds,6);

            },1000);

        }

    </script>

</body>

</html>

在编程过程中向使用tansform 来实现动态效果，但是会出现归零时逆向，最后就没有使用，接下来还是去探索一下吧。

javascript 通过面向对象编写圆形数字时钟的更多相关文章

  1. JavaScript 在页面上显示数字时钟

    显示一个钟表 拓展JavaScript计时:http://www.w3school.com.cn/js/js_timing.asp setTimeout() 方法会返回某个值.在下面的语句中,值被储存 ...

  2. 中国MOOC_面向对象程序设计——Java语言_第2周 对象交互_秒计时的数字时钟

    第2周编程题 查看帮助 返回   第2周编程题,在课程所给的时钟程序的基础上修改 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后由系 ...

  3. 面向对象程序设计--Java语言第二周编程题：有秒计时的数字时钟

    有秒计时的数字时钟 题目内容: 这一周的编程题是需要你在课程所给的时钟程序的基础上修改而成.但是我们并不直接给你时钟程序的代码,请根据视频自己输入时钟程序的Display和Clock类的代码,然后来做 ...

  4. 中国MOOC_面向对象程序设计——Java语言_第2周 对象交互_1有秒计时的数字时钟

    第2周编程题 查看帮助 返回   第2周编程题,在课程所给的时钟程序的基础上修改 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后由系 ...

  5. javascript进阶——面向对象特性

    面向对象的javascript是这门语言被设计出来时就考虑的问题,熟悉OOP编程的概念后,学习不同的语言都会发现不同语言的实现是不同的,javascript的面向对象特性与其他具有面向对象特性的语言的 ...

  6. js动态数字时钟

    js动态数字时钟 主要用到知识点: 主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find() 时间的处理和渲染 js用到面向对象的写法 实现的功能 ...

  7. JavaScript的面向对象原理之原型链详解

    一.引言 在16年的10月份,在校内双选会找前端实习的时候,hr问了一个问题:JavaScript的面向对象理解吗?我张口就说“JavaScript是基于原型的!”.然后就没什么好说的了,hr可能不知 ...

  8. js实现动态数字时钟

    1.效果如下 2.html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  9. html5 canvas js(数字时钟)

      <!doctype html> <html> <head> <title>canvas dClock</title> </head ...

随机推荐

  1. wireshark筛选器汇总

    抓取指定IP地址的数据流: 如果你的抓包环境下有很多主机正在通讯,可以考虑使用所观察主机的IP地址来进行过滤.以下为IP地址抓包过滤示例: host 10.3.1.1:抓取发到/来自10.3.1.1的 ...

  2. Bmob第三方登录详解

    Bmob第三方登录详解 Bmob 第三方登录 简介 本文主要介绍新浪微博,QQ,微信的登录接入以及如何配合BmobSDK中的第三方登录功能实现第三方登录. 在使用之前请先按照快速入门创建好可以调用Bm ...

  3. Java处理InterruptedException异常小结

    对于InterruptedException,一种常见的处理方式是捕捉它,然后什么也不做(或者记录下它,不过这也好不到哪去).不幸的是,这种方法忽略了这样一个事实:这期间可能发生中断,而中断可能导致应 ...

  4. 最全面的 MySQL 索引详解

    什么是索引? 1.索引 索引是表的目录,在查找内容之前可以先在目录中查找索引位置,以此快速定位查询数据.对于索引,会保存在额外的文件中. 2.索引,是数据库中专门用于帮助用户快速查询数据的一种数据结构 ...

  5. homework-06&homework-09

    homework-06 1) 把程序编译通过, 跑起来 , 把正确的 playPrev(GoMove) 的方法给实现了. public void playPrev(GoMove gm) { // ne ...

  6. jquery easyui添加图标扩展

    easyui中有很多通过iconCls="icon-reload"这样的属性引入小图标显示,当然我们也可以自己添加自己的小图标. 方式:1.我们可以在jquery easyui的文 ...

  7. 48种CIFilter

    48种CIFilter     CIAdditionCompositing     //影像合成 CIAffineTransform           //仿射变换 CICheckerboardGe ...

  8. oracle 11g 之 result cache

    oracle 11g 之 result cache 今天是2013-10-12,打算最近时间研究一下shared pool的相关原理以及awr报告分析.今天学习一下在oracle 11g shared ...

  9. Bootstrap 列偏移\列嵌套\列排序

    1.列偏移 这个其实很简单就是通过一个样式类,通过.col-md-offset-*可以将列偏移到右侧.这些class通过使用*选择器将所有列增加了列的左侧margin.例如,.col-md-offse ...

  10. nginx 的安装

    一.必要软件准备1.安装pcre 为了支持rewrite功能,我们需要安装pcre 复制代码代码如下: # yum install pcre* //如过你已经装了,请跳过这一步 2.安装openssl ...