Javascript怎么實現動態時鐘效果

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

具體內容如下

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

效果圖：

以上是“Javascript怎么實現動態時鐘效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！