小編給大家分享一下Javascript怎么實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司網(wǎng)絡(luò)公司擁有十余年的成都網(wǎng)站開(kāi)發(fā)建設(shè)經(jīng)驗(yàn)，千余家客戶的共同信賴。提供成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)站開(kāi)發(fā)、網(wǎng)站定制、買友情鏈接、建網(wǎng)站、網(wǎng)站搭建、自適應(yīng)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)師打造企業(yè)風(fēng)格，提供周到的售前咨詢和貼心的售后服務(wù)

具體內(nèi)容如下

1.css代碼

 #box{
  width:200px;
  height:200px;
  background:pink;
  margin:100px auto;
  line-height:200px;
  text-align:center;
  border-radius:50%;
  box-shadow:0 0 100px pink;
  color:black;
 }
 

2.JS代碼

 function showtime(){
 var date=new Date();//創(chuàng)建一個(gè)日期對(duì)象的實(shí)例。這句代碼這樣理解,new代表創(chuàng)建，Date是一個(gè)時(shí)間對(duì)象，連起來(lái)就是創(chuàng)建對(duì)象，并用變量date接收，實(shí)例就是一個(gè)實(shí)實(shí)在在的東西，比如：老師讓你去幫他拿一個(gè)文件，結(jié)果你的同桌去了，你們兩呢都屬于人這個(gè)對(duì)象，所以你拿和他拿都一樣。
 console.log(date);//在控制臺(tái)輸出date的值
 var year=date.getFullYear();//引用了年這個(gè)方法(功能，意思是能實(shí)現(xiàn)什么，能干什么)getFullYear
 var month=date.getMonth()+1;//這里加一是因?yàn)槲覀冇^念上的月份和定義方法的月份不一樣，定義方法的月份是0~11，我們觀念上的月份呢是1~12，因此要加一
 var day=date.getDate();
 var hour=date.getHours();
 if(hour<10){
  hour='0'+hour;
 }//這里用if語(yǔ)句的原因是當(dāng)我們的時(shí)間走到一位數(shù)字時(shí)就會(huì)出現(xiàn)閃動(dòng)，會(huì)使整個(gè)代碼混亂，為了解決這一缺點(diǎn)在個(gè)位數(shù)前面用拼接的方法加一個(gè)0，這樣就形成了兩位數(shù)，這樣就不會(huì)出現(xiàn)閃動(dòng)。分鐘和秒也是一樣
 var minute=date.getMinutes();
  if(minute<10){
  minute='0'+minute;
 }
 var second=date.getSeconds();
  if(second<10){
  second='0'+second;
 }
 var time=year+'/'+month+'/'+day+' '+hour+':'+minute+':'+second;
 var time1=document.getElementById('box');//在頁(yè)面中根據(jù)ID查找標(biāo)簽對(duì)象,在文檔中通過(guò)ID獲得box的內(nèi)容，并賦值給time 。(doucument意思是整個(gè)文檔)
 time1.innerHTML=time;//innerHTML是整個(gè)標(biāo)簽的前后里面的內(nèi)容，把time里面的內(nèi)容賦值到了time1中(innerHTML 指HTML開(kāi)始標(biāo)記和結(jié)束標(biāo)記之間的內(nèi)容)
 setTimeout(showtime,1000);//一秒鐘之后執(zhí)行showTime.大家都知道，我們的HTML代碼是從上往下執(zhí)行的，當(dāng)執(zhí)行到shoutime時(shí)，會(huì)往下執(zhí)行調(diào)用的函數(shù)，然后執(zhí)行函數(shù)，又執(zhí)行setTimeout方法，一直這樣循環(huán)下去，就能實(shí)現(xiàn)時(shí)鐘的不停跳動(dòng)。
 }
 showtime();//函數(shù)需要調(diào)用才會(huì)執(zhí)行
 

效果圖：

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