<!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. junit基础篇、中级篇-实例代码

    学习文章: http://blog.csdn.net/andycpp/article/details/1327147 http://wenku.baidu.com/link?url=C27gDEj0l ...

  2. jQuery实现加入购物车飞入动画效果

    <script src="jquery.js"></script> <script src="jquery.fly.min.js" ...

  3. iOS 视频直播

    ijkplayer 是一款做视频直播的框架, 基于ffmpeg, 支持 Android 和 iOS, 网上也有很多集成说明, 但是个人觉得还是不够详细, 在这里详细的讲一下在 iOS 中如何集成ijk ...

  4. 黑马程序员——OC语言Foundation框架 NSArray NSSet NSDictionary\NSMutableDictionary

    Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结) (一) NSNumber 将各种基本数据类型包装成NSNumber对象 @ ...

  5. 例子：Alarm Clock with voice Commands Sample

    通过本例子学习: 如何使用自定义字体文件(.TTF) 如何播放声音 动画的使用 Speech 设置闹铃 应用 设置 数据存储到IsolatedStorage 如何使用自定义字体文件(.TTF) < ...

  6. surface实例-小球弹起事例

    ball.java package com.example.sufacedemo; import android.graphics.Bitmap; import android.graphics.Bi ...

  7. 应用容器Application container

    应用容器是最基本的组件,用于布局的容器. 属性 样式 事件 默认白边各24像素,默认为浏览器大小可以设置整体背景 边距等. 根应用文件就是第一个加载的文件.

  8. android技巧（四）数据库跨版本升级写法

    当项目中接手的需求需要在就前数据库数据表做出修改时,不得不面对数据库表结构的更新问题.一般的sqlite数据库更新修改数据库版本号时都会自动调用SqliteOptenHelper及其子类中的onUpg ...

  9. 黑马程序员——【Java基础】——泛型、Utilities工具类、其他对象API

    ---------- android培训.java培训.期待与您交流! ---------- 一.泛型 (一)泛型概述 1.泛型:JDK1.5版本以后出现的新特性,用于解决安全问题,是一个类型安全机制 ...

  10. React Native组件之ScrollView 和 StatusBar和TabBarIos

    React Native中的组件ScrollView类似于iOS中的UIScrollView,其基本的使用方法和熟悉如下: /** * Sample React Native App * https: ...