快捷導(dǎo)航

Javascript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果

更新時(shí)間：2018年11月17日 12:09:46 作者：wxk_前端開發(fā)

這篇文章主要為大家介紹了Javascript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果，非常詳細(xì)的注釋代碼，文具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果的具體代碼，供大家參考，具體內(nèi)容如下

1.css代碼

<style type="text/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;
 }
 </style>

2.JS代碼

<script type="text/javascript">
 function showtime(){
 var date=new Date();//創(chuàng)建一個(gè)日期對象的實(shí)例。這句代碼這樣理解,new代表創(chuàng)建，Date是一個(gè)時(shí)間對象，連起來就是創(chuàng)建對象，并用變量date接收，實(shí)例就是一個(gè)實(shí)實(shí)在在的東西，比如：老師讓你去幫他拿一個(gè)文件，結(jié)果你的同桌去了，你們兩呢都屬于人這個(gè)對象，所以你拿和他拿都一樣。
 console.log(date);//在控制臺輸出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語句的原因是當(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');//在頁面中根據(jù)ID查找標(biāo)簽對象,在文檔中通過ID獲得box的內(nèi)容，并賦值給time 。(doucument意思是整個(gè)文檔)
 time1.innerHTML=time;//innerHTML是整個(gè)標(biāo)簽的前后里面的內(nèi)容，把time里面的內(nèi)容賦值到了time1中(innerHTML 指HTML開始標(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í)行
 </script>

效果圖：