<!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. IT自学论坛

    http://yun.baidu.com/share/home?uk=4113898546&view=share#category/type=0

  2. Android Studio插件推荐(PreIOC,GsonFormat)

    好的插件能加快项目的开发速度,尤其是一些针对重复性的代码的插件,所以在这里向大家推荐2款不错的插件,如果以后发现新的好的插件,还会继续推荐,同时欢迎大家推荐 GsonFormat GsonFormat ...

  3. windows系统服务编程代码示例分享

    #include"XXXX.h" //包含的头文件 //定义全局函数变量 void Init(); BOOL IsInstalled(); BOOL Install(); BOOL ...

  4. jquery ajax跨域请求webservice webconfig配置

    <configuration> <system.web> <compilation debug="true" targetFramework=&quo ...

  5. Android - PopupWindow

    PopupWindow就是一个可以显示在当前界面上的浮动容器,它可以用来显示任意一个View,同时还可以指定显示的位置. 下面写一个显示下拉的例子: PopupWindow mpopupWindow; ...

  6. BCG界面库下的Windows8 UI界面样式www.webui8.com

    BCG界面库下的Windows8 UI界面样式(Metro风格)控件主要有以下一些功能: 规则的大块磁贴 支持完整键盘导航 Tile组 标题(Caption) 标题按钮(Caption buttons ...

  7. IE下只读INPUT键入BACKSPACE 后退问题(readonly='true')

    在IE下,如果在readonly的input里面键入backspace键,会触发history.back(), 用以下jquery代码修正之 $("input[readOnly]" ...

  8. Python的平凡之路（6）

    一.面向对象编程介绍 1 编程范式:          编程范式(Programming Paradigm)是某种编程语言典型的编程风格或者说是编程方式.随着编程方法学和软件工程研究的深入,特别是OO ...

  9. iOS系统消息

    一.键盘1.UIKeyboardWillShowNotification-将要弹出键盘2.UIKeyboardDidShowNotification-显示键盘3.UIKeyboardWillHideN ...

  10. Unity3d_学习笔记_入门

    转自:http://blog.csdn.net/zlfxy/article/details/8722437 本文内容来自“编程教父”的视频课程. 1.Unity3d一个游戏引擎,可以用来开发很多游戏. ...