<style>
        *{
            margin: 0;
            padding: 0;
        }
        #outLine{
            width: 300px;
            height: 300px;
            border-radius: 300px;
            background-color: beige;
            position: relative;
        }
        #inLine
        {
            width: 280px;
            height: 280px;
            position: absolute;
            border-radius: 280px;
            background-color: white;
            left:10px;
            top: 10px;
        }
        #inLine div:not([id])
        {
            width: 280px;
            height: 30px;
            position: absolute;
            top:125px;
            transform-origin: 140px 15px;
        }
        .begin
        {
            width: 30px;
            float: right;
            line-height: 30px;
            text-align: center;
        }
        .end
        {
            text-align: center;
            width: 30px;
            float: left;
            line-height: 30px;
        }
        #inLine div:nth-child(1)
        {
            transform: rotate(-90deg);
        }
        #inLine div:nth-child(2)
        {
            transform: rotate(-60deg);
        }
        #inLine div:nth-child(3)
        {
            transform: rotate(-30deg);
        }
        #inLine div:nth-child(5)
        {
            transform: rotate(30deg);
        }
        #inLine div:nth-child(6)
        {
            transform: rotate(60deg);
        }
        #inLine div:first-child span
        {
            transform: rotate(90deg);
        }
        #hour{
            width: 80px;
            height: 10px;
            transform-origin: 0px 5px;
            background-color: chartreuse;
            transform: rotate(-90deg);
            position: absolute;
            left: 140px;
            top:135px;
        }
        #minute,#second
        {
            width: 100px;
            height: 10px;
            transform-origin: 0px 5px;
            background-color: chartreuse;
            transform: rotate(-90deg);
            position: absolute;
            left: 140px;
            top:135px;
        }
    </style>

<body>
    <div id="outLine">
        <div id="inLine">
            <div><span class="begin">12</span><span class="end">6</span></div>
            <div><span class="begin">1</span><span class="end">7</span></div>
            <div><span class="begin">2</span><span class="end">8</span></div>
            <div><span class="begin">3</span><span class="end">9</span></div>
            <div><span class="begin">4</span><span class="end">10</span></div>
            <div><span class="begin">5</span><span class="end">11</span></div>
            <div id="hour"></div>        <!-- 时针的div-->
            <div id="minute"></div>   <!--分针的div-->
            <div id="second"></div>   <!--秒针的div-->
        </div>
    </div>
</body>

<script>
    var seconds=0;
    var minutes=0;
    var hours=0;
    var second=document.querySelector("#second");
    var minute=document.querySelector("#minute");
    var hour=document.querySelector("#hour");
    animation();
    function animation() {
        requestAnimationFrame(animation);                 //浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。
        var date=new Date();
        seconds=date.getSeconds()*6-90+date.getMilliseconds()*(6/1000);  　　　　 //度数
        second.style.transform="rotate("+seconds+"deg)";  　　　　　　　　   //秒针转过的度数
        minutes=date.getMinutes()*6-90+date.getSeconds()*(6/60);  
        minute.style.transform="rotate("+minutes+"deg)";    　　　　　　　　 //分针转过的度数
        hours=date.getHours()*30-90+date.getMinutes()*(30/60)+date.getSeconds()*(30/3600);
        hour.style.transform="rotate("+hours+"deg)"
    }
</script>

　　　　　　

js 分享一个 时钟效果的更多相关文章

  1. 史上最简单的js+css3实现时钟效果

    今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...

  2. JS实现简单时钟效果

    老师上课需要我们做一个时钟的小作业 ,我把它放在上面记录一下啦 表盘和时针我都是用的背景图的形式,然后绝对定位,通过调整left和top确定时针.分针.秒针的位置,transform-origin设置 ...

  3. 用JS实现一个时钟的效果

    (效果图) 分两步进行的. 第一步:  要得到现在的 时 分 秒 但是这里面有一个小玄机 . 比如现在是 9点整      时针指向 9 是没错的 但是如果现在是 9点半   时针应该指向的是 9到1 ...

  4. layer.js,,,分享一个好用的弹出层

    基本属性: <!DOCTYPE html> <html> <head> <head> <meta content="text/html; ...

  5. transform实现的时钟效果

    又来一个时钟效果了,这个的实现不需要canvas,都是div.ul.li画出的,好玩有真实. 哈哈~ 需要的js才能实现到走动这个效果,但js的内容不多,也不难. 主要是一个css里transform ...

  6. 原生javascript实现网页显示日期时钟效果

    刚接触javascript中Date内置对象时,以为这些方法都太简单了,结果要自己实际操作写一个时钟效果还真一时把我难住了,主要有几点大家要注意的.先看实际效果 要实现这样的效果 某年某月某日星期几几 ...

  7. 福利到~分享一个基于jquery的智能提示控件intellSeach.js

    一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...

  8. 基于canvas的原生JS时钟效果

    概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...

  9. JS制作一个创意数字时钟

    通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...

随机推荐

  1. 记一次java.lang.NoClassDefFoundError异常

    前阵子做了个评论过滤敏感词的功能,本地测试没有任何问题,然后就部署到线上服务器,通知相关人员线上测试.大约过了十来天,那货和我说接口出问题了,当时一脸懵逼,用了十来天突然出问题了???好吧,出问题了咱 ...

  2. C语言入门2-程序设计的灵魂—算法及Raptor的应用

    一.     什么是算法(5个特性) 算法就是   解决问题的方法和步骤. 算法为解决一个具体问题而采取的确定的  有限的 执行步骤  ,仅指  计算机   能执行的算法. 算法是程序设计的灵魂和核心 ...

  3. 聊聊面试中的 Java 线程池

    ​背景 关于 Java 的线程池我想大家肯定不会陌生,在工作中或者自己平时的学习中多多少少都会用到,那你真的有了解过底层的实现原理吗?还是说只停留在用的阶段呢?而且关于 Java 线程池也是在面试中的 ...

  4. Helm 3 使用 harbor 作为仓库存储 charts

    简介 本文讲述的是调教 Helm 3 和 harbor 1.6+ 的经验,从 helm2 更新到 helm 3 并且将 charts 推送到 harbor 中进行存储,移除了原先的 helm serv ...

  5. .Net MVC 动态生成LayUI tree

    .Net MVC 动态生成LayUI tree 最近在做项目的过程中需要用到Tree插件,所以找了一堆Tree发现LayUI的Tree样式比较好看,所以开始搞! 1.Layui部分 1.1 首先引用文 ...

  6. [学习笔记] pymysql入门

    一.快速开始 对于会用MySQL的朋友来说,开始使用pymysql可以说真的so esay,只要用下面的代码,把想要对数据库的操作放在 sql = " " 里就可以了. 没有接触过 ...

  7. CDN绕过姿势小结

    公司的各业务主站都挂了CDN,总结一波CDN绕过技巧. 什么是CDN CDN的全称是Content Delivery Network,即内容分发网络. 其基本思路是尽可能避开互联网上有可能影响数据传输 ...

  8. oracle一条语句插入多个值的方法

    今天在实践过程中遇到一个问题, 我想往数据库插入多条数据时,使用了如下语句: insert into 表1 (字段1,字段2) values (1,2),(2,3),(3,4); 这条语句在mysql ...

  9. SpringMvc新建实例配置

    一.创建项目: 1.建立新的动态web项目: 2.为项目命名为:SpringMVC_01 3.添加tomcat运行时环境\依赖库  如果是MyEclipse的话创建web项目时就不需要此步骤 右键项目 ...

  10. 大型系列课程之-七夕告白之旅Electron篇

    上一篇分享了一下vbs的撩妹攻略,但细心的兄弟会发现,这种脚本式的攻城方案并不得心应手,有很多妹子害怕是病毒根本不敢点击,而且这个脚本界面风格也不漂亮,不能轻易打动妹子的心,怎么破,小编这次在为各位老 ...