<!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. Node.js 快速了解

    最近在学习目前非常火的Node.js 写了一份精简易懂的笔记用于快速了解Node.js技术.如有不对的地方还请多多指教. 注:此篇博文不断更新中. 第一部分:快速了解 1.Node.js是什么? No ...

  2. Javascript之链式运动框架1

    第一部分:HTML内容: <script src="6-1.js"></script> <script> window.onload=funct ...

  3. JS判断form内所有表单是否为空

    function checkForm(){ var input_cart=document.getElementsByTagName("INPUT"); for(var   i=0 ...

  4. gz

    不准备的话,是真的会滚粗的. leetcode  还是重新做起来叭. 那么就开始咯 8.22 leetcode 144 Binary Tree Preorder Traversal 二叉树的前序遍历 ...

  5. Objective-C的面向对象中，类有真正的私有方法和私有属性么？

    在Java/C#等面向对象语言中,方法的访问权限可以通过public/private/protected来控制其访问权限.而在OC中,方法却并没有访问修饰符.那么,我们有没有办法使其方法变为私有? 1 ...

  6. javascript思维导图

    JavaScript 数组 JavaScript 函数基础 Javascript 运算符 JavaScript 流程控制 JavaScript 正则表达式 JavaScript 字符串函数 JavaS ...

  7. JavaWeb chapter9 JSP基础

    1.  Servlet的缺陷 一个动态网页中,大部分内容都是HTML代码等固定不变的内容,编写和修改HTML非常不方便,令人厌恶: 部署Servlet是繁琐而且容易出错的任务:(Servlet3.0规 ...

  8. 练习使用XRecyclerView，可上拉下拉刷新。

    package com.lixu.testxrecyclerview; import android.support.v7.app.AppCompatActivity; import android. ...

  9. touch id 开发

    min platform : 8.0 #import <LocalAuthentication/LocalAuthentication.h> LAContext *context = [[ ...

  10. 排序小结(java版)

    一.归并排序 package org.lxh.demo08.b; class Sort { private int[] a; private int n; Sort(int n) { a=new in ...