jquery版时钟(css3实现)

简介: 原文:jquery版时钟(css3实现)  做时钟的主要原因是因为喜欢,觉得它好看(本人对特效有点爱不释手……)。做的时候感觉工程量会有点大,做着做着发现实现起来其实并不难,只要理清思绪,其实还蛮简单的(我制作东西喜欢整体方向制定好,然后边做边找感觉,最后可能会有不一样的惊喜)。
原文: jquery版时钟(css3实现)

  做时钟的主要原因是因为喜欢,觉得它好看(本人对特效有点爱不释手……)。做的时候感觉工程量会有点大,做着做着发现实现起来其实并不难,只要理清思绪,其实还蛮简单的(我制作东西喜欢整体方向制定好,然后边做边找感觉,最后可能会有不一样的惊喜)。

  我这里采用了时钟的背景图片,第一我觉得图片好看,第二我觉得应该先实现主要的功能再考虑画图(总归来说就是有点懒,哈哈~)。好了,废话不多说啦,进入正题。

  一、图片演示

  

  二、html代码

<div class="box">
    <div class="clock"> <!-- 时钟背景图 -->
        <div class="second-hand"></div> <!-- 秒针 -->
        <div class="minute-hand"></div> <!-- 分针 -->
        <div class="hour-hand"></div> <!-- 时针 -->
    </div>
</div>

   三、css代码

        .box {margin: 10px auto; width: 894px; height: 863px;}
        .clock {position: relative; width: 894px; height: 863px; background: url("images/bg.png") no-repeat;}
        .second-hand,.minute-hand,.hour-hand {position: absolute; left: 50%; margin-left: -6px; top: -13px; width: 20px; height: 894px; background: url("images/clock_needle.png") no-repeat;}
        /* 三根针的长度和时钟的宽度保持一致(最长的),这样可以实现以中心旋转 */
        .second-hand {background-position: -1px 59px; z-index: 1000;}
        .minute-hand {background-position: -25px 56px; z-index: 100;}
        .hour-hand {background-position: -54px 56px; z-index: 10;}

  分析:

  这里需要注意的是,要让秒针、分针和时针的长度和时钟的宽度(长度,谁长就和谁一样)一致(时钟最好是正方形的),因为图片旋转的时候,是以图片中心为圆心旋转。

  四、js代码

        $(function(){
            var $second = $(".second-hand"), /* 秒针 */
                    $minute = $(".minute-hand"), /* 分针 */
                    $hour = $(".hour-hand"), /* 时针 */
                    nowTime = function(){ /* 执行函数 */
                        /* 得到现在的小时,分钟和秒 */
                        function getTime(){
                            var now = new Date();
                            return {
                                hours: now.getHours() + now.getMinutes() / 60, /* 小时数,包括分钟数 */
                                minutes: now.getMinutes() + now.getSeconds() / 60, /* 分针数,包括秒数 */
                                seconds: now.getSeconds() /* 秒数 */
                            }
                        }
                        var _date = getTime(); /* 接收的时间对象 */
                        /* 秒针,一圈360度总共是60秒(60格),一秒(一格)就是6度,乘以6的主要原因就是秒数乘以一格的度数等于总度数 */
                        var _secondRotate = Math.floor(_date.seconds) * 6;
                        /* 分针,一圈360度总共是60分钟,和秒数解释类似 */
                        var _minuteRotate = _date.minutes * 6;
                        /* 时针,一圈360度是12个小时,一个小时就是30度(其实也是5格),小时数乘以一小时的度数就是总度数。但是要考虑大于12的小时数,这里采取整除12的方发即可实现 */
                        var _hourRotate =  (_date.hours % 12) * 30;
                        $second.css({"transform":"rotate("+_secondRotate+"deg)"}); /* 设置秒针旋转度 */
                        $minute.css({"transform":"rotate("+_minuteRotate+"deg)"}); /* 设置分针旋转度 */
                        $hour.css({"transform":"rotate("+_hourRotate+"deg)"}); /* 设置时针旋转度 */
                    }

            setInterval(nowTime,1000); /* 循环调用,一秒后调用一次 */

        })

  分析:

  注释讲解的比较清楚,我这里主要强调一下如何获取秒针、分针和时针的旋转度数。

  秒针,旋转一圈总共是60秒,一圈也就是360°。这样想想,一秒就是6°,一圈总共是60格,一秒是一格也是6°,即秒针的旋转度数就是秒数乘以6。

  分针,分针的解释和秒针类似。它旋转一圈是60分钟,所以一分钟旋转6度,一分钟是一格也是6°,即分针的旋转度数是分钟数乘以6。

  时针,一圈是12个小时,一个小时应该是360/12=30°,所以时针的旋转角度为小时数乘以30°。也可以这样解释,一个小时占了5格,一格是6°,即小时数乘以5再乘以6则是时针旋转度数。

  查看演示 下载代码

   如果有哪里讲得不好或者不对的对方欢迎指正,谢谢~

目录
相关文章
|
2月前
jQuery+CSS3自动轮播焦点图特效源码
jQuery+CSS3自动轮播焦点图特效源码
28 1
jQuery+CSS3自动轮播焦点图特效源码
|
18天前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
20天前
|
JavaScript 前端开发
js,jq,jquery删除css属性
js,jq,jquery删除css属性
14 0
|
2月前
|
存储 移动开发 JavaScript
jQuery 根据 css 类筛选 DOM 元素的代码
jQuery 根据 css 类筛选 DOM 元素的代码
|
2月前
|
前端开发 JavaScript
jquery+css实现Tab栏切换的代码实例
jquery+css实现Tab栏切换的代码实例
59 0
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
24 0
|
2月前
|
前端开发 算法 JavaScript
html+css+js实现时钟
html+css+js实现时钟
43 0
|
2月前
|
Java 数据库 Android开发
基于ssm心理测评系统前后台管理系统(spring+springmvc+mybatis+jsp+jquery+css)
基于ssm心理测评系统前后台管理系统(spring+springmvc+mybatis+jsp+jquery+css)
|
2月前
|
Java 数据库 Maven
基于springboot颐养中心商城前台系统(springboot+mybatis+maven+html+jquery+css)
基于springboot颐养中心商城前台系统(springboot+mybatis+maven+html+jquery+css)
|
JavaScript 前端开发 UED
9款设计独特的jQuery/CSS3插件
今天要为大家分享9款设计非常独特的jQuery/CSS3全新应用插件,插件包含菜单、jQuery焦点图、jQuery表单、jQuery图片特效等。下面大家一起来看看吧。
161 0
9款设计独特的jQuery/CSS3插件