登录  /  注册
首页 > web前端 > js教程 > 正文

JavaScript之创意时钟项目详解

小云云
发布: 2018-01-04 13:09:19
原创
1448人浏览过

本文主要为大家带来一篇javascript之创意时钟项目。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

一、最终效果展示:

二、项目亮点

1.代码结构清晰明了

2.可以实时动态显示当前时间与当前日期

3.界面简洁、美观、大方

4.提高浏览器兼容性

三、知识点汇总:

jQuery、原生javascript、css3、h5

四、重难点解释

1.各个指针的旋转角度的获取

首先要明确如下概念:

时钟指针旋转一周360度

时针:

表盘上共有12小时,每经过一小时,要旋转30度;

分针:

表盘上共有60个小格子,分针每走一分钟,经过一个小格子,转动6度;

秒针:

表盘上共有60个小格子,秒针每走一分钟,经过一个小格子,也转动6度;

(1)当前时间的获取

举个例子(以时针旋转角度计算为例): 比如现在时间是 9:28;

时针应该在9和10之间,而通过 方式只能获取到整点,所以既要获取到当前的小时,也要获取到当前的分钟,这样才能更好的来确定时针的旋转角度,即为如下方式:

(2)旋转角度的获取

由于时针每经过一个小时后,旋转30度,故获取时针旋转角度如下:

同理,分针与秒针的旋转角度如下:

分针:

秒针:

为了使时钟更加的精准,这里精确到了毫秒;

(3)执行频率,即秒针旋转频率控制

调整函数的执行时间间隔即可改变秒针转动频率。

五、项目待优化之处

1.页面过于简洁,有待进一步优化和改进;

2.作图时未来得及在时钟上画上分秒的刻度;

六、项目中各部分代码

1.HTML代码

nbsp;html>


 <meta>
 <title>jQuery指针时钟(附带日期)</title>
 <!--引入外部css样式-->
 <link>
 <!--引入jQuery库文件-->
 <script></script>
 <!--引入外部js文件-->
 <script></script>
 <p>
 </p>

登录后复制

2.css代码

*
{
 margin:0;
 padding:0;
}
body
{
 background:#f9f9f9;
 color:#000;
 font:15px Calibri, Arial, sans-serif;
 text-shadow:1px 2px 1px #FFFFFF;
}
a,
a:visited
{
 text-decoration:none;
 outline:none;
 color:#fff;
}
a:hover
{
 text-decoration:underline;
 color:#ddd;
}
  /*the footer (尾部)*/
footer
{
 background:#444 url("../images/bg-footer.png") repeat;
 position:fixed;
 width:100%;
 height:70px;
 bottom:0;
 left:0;
 color:#fff;
 text-shadow:2px 2px #000;
 /*提高浏览器的兼容性*/
 -moz-box-shadow:5px 1px 10px #000;
 -webkit-box-shadow:5px 1px 10px #000;
 box-shadow:5px 1px 10px #000;
}
footer h1
{
 font:25px/26px Acens;
 font-weight:normal;
 left:50%;
 margin:0px 0 0 150px;
 padding:25px 0;
 position:relative;
 width:400px;
}
footer a.orig,
a.orig:visited
{
 background:url("../images/demo2.png") no-repeat right top;
 border:none;
 text-decoration:none;
 color:#FCFCFC;
 font-size:14px;
 height:70px;
 left:50%;
 line-height:50px;
 margin:12px 0 0 -400px;
 position:absolute;
 top:0;
 width:250px;
}
  /*styling for the clock(时钟样式)*/
#clock
{
 position: relative;
 width: 600px;
 height: 600px;
 list-style: none;
 margin: 20px auto;
 background: url('../images/clock.png') no-repeat center;
 
}
#seconds,
#minutes,
#hours
{
 position: absolute;
 width: 30px;
 height: 580px;
 left: 270px;
}
#date
{
 position: absolute;
 top: 365px;
 color: #666;
 right: 140px;
 font-weight: bold;
 letter-spacing: 3px;
 font-family: "微软雅黑";
 font-size: 30px;
 line-height: 36px;
}
#hours
{
 background: url('../images/hands.png') no-repeat left;
 z-index: 1000;
}
#minutes
{
 background: url('../images/hands.png') no-repeat center;
 width:25px;
 z-index: 2000;
}

#seconds
{
 background: url('../images/hands.png') no-repeat right;
 z-index: 3000;
}
登录后复制

3.js代码

(1)需要下载一个js的引用包(百度或者谷歌一下你就知道)

(2)js代码

$(document).ready(function () {

 //动态插入HTML代码,标记时钟 
 var clock = [
  '
登录后复制
    ',   '
  • ',   '
  • ',   '
  • ',   '
  • ',   '
'].join('');  // 逐渐显示时钟,并把它附加到主页面中   $(clock).fadeIn().appendTo('body');  //每一秒钟更新时钟视图的自动执行函数  //也可以使用此方法: setInterval (function Clock (){})();  (function Clock() {   //得到日期和时间   var date = new Date().getDate(),  //得到当前日期    hours = new Date().getHours(),  //得到当前小时    minutes = new Date().getMinutes();  //得到当前分钟    seconds = new Date().getSeconds(),  //得到当前秒     ms = new Date().getMilliseconds();//得到当前毫秒   //将当前日期显示在时钟上   $("#date").html(date);   //获取当前秒数,确定秒针位置   var srotate = seconds + ms / 1000;   $("#seconds").css({    //确定旋转角度    'transform': 'rotate(' + srotate * 6 + 'deg)',     });   //获取当前分钟数,得到分针位置   var mrotate = minutes + srotate / 60;    $("#minutes").css({    'transform': 'rotate(' + mrotate * 6 + 'deg)',    //提高浏览器的兼容性    '-moz-transform': 'rotate(' + mrotate * 6 + 'deg)',    '-webkit-transform': 'rotate(' + mrotate * 6 + 'deg)'   });   //获取当前小时,得到时针位置   var hrotate = hours % 12 + (minutes / 60);   $("#hours").css({    'transform': 'rotate(' + hrotate * 30 + 'deg)',    //提高浏览器的兼容性    '-moz-transform': 'rotate(' + hrotate * 30 + 'deg)',    '-webkit-transform': 'rotate(' + hrotate * 30 + 'deg)'   });   //每一秒后执行一次时钟函数   setTimeout(Clock, 1000);  })(); });

4.一些必要的图片素材(c此处不再一一列举或展示)

注释:

1.Transform 属性

2.rotate() 方法

相关推荐:

用canvas做出时钟实现步骤

实例讲解JS+CSS实现滚动数字时钟效果

制作一个简易的时钟效果

以上就是JavaScript之创意时钟项目详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号