数字时钟

一个美丽的数字时钟

利用所学的Jquery知识制作一个自己的专属时钟，下面先看一下效果图

效果图此图为静止
（时分秒都是动态变化的）
在这里插入图片描述
程序解读：使用定时器进行动态变化，时分秒的数字小于10的时候前面应该加上一个0，当秒达到六十的时候分加一，秒变为零，当分达到六十的时候时加一，分变为零。

Body代码

<div id="time"><div id="small"><div id="hour"></div><div id="min"></div><div id="src"></div></div></div>

Css代码

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;}

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);});

至此所有代码已经全部展示，如果有不太理解上边分段程序的可以参考下面整体代码

整体代码

<!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>