<!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. 并发编程 13—— 线程池的使用 之 配置ThreadPoolExecutor 和 饱和策略

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

  2. D:Balanced Lineup

    总时间限制: 5000ms 内存限制: 65536kB描述For the daily milking, Farmer John's N cows (1 ≤ N ≤ 50,000) always lin ...

  3. 连接英文字符集的ORACLE和调用存储过程问题及64位服务器连接ORACLE问题

    部署在IIS上的webservice连接英文字符集的ORACLE数据库出现问题“未在本地计算机上注册"MSDAORA.1"提供程序”,解决方案如下: 原因:如错误,64位系统未注册 ...

  4. ios 打包

    /usr/bin/xcodebuild -scheme Moon -sdk iphoneos -workspace Moon.xcworkspace -configuration Release cl ...

  5. FBI是如何破获“美国少女”裸照勒索案的

     9月30日消息,据外国媒体报道,美国FBI昨日披露,“美国少女”(Miss Teen USA )卡西迪·伍尔芙(Cassidy Wolf )遭遇黑客通过电脑摄像头偷拍裸照兼敲诈勒索一案的嫌疑人已经被 ...

  6. 制造业如何基于BPM做供应链管理？

    公司介绍深圳市吉祥腾达科技有限公司是中国网络产业的开航者,是中国无线网络领域的首批开拓者之一.历经10年的开拓创新,已经形成了拥有自主研发的全面产品线. 为了使公司物流.资金流和信息流实现优化整合,腾 ...

  7. C++二进制文件中读写bitset

    这个比较简单,直接上代码: bitset< > *b = >(); bitset< > *c = >(); ofstream out("I:\\test. ...

  8. c#新手之1-如何组织类及相互调用

    不知道这个文章的名字起的对不对,姑且这么叫吧.我在这之前用c语言写程序几乎很少用函数调用来解决问题,都是用全局变量然后面向过程对数据做简单的处理,这就造成了我在学习c@之后仍有这个毛病,好点的时候有个 ...

  9. iOS去除导航栏和tabbar的横线

    导航[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetri ...

  10. SecureCRT清屏

    Ctrl + l:清屏Ctrl + c:终止命令Ctrl + z:挂起命令