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

一、最终效果展示:

二、项目亮点

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代码

 <!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" 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:;
padding:;
}
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:;
left:;
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:;
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:;
}
#minutes
{
background: url('../images/hands.png') no-repeat center;
width:25px;
z-index:;
} #seconds
{
background: url('../images/hands.png') no-repeat right;
z-index:;
}

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 属性

2.rotate() 方法

 

JavaScript之“创意时钟”项目的更多相关文章

  1. 前端特效demo | 一起围观 10 种创意时钟

    时钟动画应用非常广泛,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享 10 款形态各异的超时尚时钟动画,其中有圆盘时钟.创意时钟.电子时钟等,希望大家会喜欢. 文内附有时钟效果代 ...

  2. 我发起并创立了一个 Javascript 前端库 开源项目 jWebForm

    在线演示地址: ( 在线演示 云平台 由 Kooboo 提供  https://www.kooboo.com/ ) 按钮:      http://iwebform.kgeking.kooboo.si ...

  3. canvas :原生javascript编写动态时钟

    canvas :原生javascript编写动态时钟     此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,wid ...

  4. javascript 获取当前部署项目路径

    javascript 获取当前部署项目路径 ========================================= javascript获取当前部署项目路径: 主要用到Location 对 ...

  5. 【MyEcplise】导入项目报错:Errors running builder 'JavaScript Validator' on project '项目名'. java.lang.ClassCastException

    导入项目报错:Errors running builder 'JavaScript Validator' on project '项目名'. java.lang.ClassCastException ...

  6. 20 个使用原生 JavaScript 实现的 Web 项目

    20 个使用原生 JavaScript 实现的 Web 项目 20 vanilla JavaScript Web Projects https://github.com/learning-js-by- ...

  7. 简单的javascript实例一(时钟特效)

    方便以后copy 时钟特效 <html> <head> <meta http-equiv="Content-Type" content="t ...

  8. Errors occurred during the build. Errors running builder 'JavaScript Validator' on project '项目名'.

    把JavaScript Validator去掉.去掉的方法是:选择一个项目--右键Properties--Builders(排第二)--点一下右侧会有四项--取消第一项"JavaScript ...

  9. JavaScript超酷时钟的制作

    <!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 201521123122《Java程序设计》第1周学习总结

    1. 本周学习总结 因为寒假里也没有好好预习java,第一周上课还是有点懵逼. ①.了解了JVM,JRE,JDK的区别,能够熟练安装JDK. ②.编了我人生中的第一个java程序"hello ...

  2. 201521123051《Java程序设计》第九周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. ·所有的异常类是从 java.lang.Exception 类继承的子类. ·Exception 类是 Throwa ...

  3. 201521123060 《Java程序设计》第12周学习总结

    1.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2.书面作业 将Student对象(属性:int id, String name,int age,double ...

  4. 201521123016 《Java程序设计》第9周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避 ...

  5. 201521123024 java 第十周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 finally 题目4-2 1.1 截图你的提交结果(出现学 ...

  6. 201521123030 《Java程序设计》 第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  7. Hyperledger Fabric 1.0 从零开始(六)——创建Fabric多节点集群

    4:创建Fabric多节点集群 4.1.配置说明 首先可以根据官方Fabric自带的e2e_cli列子中的集群方案来生成我们自己的集群,与案例不同的是我们需要把容器都分配到不同的服务器上,彼此之间通过 ...

  8. SQLite中Cursor类的说明

    在Android 查询数据是通过Cursor 类来实现的.当我们使用 SQLiteDatabase.query()方法时,就会得到Cursor对象, Cursor所指向的就是每一条数据. Cursor ...

  9. 《Java从入门到放弃》JavaSE入门篇:网络编程(入门版)

    要进行网络编程,首先要搞清楚目的是什么. 网络编程说简单点就是在网络上的计算机进行数据的交互. 既然要进行数据交互,那就需要有一个发送方和一个接受方. 按网络上的说法,就是一个攻一个受· 当然,现阶段 ...

  10. mysql死锁+解决

    自己作死,navicat不恰当的操作导致了表死锁,操作如下: 给表新加字段:name 没有选择允许为空,但是有没有设置初始值,所以运行的结果就是数据库表里有了name不允许为空但是确实为空的记录: 然 ...