Javascript實現動態時鐘效果

來源：懂視網責編：小OO 時間：2020-11-27 22:03:44

Javascript實現動態時鐘效果

本文實例為大家分享了js實現動態時鐘效果的具體代碼，供大家參考，具體內容如下：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代碼；

推薦度：

點擊下載本文 文檔為doc格式

導讀本文實例為大家分享了js實現動態時鐘效果的具體代碼，供大家參考，具體內容如下：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代碼；

本文實例為大家分享了js實現動態時鐘效果的具體代碼，供大家參考，具體內容如下

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>

效果圖：