真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

JavaScript如何實(shí)現(xiàn)創(chuàng)意時(shí)鐘項(xiàng)目

小編給大家分享一下JavaScript如何實(shí)現(xiàn)創(chuàng)意時(shí)鐘項(xiàng)目,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

公司專注于為企業(yè)提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、電子商務(wù)商城網(wǎng)站建設(shè),微信小程序定制開發(fā),軟件按需搭建網(wǎng)站等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。憑借多年豐富的經(jīng)驗(yàn),我們會(huì)仔細(xì)了解各客戶的需求而做出多方面的分析、設(shè)計(jì)、整合,為客戶設(shè)計(jì)出具風(fēng)格及創(chuàng)意性的商業(yè)解決方案,成都創(chuàng)新互聯(lián)更提供一系列網(wǎng)站制作和網(wǎng)站推廣的服務(wù)。

一、最終效果展示:

JavaScript如何實(shí)現(xiàn)創(chuàng)意時(shí)鐘項(xiàng)目

二、項(xiàng)目亮點(diǎn)

1.代碼結(jié)構(gòu)清晰明了

JavaScript如何實(shí)現(xiàn)創(chuàng)意時(shí)鐘項(xiàng)目

2.可以實(shí)時(shí)動(dòng)態(tài)顯示當(dāng)前時(shí)間與當(dāng)前日期

3.界面簡(jiǎn)潔、美觀、大方

4.提高瀏覽器兼容性

JavaScript如何實(shí)現(xiàn)創(chuàng)意時(shí)鐘項(xiàng)目

三、知識(shí)點(diǎn)匯總:

jQuery、原生javascript、css3、h6

四、重難點(diǎn)解釋

1.各個(gè)指針的旋轉(zhuǎn)角度的獲取

首先要明確如下概念:

時(shí)鐘指針旋轉(zhuǎn)一周360度

時(shí)針:

表盤上共有12小時(shí),每經(jīng)過(guò)一小時(shí),要旋轉(zhuǎn)30度;

分針:

表盤上共有60個(gè)小格子,分針每走一分鐘,經(jīng)過(guò)一個(gè)小格子,轉(zhuǎn)動(dòng)6度;

秒針:

表盤上共有60個(gè)小格子,秒針每走一分鐘,經(jīng)過(guò)一個(gè)小格子,也轉(zhuǎn)動(dòng)6度;

(1)當(dāng)前時(shí)間的獲取

JavaScript如何實(shí)現(xiàn)創(chuàng)意時(shí)鐘項(xiàng)目

舉個(gè)例子(以時(shí)針旋轉(zhuǎn)角度計(jì)算為例): 比如現(xiàn)在時(shí)間是 9:28;

時(shí)針應(yīng)該在9和10之間,而通過(guò)JavaScript如何實(shí)現(xiàn)創(chuàng)意時(shí)鐘項(xiàng)目 方式只能獲取到整點(diǎn),所以既要獲取到當(dāng)前的小時(shí),也要獲取到當(dāng)前的分鐘,這樣才能更好的來(lái)確定時(shí)針的旋轉(zhuǎn)角度,即為如下方式:

JavaScript如何實(shí)現(xiàn)創(chuàng)意時(shí)鐘項(xiàng)目

(2)旋轉(zhuǎn)角度的獲取

由于時(shí)針每經(jīng)過(guò)一個(gè)小時(shí)后,旋轉(zhuǎn)30度,故獲取時(shí)針旋轉(zhuǎn)角度如下:

JavaScript如何實(shí)現(xiàn)創(chuàng)意時(shí)鐘項(xiàng)目

同理,分針與秒針的旋轉(zhuǎn)角度如下:

分針:

JavaScript如何實(shí)現(xiàn)創(chuàng)意時(shí)鐘項(xiàng)目

秒針:

JavaScript如何實(shí)現(xiàn)創(chuàng)意時(shí)鐘項(xiàng)目

為了使時(shí)鐘更加的精準(zhǔn),這里精確到了毫秒;

(3)執(zhí)行頻率,即秒針旋轉(zhuǎn)頻率控制

JavaScript如何實(shí)現(xiàn)創(chuàng)意時(shí)鐘項(xiàng)目

調(diào)整函數(shù)的執(zhí)行時(shí)間間隔即可改變秒針轉(zhuǎn)動(dòng)頻率。

五、項(xiàng)目待優(yōu)化之處

1.頁(yè)面過(guò)于簡(jiǎn)潔,有待進(jìn)一步優(yōu)化和改進(jìn);

2.作圖時(shí)未來(lái)得及在時(shí)鐘上畫上分秒的刻度;

六、項(xiàng)目中各部分代碼

1.HTML代碼




 
 jQuery指針時(shí)鐘(附帶日期)
 
 


 
 
 
 
 
 

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 h2
{
 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(時(shí)鐘樣式)*/
#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)需要下載一個(gè)js的引用包(百度或者谷歌一下你就知道)

(2)js代碼

$(document).ready(function () {

 //動(dòng)態(tài)插入HTML代碼,標(biāo)記時(shí)鐘 
 var clock = [
  '',
  '',
  '',
  '',
  '',
  ''].join('');

 // 逐漸顯示時(shí)鐘,并把它附加到主頁(yè)面中 
 $(clock).fadeIn().appendTo('body');

 //每一秒鐘更新時(shí)鐘視圖的自動(dòng)執(zhí)行函數(shù)
 //也可以使用此方法: setInterval (function Clock (){})();
 (function Clock() {
  //得到日期和時(shí)間
  var date = new Date().getDate(),  //得到當(dāng)前日期
   hours = new Date().getHours(),  //得到當(dāng)前小時(shí)
   minutes = new Date().getMinutes();  //得到當(dāng)前分鐘
   seconds = new Date().getSeconds(),  //得到當(dāng)前秒
    ms = new Date().getMilliseconds();//得到當(dāng)前毫秒
  //將當(dāng)前日期顯示在時(shí)鐘上
  $("#date").html(date);
  //獲取當(dāng)前秒數(shù),確定秒針位置
  var srotate = seconds + ms / 1000;
  $("#seconds").css({
   //確定旋轉(zhuǎn)角度
   'transform': 'rotate(' + srotate * 6 + 'deg)',  
  });
  //獲取當(dāng)前分鐘數(shù),得到分針位置
  var mrotate = minutes + srotate / 60; 
  $("#minutes").css({
   'transform': 'rotate(' + mrotate * 6 + 'deg)',
   //提高瀏覽器的兼容性
   '-moz-transform': 'rotate(' + mrotate * 6 + 'deg)',
   '-webkit-transform': 'rotate(' + mrotate * 6 + 'deg)'
  });
  //獲取當(dāng)前小時(shí),得到時(shí)針位置
  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)'
  });
  //每一秒后執(zhí)行一次時(shí)鐘函數(shù)
  setTimeout(Clock, 1000);
 })();
});

4.一些必要的圖片素材(c此處不再一一列舉或展示)

注釋:

1.Transform 屬性

JavaScript如何實(shí)現(xiàn)創(chuàng)意時(shí)鐘項(xiàng)目

2.rotate() 方法

JavaScript如何實(shí)現(xiàn)創(chuàng)意時(shí)鐘項(xiàng)目

以上是“JavaScript如何實(shí)現(xiàn)創(chuàng)意時(shí)鐘項(xiàng)目”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!


標(biāo)題名稱:JavaScript如何實(shí)現(xiàn)創(chuàng)意時(shí)鐘項(xiàng)目
文章URL:http://weahome.cn/article/geicsp.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部