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 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
filemanage功能中用到的common.js
Apr 08 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
原生js实现ajax方法(超简单)
Sep 20 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
vue自定义filters过滤器
Apr 26 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
JavaScript判断数组类型的方法
Oct 23 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 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程序的国际化实现方法(利用gettext)
2011/08/14 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
Python3中多线程编程的队列运作示例
2015/04/16 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
在Python中增加和插入元素的示例
2018/11/01 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
python多线程同步实例教程
2019/08/11 Python
python同步windows和linux文件
2019/08/29 Python
Python 字典中的所有方法及用法
2020/06/10 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
金陵十三钗观后感
2015/06/04 职场文书
大学生党课感想
2015/08/11 职场文书
python中sys模块的介绍与实例
2021/04/17 Python