【4858美高梅】创新意识时钟,JavaScript之创意时钟项目

By admin in 4858美高梅 on 2019年3月27日

“时钟呈现类型”表明文书档案(文书档案底部附有相应代码)

“时钟呈现类型”表明文书档案(文书档案底部附有相应代码)

JavaScript之创新意识时钟项目(实例讲解),javascript实例讲解

“时钟展现类型”表达文书档案(文档尾部附有相应代码)

壹 、最后效果显示:

4858美高梅 1

贰 、项目亮点

1.代码结构清晰明了

4858美高梅 2

2.方可实时动态显示当前岁月与当下日子

3.界面简洁、美观、大方

4.增强浏览器包容性

4858美高梅 3

三 、知识点集中:

jQuery、原生javascript、css3、h5

四 、重难题解释

1.相继指针的旋转角度的获取

第贰要掌握如下概念:

钟表指针旋转七日360度

时针:

表面上共有12小时,每经过暂小时,要旋转30度;

分针:

表面上共有5九个小格子,分针每走一分钟,经过一个小格子,转动6度;

秒针:

表面上共有五十五个小格子,秒针每走一分钟,经过八个小格子,也转动6度;

(1)当前光阴的获取

4858美高梅 4

举个例子(以时针旋转角度总括为例): 比近期后时刻是 9:28;

时针应该在9和第10中学间,而透过4858美高梅 5
方式只可以获得到整点,所以既要获取到当前的小时,也要获取到当前的分钟,那样才能更好的来显明时针的转动角度,即为如下情势:

4858美高梅 6

(2)旋转角度的获得

鉴于时针每经过二个钟头后,旋转30度,故获取时针旋转角度如下:

4858美高梅 7

同理,分针与秒针的转动角度如下:

分针:

4858美高梅 8

秒针:

4858美高梅 9

为了使时钟越发的精准,那里精确到了飞秒;

(3)执行功效,即秒针旋转频率控制

4858美高梅 10

调动函数的推行时间间隔即可改变秒针转动频率。

⑤ 、项目待优化之处

1.页面过度短小,有待进一步优化和勘误;

2.作图时今后得及在时钟上画上分秒的刻度;

6、项目中各部分代码

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)须要下载1个js的引用包(百度或许谷歌(谷歌(Google))时而您就知晓)

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

4858美高梅 11

2.rotate() 方法

4858美高梅 12

上述那篇JavaScript之创新意识时钟项目(实例讲解)正是小编分享给我们的全体内容了,希望能给大家2个参照,也盼望大家多多协助帮客之家。

“时钟体现类型”表达文档( 文书档案 尾部附有相应代码 ) ① 、最终效果呈现:
② 、项…

“时钟体现类型”表达文档(文书档案尾部附有相应代码)

一 、最后效果展现:

4858美高梅 13

 

 

一 、最后效果显示:

4858美高梅 14

 

 

① 、最后效果彰显:

贰 、项目亮点

1.代码协会清晰明了

 4858美高梅 15

2.能够实时动态彰显当前时光与近年来几天期

3.界面简洁、雅观、大方

4.加强浏览器包容性

 4858美高梅 16

 

贰 、项目亮点

1.代码结构清晰明了

 4858美高梅 17

2.得以实时动态展现当今天子与超过天期

3.界面简洁、雅观、大方

4.抓实浏览器包容性

 4858美高梅 18

 

4858美高梅 19

③ 、知识点集中:

【4858美高梅】创新意识时钟,JavaScript之创意时钟项目。jQuery、原生javascript、css3、h5

三 、知识点集中:

jQuery、原生javascript、css3、h5

贰 、项目亮点

肆 、重难点解释

1.依次指针的旋转角度的收获

率先要肯定如下概念:

钟表指针旋转七天360度

时针:

表面上共有12钟头,每经过一钟头,要旋转30度;

分针:

表面上共有六贰十二个小格子,分针每走一分钟,经过一个小格子,转动6度;

秒针:

表面上共有5八个小格子,秒针每走一分钟,经过二个小格子,也转动6度;

(1)当前时光的拿走

 4858美高梅 20

举个例证(以时针旋转角度计算为例):  比如未来日子是 9:28;

时针应该在9和10里面,而经过4858美高梅 21 情势只好取获得整点,所以既要获取到近年来的钟点,也要赢得到当前的分钟,那样才能更好的来显明时针的团团转角度,即为如下形式:

 4858美高梅 22

(2)旋转角度的得到

由于时针每经过三个钟头后,旋转30度,故获取时针旋转角度如下:

 4858美高梅 23

同理,分针与秒针的团团转角度如下:

分针:

 4858美高梅 24

秒针:

 4858美高梅 25

为了使时钟越发的精准,那里精确到了皮秒;

(3)执行功效,即秒针旋转频率控制

 4858美高梅 26

调动函数的实施时间间隔即可改变秒针转动频率。

 

四 、重难题解释

1.依次指针的旋转角度的收获

先是要明显如下概念:

钟表指针旋转15日360度

时针:

表面上共有12时辰,每经过一钟头,要旋转30度;

分针:

表面上共有伍拾伍个小格子,分针每走一分钟,经过三个小格子,转动6度;

秒针:

表面上共有六拾3个小格子,秒针每走一分钟,经过贰个小格子,也转动6度;

(1)当前光阴的获取

 4858美高梅 27

举个例子(以时针旋转角度总括为例):  比如现在时刻是 9:28;

时针应该在9和10之间,而因而4858美高梅 28 格局只可以获得到整点,所以既要获取到当前的钟点,也要博得到当下的分钟,那样才能更好的来规定时针的转动角度,即为如下方式:

 4858美高梅 29

(2)旋转角度的获得

鉴于时针每经过一个时辰后,旋转30度,故获取时针旋转角度如下:

 4858美高梅 30

同理,分针与秒针的转动角度如下:

分针:

 4858美高梅 31

秒针:

 4858美高梅 32

为了使时钟越发的精准,那里精确到了微秒;

(3)执行效能,即秒针旋转频率控制

 4858美高梅 33

调整函数的履行时间间隔即可改变秒针转动频率。

 

1.代码布局清晰明了

5、项目待优化之处

1.页面过于简短,有待进一步优化和改革;

2.作图时未来得及在时钟上画上分秒的刻度;

 

五 、项目待优化之处

1.页面过于不难,有待进一步优化和创新;

2.作图时未来得及在时钟上画上分秒的刻度;

 

4858美高梅 34

6、项目中各部分代码

1.HTML代码

4858美高梅 354858美高梅 36

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>jQuery指针时钟(附带日期)</title>
 6     <!--引入外部css样式-->
 7     <link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
 8 </head>
 9 <body>
10     <!--引入jQuery库文件-->
11     <script src="js/jquery-1.6.2.min.js"></script>
12     <!--引入外部js文件-->
13     <script src="js/script.js"></script>
14     <div style="text-align:center;clear:both">
15     </div>
16 </body>
17 </html>

View Code

2.css代码

4858美高梅 374858美高梅 38

  1 *
  2 {
  3     margin:0;
  4     padding:0;
  5 }
  6 body
  7 {
  8     background:#f9f9f9;
  9     color:#000;
 10     font:15px Calibri, Arial, sans-serif;
 11     text-shadow:1px 2px 1px #FFFFFF;
 12 }
 13 a,
 14 a:visited
 15 {
 16     text-decoration:none;
 17     outline:none;
 18     color:#fff;
 19 }
 20 a:hover
 21 {
 22     text-decoration:underline;
 23     color:#ddd;
 24 }
 25      /*the footer  (尾部)*/
 26 footer
 27 {
 28     background:#444 url("../images/bg-footer.png") repeat;
 29     position:fixed;
 30     width:100%;
 31     height:70px;
 32     bottom:0;
 33     left:0;
 34     color:#fff;
 35     text-shadow:2px 2px #000;
 36     /*提高浏览器的兼容性*/
 37     -moz-box-shadow:5px 1px 10px #000;
 38     -webkit-box-shadow:5px 1px 10px #000;
 39     box-shadow:5px 1px 10px #000;
 40 }
 41 footer h1
 42 {
 43     font:25px/26px Acens;
 44     font-weight:normal;
 45     left:50%;
 46     margin:0px 0 0 150px;
 47     padding:25px 0;
 48     position:relative;
 49     width:400px;
 50 }
 51 footer a.orig,
 52 a.orig:visited
 53 {
 54     background:url("../images/demo2.png") no-repeat right top;
 55     border:none;
 56     text-decoration:none;
 57     color:#FCFCFC;
 58     font-size:14px;
 59     height:70px;
 60     left:50%;
 61     line-height:50px;
 62     margin:12px 0 0 -400px;
 63     position:absolute;
 64     top:0;
 65     width:250px;
 66 }
 67      /*styling for the clock(时钟样式)*/
 68 #clock
 69 {
 70     position: relative;
 71     width: 600px;
 72     height: 600px;
 73     list-style: none;
 74     margin: 20px auto;
 75     background: url('../images/clock.png') no-repeat center;
 76     
 77 }
 78 #seconds,
 79 #minutes,
 80 #hours
 81 {
 82     position: absolute;
 83     width: 30px;
 84     height: 580px;
 85     left: 270px;
 86 }
 87 #date
 88 {
 89     position: absolute;
 90     top: 365px;
 91     color: #666;
 92     right: 140px;
 93     font-weight: bold;
 94     letter-spacing: 3px;
 95     font-family: "微软雅黑";
 96     font-size: 30px;
 97     line-height: 36px;
 98 }
 99 #hours
100 {
101     background: url('../images/hands.png') no-repeat left;
102     z-index: 1000;
103 }
104 #minutes
105 {
106     background: url('../images/hands.png') no-repeat center;
107     width:25px;
108     z-index: 2000;
109 }
110 
111 #seconds
112 {
113     background: url('../images/hands.png') no-repeat right;
114     z-index: 3000;
115 }

View Code

3.js代码

(1)须要下载三个js的引用包(百度照旧谷歌(Google)时而您就精通)

(2)js代码

4858美高梅 394858美高梅 40

 1 $(document).ready(function () {
 2 
 3     //动态插入HTML代码,标记时钟    
 4     var clock = [
 5         '<ul id="clock">',
 6         '<li id="date"></li>',
 7         '<li id="seconds"></li>',
 8         '<li id="hours"></li>',
 9         '<li id="minutes"></li>',
10         '</ul>'].join('');
11 
12     // 逐渐显示时钟,并把它附加到主页面中    
13     $(clock).fadeIn().appendTo('body');
14 
15     //每一秒钟更新时钟视图的自动执行函数
16     //也可以使用此方法: setInterval (function Clock (){})();
17     (function Clock() {
18         //得到日期和时间
19         var date = new Date().getDate(),        //得到当前日期
20            hours = new Date().getHours(),       //得到当前小时
21          minutes = new Date().getMinutes();        //得到当前分钟
22          seconds = new Date().getSeconds(),     //得到当前秒
23               ms = new Date().getMilliseconds();//得到当前毫秒
24         //将当前日期显示在时钟上
25         $("#date").html(date);
26         //获取当前秒数,确定秒针位置
27         var srotate = seconds + ms / 1000;
28         $("#seconds").css({
29             //确定旋转角度
30             'transform': 'rotate(' + srotate * 6 + 'deg)',       
31         });
32         //获取当前分钟数,得到分针位置
33         var mrotate = minutes + srotate / 60; 
34         $("#minutes").css({
35             'transform': 'rotate(' + mrotate * 6 + 'deg)',
36             //提高浏览器的兼容性
37             '-moz-transform': 'rotate(' + mrotate * 6 + 'deg)',
38             '-webkit-transform': 'rotate(' + mrotate * 6 + 'deg)'
39         });
40         //获取当前小时,得到时针位置
41         var hrotate = hours % 12 + (minutes / 60);
42         $("#hours").css({
43             'transform': 'rotate(' + hrotate * 30 + 'deg)',
44             //提高浏览器的兼容性
45             '-moz-transform': 'rotate(' + hrotate * 30 + 'deg)',
46             '-webkit-transform': 'rotate(' + hrotate * 30 + 'deg)'
47         });
48         //每一秒后执行一次时钟函数
49         setTimeout(Clock, 1000);
50     })();
51 });

View Code

4.片段要求的图片素材(c此处不再一一列举或展示)

 

 

注释:

1.Transform 属性

4858美高梅 41

2.rotate() 方法

4858美高梅 42

 

 

6、项目中各部分代码

1.HTML代码

4858美高梅 434858美高梅 44

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>jQuery指针时钟(附带日期)</title>
 6     <!--引入外部css样式-->
 7     <link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
 8 </head>
 9 <body>
10     <!--引入jQuery库文件-->
11     <script src="js/jquery-1.6.2.min.js"></script>
12     <!--引入外部js文件-->
13     <script src="js/script.js"></script>
14     <div style="text-align:center;clear:both">
15     </div>
16 </body>
17 </html>

View Code

2.css代码

4858美高梅 454858美高梅 46

  1 *
  2 {
  3     margin:0;
  4     padding:0;
  5 }
  6 body
  7 {
  8     background:#f9f9f9;
  9     color:#000;
 10     font:15px Calibri, Arial, sans-serif;
 11     text-shadow:1px 2px 1px #FFFFFF;
 12 }
 13 a,
 14 a:visited
 15 {
 16     text-decoration:none;
 17     outline:none;
 18     color:#fff;
 19 }
 20 a:hover
 21 {
 22     text-decoration:underline;
 23     color:#ddd;
 24 }
 25      /*the footer  (尾部)*/
 26 footer
 27 {
 28     background:#444 url("..g-footer.png") repeat;
 29     position:fixed;
 30     width:100%;
 31     height:70px;
 32     bottom:0;
 33     left:0;
 34     color:#fff;
 35     text-shadow:2px 2px #000;
 36     /*提高浏览器的兼容性*/
 37     -moz-box-shadow:5px 1px 10px #000;
 38     -webkit-box-shadow:5px 1px 10px #000;
 39     box-shadow:5px 1px 10px #000;
 40 }
 41 footer h1
 42 {
 43     font:25px/26px Acens;
 44     font-weight:normal;
 45     left:50%;
 46     margin:0px 0 0 150px;
 47     padding:25px 0;
 48     position:relative;
 49     width:400px;
 50 }
 51 footer a.orig,
 52 a.orig:visited
 53 {
 54     background:url("..mo2.png") no-repeat right top;
 55     border:none;
 56     text-decoration:none;
 57     color:#FCFCFC;
 58     font-size:14px;
 59     height:70px;
 60     left:50%;
 61     line-height:50px;
 62     margin:12px 0 0 -400px;
 63     position:absolute;
 64     top:0;
 65     width:250px;
 66 }
 67      /*styling for the clock(时钟样式)*/
 68 #clock
 69 {
 70     position: relative;
 71     width: 600px;
 72     height: 600px;
 73     list-style: none;
 74     margin: 20px auto;
 75     background: url('..lock.png') no-repeat center;
 76     
 77 }
 78 #seconds,
 79 #minutes,
 80 #hours
 81 {
 82     position: absolute;
 83     width: 30px;
 84     height: 580px;
 85     left: 270px;
 86 }
 87 #date
 88 {
 89     position: absolute;
 90     top: 365px;
 91     color: #666;
 92     right: 140px;
 93     font-weight: bold;
 94     letter-spacing: 3px;
 95     font-family: "微软雅黑";
 96     font-size: 30px;
 97     line-height: 36px;
 98 }
 99 #hours
100 {
101     background: url('..hands.png') no-repeat left;
102     z-index: 1000;
103 }
104 #minutes
105 {
106     background: url('..hands.png') no-repeat center;
107     width:25px;
108     z-index: 2000;
109 }
110 
111 #seconds
112 {
113     background: url('..hands.png') no-repeat right;
114     z-index: 3000;
115 }

View Code

3.js代码

(1)需求下载一个js的引用包(百度也许谷歌时而你就知道)

(2)js代码

4858美高梅 474858美高梅 48

 1 $(document).ready(function () {
 2 
 3     //动态插入HTML代码,标记时钟    
 4     var clock = [
 5         '<ul id="clock">',
 6         '<li id="date"></li>',
 7         '<li id="seconds"></li>',
 8         '<li id="hours"></li>',
 9         '<li id="minutes"></li>',
10         '</ul>'].join('');
11 
12     // 逐渐显示时钟,并把它附加到主页面中    
13     $(clock).fadeIn().appendTo('body');
14 
15     //每一秒钟更新时钟视图的自动执行函数
16     //也可以使用此方法: setInterval (function Clock (){})();
17     (function Clock() {
18         //得到日期和时间
19         var date = new Date().getDate(),        //得到当前日期
20            hours = new Date().getHours(),       //得到当前小时
21          minutes = new Date().getMinutes();        //得到当前分钟
22          seconds = new Date().getSeconds(),     //得到当前秒
23               ms = new Date().getMilliseconds();//得到当前毫秒
24         //将当前日期显示在时钟上
25         $("#date").html(date);
26         //获取当前秒数,确定秒针位置
27         var srotate = seconds + ms / 1000;
28         $("#seconds").css({
29             //确定旋转角度
30             'transform': 'rotate(' + srotate * 6 + 'deg)',       
31         });
32         //获取当前分钟数,得到分针位置
33         var mrotate = minutes + srotate / 60; 
34         $("#minutes").css({
35             'transform': 'rotate(' + mrotate * 6 + 'deg)',
36             //提高浏览器的兼容性
37             '-moz-transform': 'rotate(' + mrotate * 6 + 'deg)',
38             '-webkit-transform': 'rotate(' + mrotate * 6 + 'deg)'
39         });
40         //获取当前小时,得到时针位置
41         var hrotate = hours % 12 + (minutes / 60);
42         $("#hours").css({
43             'transform': 'rotate(' + hrotate * 30 + 'deg)',
44             //提高浏览器的兼容性
45             '-moz-transform': 'rotate(' + hrotate * 30 + 'deg)',
46             '-webkit-transform': 'rotate(' + hrotate * 30 + 'deg)'
47         });
48         //每一秒后执行一次时钟函数
49         setTimeout(Clock, 1000);
50     })();
51 });

View Code

4.局部必不可少的图片素材(c此处不再一一列举或展现)

 

 

注释:

1.Transform 属性

4858美高梅 49

2.rotate() 方法

4858美高梅 50

 

 

2.能够实时动态展现当前时间与眼今日子

3.界面简洁、雅观、大方

4.增强浏览器包容性

4858美高梅 51

三 、知识点集中:

jQuery、原生javascript、css3、h5

四 、重难点解释

1.挨家挨户指针的转动角度的收获

首先要强烈如下概念:

钟表指针旋转一周360度

时针:

表面上共有12钟头,每经过一钟头,要旋转30度;

分针:

表面上共有5九个小格子,分针每走一秒钟,经过3个小格子,转动6度;

秒针:

表面上共有5玖个小格子,秒针每走一分钟,经过三个小格子,也转动6度;

(1)当前时光的收获

4858美高梅 52

举个例子(以时针旋转角度总括为例): 比如以后时刻是 9:28;

时针应该在9和10之间,而透过4858美高梅 534858美高梅,
格局只好获得到整点,所以既要获取到当前的小时,也要取获得当下的分钟,那样才能更好的来规定时针的转动角度,即为如下格局:

4858美高梅 54

(2)旋转角度的获得

鉴于时针每经过一个时辰后,旋转30度,故获取时针旋转角度如下:

4858美高梅 55

同理,分针与秒针的转动角度如下:

分针:

4858美高梅 56

秒针:

4858美高梅 57

为了使时钟尤其的精准,那里精确到了飞秒;

(3)执行成效,即秒针旋转频率控制

4858美高梅 58

调整函数的实行时间间隔即可改变秒针转动频率。

5、项目待优化之处

1.页面过火简单,有待进一步优化和修正;

2.作图时未来得及在时钟上画上分秒的刻度;

6、项目中各部分代码

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

4858美高梅 59

2.rotate() 方法

4858美高梅 60

以上那篇JavaScript之创新意识时钟项目(实例讲解)正是我分享给大家的全体内容了,希望能给大家二个参考,也可望我们多多帮忙脚本之家。

你恐怕感兴趣的小说:

  • JS达成简易换图时钟功效分析
  • JS+CSS完成滚动数字时钟效果
  • 五步轻松达成JavaScript
    HTML时钟效果
  • JS+Canvas绘制动态时钟效果
  • 1个简单时钟效果js完毕代码
  • js数字滑动时钟的简易完毕(示例讲解)
  • 基于JavaScript达成数量时钟效果
  • JavaScript
    Canvas绘制圆形时钟效果
  • JavaScript实现仿Clock
    ISO时钟

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有