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 相关文章推荐
jquery实用代码片段集合
Aug 12 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 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录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
PHP几个数学计算的内部函数学习整理
2011/08/06 PHP
PHP实现微信公众平台音乐点播
2014/03/20 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
详解php比较操作符的安全问题
2015/12/03 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
详解webpack loader和plugin编写
2018/10/12 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
体育教师个人的自我评价
2014/02/16 职场文书
政府门卫岗位职责
2014/04/29 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis
Go语言中break label与goto label的区别
2021/04/28 Golang
使用pandas模块实现数据的标准化操作
2021/05/14 Python
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL