Javascript實現(xiàn)動態(tài)時鐘效果
來源：懂視網(wǎng)
責編：小OO
時間：2020-11-27 22:03:44
Javascript實現(xiàn)動態(tài)時鐘效果
本文實例為大家分享了js實現(xiàn)動態(tài)時鐘效果的具體代碼，供大家參考，具體內(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代碼；
導讀本文實例為大家分享了js實現(xiàn)動態(tài)時鐘效果的具體代碼，供大家參考，具體內(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代碼；
本文實例為大家分享了js實現(xiàn)動態(tài)時鐘效果的具體代碼，供大家參考，具體內(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)建一個日期對象的實例。這句代碼這樣理解,new代表創(chuàng)建，Date是一個時間對象，連起來就是創(chuàng)建對象，并用變量date接收，實例就是一個實實在在的東西，比如：老師讓你去幫他拿一個文件，結(jié)果你的同桌去了，你們兩呢都屬于人這個對象，所以你拿和他拿都一樣。
console.log(date);//在控制臺輸出date的值
var year=date.getFullYear();//引用了年這個方法(功能，意思是能實現(xiàn)什么，能干什么)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語句的原因是當我們的時間走到一位數(shù)字時就會出現(xiàn)閃動，會使整個代碼混亂，為了解決這一缺點在個位數(shù)前面用拼接的方法加一個0，這樣就形成了兩位數(shù)，這樣就不會出現(xiàn)閃動。分鐘和秒也是一樣
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查找標簽對象,在文檔中通過ID獲得box的內(nèi)容，并賦值給time 。(doucument意思是整個文檔)
time1.innerHTML=time;//innerHTML是整個標簽的前后里面的內(nèi)容，把time里面的內(nèi)容賦值到了time1中(innerHTML 指HTML開始標記和結(jié)束標記之間的內(nèi)容)
setTimeout(showtime,1000);//一秒鐘之后執(zhí)行showTime.大家都知道，我們的HTML代碼是從上往下執(zhí)行的，當執(zhí)行到shoutime時，會往下執(zhí)行調(diào)用的函數(shù)，然后執(zhí)行函數(shù)，又執(zhí)行setTimeout方法，一直這樣循環(huán)下去，就能實現(xiàn)時鐘的不停跳動。
}
showtime();//函數(shù)需要調(diào)用才會執(zhí)行
</script>
效果圖：
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Javascript實現(xiàn)動態(tài)時鐘效果
本文實例為大家分享了js實現(xiàn)動態(tài)時鐘效果的具體代碼，供大家參考，具體內(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代碼；
