首页 / JAVASCRIPT / JavaScript之创意时钟项目(实例讲解)

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript之创意时钟项目(实例讲解)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4872字，纯文字阅读大概需要7分钟。

内容图文

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

一、最终效果展示：

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之创意时钟项目(实例讲解)所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/340202.html

来源：【匿名】

【上一篇】详解node nvm进行node多版本管理【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript之创意时钟项目(实例讲解)】教程文章相关的互联网学习教程文章

Javascript 字典应用实例【代码】

字典时一个很有用的工具，在之前C#项目中有经常使用，这篇博文主要讲解在Javascript中，字典的实际应用场景首先在JS中，是没有Dictionary‘类的，我们需要实现键值（KEY） -- 数值（VALUE）的对应关系，最好的办法就是用数组首先交代下背景，我需要根据数组里的站点编号，获取到对应的站点名称首先通过Thrift接口，获取到数据库里面的设备信息，通过Ajax传输到js页面，遍历数组PS : 数据结构如下：# 设备信息 struct Device{int i...

每天一个JavaScript实例-使用缓存计算（memoization）来提高应用程序性能

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-使用缓存计算（memoization）来提高应用程序性能</title> <script> window.onload = function(){var fibonacci = function(){var memo = [0,1];var fib = function(n){var result = memo[n];if(typeof result != "number"){result = fib(n-1) + fib(n-2);memo[n] = result;}console.log("mem...

JavaScript键盘事件常见用法实例分析

JavaScript 键盘事件有以下3种keydown键盘按键按下（如果按着不放，会持续触发该事件），可以捕获组合键。keypress键盘非功能按键按下（在keydown之后触发，如果按着不放会持续触发该事件），只能捕获单个键。keyup键盘按键弹起，可以捕获组合键。全局事件对象eventevent.ctrlKey功能键”ctrl”键是否按下。event.altKey功能键”alt”键是否按下。event.shiftKey功能键”shift”键是否按下。event.keyCode键盘按键键码。event.char...

JavaScript图形实例：图形的扇形变换和环形变换【图】

1.1 扇形变换将如图1所示的上边长方形的图形变换为下边的扇形图形的变换称为扇形变换。设长方形图形中任一点P1(X1,Y1)变换为扇形图形上的点P2(X2,Y2)，长方形的长为X，扇形圆心坐标为（X0,Y0），扇形半径为L，扇形与X轴的最小夹角为B，扇形弧对应夹角为C，则点P2的坐标计算公式为： X2=(L+Y1)*COS(θ)+X0 Y2=-(L+Y1)*SIN(θ)+Y0 其中： θ=C*(X-X1)/X1+B 图1 扇形变换生成...

javascript中ajax post实例详解

一，原生态的XMLHttpRequest 代码如下复制代码 <script language="javascript"> function saveintroduce() { //获取接受返回信息层 var introducemsg = document.getElementById("introducemsg"); //获取表单对象和用户信息值 var f = document.introduceedt; var elm1 = encodeURIComponent(f.elm1.value); //接收表单的URL地址 var url = "save.php?id=<?=$_GET["id"]?>"; //需要...

每天一个JavaScript实例-展示设置和获取CSS样式设置

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-展示设置和获取CSS样式设置</title> <style>#date{width:200px;background-color:lime;} </style> <script> function getStyle(date,cssprop,cssprop2){//IEif(date.currentStyle){return date.currentStyle[cssprop];}else if(document.defaultView && document.defaultView.getComputedSty...

每天一个JavaScript实例-去除字符串末尾的空白

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-去除字符串末尾的空白</title> <script> function white(){ var input = document.getElementById("inputid"); var lines = input.value.split("\n"); var resultString = ""; for (var i = 0; i < lines.length; i++){var string = lines[i].trim();resultString += string + "-";} alert(...

javascript实例学习之四——javascript分页【代码】

话不多少，直接上代码html代码：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>javascript分页效果</title><style>a{margin-right:5px;}</style> </head> <body><div id="div1"> </div><script src="js/myPage.js"></script> </body> </html> javascript代码：window.onload = function() {var page = new Page({‘id‘: ‘div1‘,‘allNum‘: 10,‘showNum‘: 5,‘nowNum‘: 10,‘callback‘:fun...

javascript控件（二）：一个好用的表格（分页实例）【代码】

一、官网https://datatables.net/二、引用<script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script> <script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>三、ajax分页初始化1. 前端脚本部分$(‘#example2‘).DataTable( {"processing": true, //查询缓慢的时候会有一个Processing状态的提示"serverSide": true,"ajax": "tabledate/paging?myparam=HAHA", //...

javaScript中==和===对数组、对象的判断是它们是否同一个实例对象

问题描述在实现业务时，大量用到了 if（a === b）这样的判断，但有一个类似判断一直进不去这个if条件， a === b 返回的一直是false，但是其他几个类似判断，都正常触发条件。原因分析我们都知道 === 是严格相等，首先要两个值的类型相等，无法触发条件的这个判断，a和b都是Array对象，且通过打印，看到数组中的元素是一样的。于是写了几个测试判断，如下：通过上图可以看到，对于javascript的基础类型Number、String，如c2和d2都等...

JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3【代码】【图】

技术很多，例子很多，只好慢慢学，慢慢实践！！现在学的这本书是【JavaScript实战----JavaScript、jQuery、HTML5、Node.js实例大全】JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记23.3 响应鼠标动作图3-2的效果已经有了，需要鼠标来操作展示想看的照片，这就需要在相应的地方加上事件。3.3.1 响应小照片单击动作在3.2.3的代码里提供了显示小图列表的eg.showThumb()方法，在单击小图片时要显示大图片，这需要调用eg.showBig...

JS实例之滚动固定效果，实现顶部菜单固定效果。【代码】

1<head> 2<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3<title>无标题文档</title> 4<style type="text/css"> 5*{margin:0px auto; padding:0px;} 6#tou{width:100%; height:200px; background-color:#06C;} 7#menu{width:100%; height:80px; background-color:#666;} 8#neirong{width:100%; height:2000px;} 9</style>10</head>1112<body>13<div id="tou"></div>14<div id="menu"></div>15<div id="ne...

JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2【图】

技术很多，例子很多，只好慢慢学，慢慢实践！！现在学的这本书是【JavaScript实战----JavaScript、jQuery、HTML5、Node.js实例大全】JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记13.2 照片加载与定位根据功能设计，可以先写好 HTML 结构基础，再配好 CSS 做出大致效果，最后用 JavaScript加上各种动作。首先请看 HTML 代码结构。 3.2.1 HTML 代码 CSS代码保存到 eg3.css 文件中，JavaScript代码保存到 eg3.js 文件中，...

每天一个JavaScript实例-检测表单数据

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-检测表单数据</title> <style>[role="alert"]{background-color: #fcc;font-weight: bold;padding:5px;border:1px dashed #000;}div{margin:10px 0;padding:5px;width:400px;background-color: #fff;} </style><script> window.onload = function(){document.getElementById("thirdfield").o...

JS对Cookie的应用--JavaScript实例集锦（初学）【代码】【图】

一个网站上的cookie信息可以实现下次自动登录，记录你的历史等等可以在火狐浏览器查看本地代码的cookie信息：打开火狐浏览器--点击右键--查看页面信息--安全--查看cookie <!DOCTYPE html><html><head><title>Cookie</title></head><script type="text/javascript">/* var oDate=new Date();oDate.setDate(oDate.getDate()+30);document.cookie="user=blue;expires=";// document.cookie="pass=123";*///alert(document.cookie);...

首页 / JAVASCRIPT / JavaScript之创意时钟项目(实例讲解)

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【JavaScript之创意时钟项目(实例讲解)】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

实例 - 相关标签

项目 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程