<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

     div{

         width:200px;

         height:200px;

         border-radius: %;

         border:1px solid #;

         position: relative;

         margin:5px auto;

         text-align: center;

         box-shadow: 0px 0px 20px 5px #;

     }

     div span{

         transform-origin: bottom center;

     }

     .sec{

         position: absolute;

         top:%;

         left:%;

         margin-left:-2px;

         margin-top:-80px;

         height:80px;

         width:4px;

         background: red;

         border-radius: % %  ;

     }

     .min{

         position: absolute;

         top:%;

         left:%;

         margin-left:-3px;

         margin-top:-60px;

         height:60px;

         width:6px;

         background: #;

         border-radius: % %  ;

     }

     .hou{

         position: absolute;

         top:%;

         left:%;

         margin-left:-4px;

         margin-top:-40px;

         height:40px;

         width:8px;

         background: #;

         border-radius: % %  ;

     }

     .cap{

         position: absolute;

         top:%;

         left:%;

         margin-left:-6px;

         margin-top:-6px;

         height:12px;

         width:12px;

         background: radial-gradient(#ccc,#);

         border-radius: %;

     }

     i b{

         position: absolute;

         top:12px;

         left:-4px;

     }

     </style>

     <script>

     window.onload=function(){

         var aSpan=document.querySelectorAll('span');

         var oBox=document.getElementById('box');

         clock();

         setInterval(clock,);

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

             var oI=document.createElement('i');

             oI.style.width='6px';

             if(i%){

                 oI.style.height='8px';

             }else{

                 oI.innerHTML='<b>'+i/+'</b>';

                 oI.children[].style.transform='rotate(-'+i*+'deg)';

                 oI.style.height='16px';

             }

             oI.style.position='absolute';

             oI.style.top='0px';

             oI.style.left='100px';

             oI.style.background='#000';

             oI.style.transform='rotate('+i*+'deg)';

             oI.style.transformOrigin='0px 100px';

             oBox.appendChild(oI);

         }

         function clock(){

             var oDate=new Date();

             var h=oDate.getHours();

             var m=oDate.getMinutes();

             var s=oDate.getSeconds();

             var ms=oDate.getMilliseconds();

             aSpan[].style.transform='rotate('+(*(h%)/+m*/)+'deg)';

             aSpan[].style.transform='rotate('+(*m/+s*/)+'deg)';

             aSpan[].style.transform='rotate('+(*s/+ms*/)+'deg)';

         }

     };

     </script>

 </head>

 <body>

     <div id="box">

         <span class="sec"></span>

         <span class="min"></span>

         <span class="hou"></span>

         <p class="cap"></p>

     </div>

 </body>

 </html>

css3++js钟表的更多相关文章

  1. 用css3+js写了一个钟表

    有一天看到css3旋转这个属性,突发奇想的写了一个钟表(没做浏览器兼容),来一起看看是怎么写的吧! 先给个成品图,最终结果是个样子的(动态的). 首先,思考了一下页面的布局,大致需要4层div,最底层 ...

  2. js css3实现钟表效果

    原理: 利用transform-origin改变旋转的圆心,实现秒数和分钟数的刻度线,利用transfrom translate实现钟表小时刻度的显示 html: <div class=&quo ...

  3. 用CSS3实现钟表效果

    背景:最近在学习CSS3,看到了一个小案例,通过自己的学习,动手实现了它,现在把它分享出来. 效果图 实现过程 1.首先我们需要在页面中写出一个静态的钟表效果.首先我们需要一个表盘div wrap 对 ...

  4. css3+js打造炫酷图片展示

    <!DOCTYPE html> <html onselectstart="return false"> <!-- onselectstart=&quo ...

  5. CSS3+Js制作的一款响应式导航条

    今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大 ...

  6. css3+js 实现砸金蛋效果

    最近闲来无事,在网上看到有人写了个砸金蛋的效果,他是没有用到css3的,当时我就感觉没什么动态效果 感觉体验不是很好,所有我就想用css3来改下,于是也来试着写写. 本来想弄个视频给你们看看效果的,但 ...

  7. CSS3+JS 实现的便签应用

    概述 利用HTML5新增的 locationStorage 实现的便签应用,没有使用 JQuery,主要是为了练习原生JS的使用,采用响应式开发,在手机端和桌面端都有良好的体验,而且使用CSS3添加了 ...

  8. 用CSS3/JS绘制自己想要的按钮

    我认为按钮的绘制分以下三个步骤 第一步,绘制按钮的轮廓 选择合适的html标签,设置轮廓的CSS /* html代码 */ <a href="#" class="b ...

  9. 简单的JS钟表计时

    思路:先写出简单的数字计时,根据时分秒的数值转换成度数,使用CSS3的transform进行div倾斜. 知识点:transform可以对div进行倾斜或旋转等效果.但是根据浏览器不同代码也不同,本代 ...

随机推荐

  1. Recover Binary Search Tree [LeetCode]

    Two elements of a binary search tree (BST) are swapped by mistake. Recover the tree without changing ...

  2. vuex是啥

    vuex是一个状态管理工具. vuex store与一个简单的全局变量的区别是: 1.vuex stores 是响应式的,当组件改变state时,它能响应并高效地更新state. 2.state不能被 ...

  3. 并发编程 17—— Lock

    Java并发编程实践 目录 并发编程 01—— ThreadLocal 并发编程 02—— ConcurrentHashMap 并发编程 03—— 阻塞队列和生产者-消费者模式 并发编程 04—— 闭 ...

  4. yii2.0高级框架配置时打开init.bat秒退的解决方法 (两种方法)

    第一种: 这几天刚接触到yii2.0框架,在配置advanced版本时运行init.bat初始化文件时老是闪退: 用cmd运行该文件时显示:The OpenSSL PHP extension is r ...

  5. Rhel6-puppet集中配置管理系统配置文档

    puppet 是一个配置管理工具, 典型的, puppet 是一个 C/S 结构, 当然,这里的 C 可以有很多,因 此,也可以说是一个星型结构. 所有的 puppet 客户端同一个服务器端的 pup ...

  6. Linux驱动之内存映射

    本文参考了http://www.cnblogs.com/geneil/archive/2011/12/08/2281222.html.本文作为学习总结,将主要过程简要描述. 很多驱动实现某些功能都要通 ...

  7. No mapping found for HTTP request with URI

    原因:spring-mvc 的xml配置文件的包名配置错误 <mvc:annotation-driven /> <context:component-scan base-packag ...

  8. Jmeter—6 CSV Data Set Config 通过文件导入数据

    线程组循环次数大于1的时候,请求里每次提交的数据都相同.有的系统限制了不能提交相同数据,我们通过 CSV Data Set Config 加载csv文件数据. 1 创建一个文本文件,输入参数值保存为. ...

  9. Qt开发环境中使用报表控件FastReport遇到的一些问题（一）

    FastReport是一款优秀的报表控件,由俄罗斯开发,国内有代理商.Qt环境下可实现报表功能的还有一款叫NCReport,也是收费控件,比较来比较去还是觉得前者功能强点.网上讲解此控件在Qt中使用的 ...

  10. python数据结构与算法——快速排序

    快速排序通过不断将数列分段,使得较小的数在左边的序列,较大的数在右边的序列,不断重复此过程实现排序效果.通过设置两个哨兵不断的找两个序列的较小数,较大数,并把左右的数据互换,实现对数据从粗到细的排序. ...