JavaScript之创意时钟项目(实例讲解)


Posted in Javascript onOctober 23, 2017

“时钟展示项目”说明文档(文档尾部附有相应代码

一、最终效果展示:

JavaScript之创意时钟项目(实例讲解)

二、项目亮点

1.代码结构清晰明了

JavaScript之创意时钟项目(实例讲解)

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

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

4.提高浏览器兼容性

JavaScript之创意时钟项目(实例讲解)

三、知识点汇总:

jQuery、原生javascript、css3、h5

四、重难点解释

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

首先要明确如下概念:

时钟指针旋转一周360度

时针:

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

分针:

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

秒针:

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

(1)当前时间的获取

JavaScript之创意时钟项目(实例讲解)

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

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

JavaScript之创意时钟项目(实例讲解)

(2)旋转角度的获取

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

JavaScript之创意时钟项目(实例讲解)

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

分针:

JavaScript之创意时钟项目(实例讲解)

秒针:

JavaScript之创意时钟项目(实例讲解)

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

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

JavaScript之创意时钟项目(实例讲解)

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

五、项目待优化之处

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

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

六、项目中各部分代码

1.HTML代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jQuery指针时钟(附带日期)</title>
 <!--引入外部css样式-->
 <link rel="stylesheet" href="css/demo.css" rel="external nofollow" type="text/css" media="screen" />
</head>
<body>
 <!--引入jQuery库文件-->
 <script src="js/jquery-1.6.2.min.js"></script>
 <!--引入外部js文件-->
 <script src="js/script.js"></script>
 <div style="text-align:center;clear:both">
 </div>
</body>
</html>

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 = [
  '<ul id="clock">',
  '<li id="date"></li>',
  '<li id="seconds"></li>',
  '<li id="hours"></li>',
  '<li id="minutes"></li>',
  '</ul>'].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 属性

JavaScript之创意时钟项目(实例讲解)

2.rotate() 方法

JavaScript之创意时钟项目(实例讲解)

以上这篇JavaScript之创意时钟项目(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
简述vue中的config配置
Jan 23 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
node实现mock-plugin中间件的方法
Dec 25 Javascript
javascript实现支付宝滑块验证码效果
Jul 24 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 #Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 #Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 #Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 #Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 #Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 #Javascript
JS返回顶部实例代码
Aug 09 #Javascript
You might like
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
初识javascript 文档碎片
2010/07/13 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
python实现俄罗斯方块游戏
2020/03/25 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
Exception类的常用方法
2012/06/16 面试题
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
cf收人广告词大全
2014/03/14 职场文书
物业管理专业自荐信
2014/07/01 职场文书
高中军训的心得体会
2014/09/01 职场文书
给校长的一封检讨书
2014/09/20 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
房贷工资证明范本
2015/06/12 职场文书
张丽莉观后感
2015/06/16 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书