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中判断null、undefined与NaN的方法
Mar 24 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
浅谈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
Protoss兵种介绍
2020/03/14 星际争霸
关于php mvc开发模式的感想
2011/06/28 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
小程序实现多选框功能
2018/10/30 Javascript
小程序实现留言板
2018/11/02 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
python进程类subprocess的一些操作方法例子
2014/11/22 Python
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
医学院校毕业生自荐信范文
2014/01/01 职场文书
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
团组织推荐意见
2015/06/05 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
vue3获取当前路由地址
2022/02/18 Vue.js
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL