数字时钟
一個美麗的數(shù)字時鐘
利用所學(xué)的Jquery知識制作一個自己的專屬時鐘，下面先看一下效果圖
效果圖此圖為靜止
（時分秒都是動態(tài)變化的）
程序解讀：使用定時器進(jìn)行動態(tài)變化，時分秒的數(shù)字小于10的時候前面應(yīng)該加上一個0，當(dāng)秒達(dá)到六十的時候分加一，秒變?yōu)榱?#xff0c;當(dāng)分達(dá)到六十的時候時加一，分變?yōu)榱恪?/p>
至此所有代碼已經(jīng)全部展示，如果有不太理解上邊分段程序的可以參考下面整體代碼
整體代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><script src="js/jquery.js"></script></head><style>body{text-align: center;float: center;}#time{width: 500px;height: 300px;background-image: url(img/1.jpg);margin: 200px auto;}#small{width: 230px;height: 50px;margin: 105px 150px;float: left;}#hour{width: 50px;height: 100%;float: left;text-align: center;font-size: 35px;color: white;}#min{width: 50px;height: 100%;margin: -51px 90px;float: left;text-align: center;font-size: 35px;color: white;}#src{width: 50px;height: 100%;margin: -51px 175px;float: left;text-align: center;font-size: 35px;color: white;}</style><body><div id="time"><div id="small"><div id="hour"></div><div id="min"></div><div id="src"></div></div></div></body><script>$(function(){var hour=12;var min=12;var sen=54;function showTime(){sen++;if(sen>=60){min++;sen=0;}if(min>=60){hour++;min=0;}if(hour>=24){hour=0;}var dateHour = hour<10?("0"+hour):hour;var dateMin = min<10?("0"+min):min;var dateSen = sen<10?("0"+sen):sen;$("#hour").text(dateHour);$("#min").text(dateMin);$("#src").text(dateSen);}setInterval(function(){showTime();},1000);});</script> </html>獲取更多有趣小程序要記得關(guān)注我呦！！！
總結(jié)
- 上一篇： 计算名次和奖学金
- 下一篇： python正则匹配ip_[求助] 正则