方法一：html+js
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>钟表</title>
</head>
<body>
<style type="text/css">.time{width:200px;height:50px;background:#030303;color:#00FF00;border-radius:50px;text-align:center;font-size:20px;line-height:50px;}
</style>
<script>function getdate(){cao=new Date();hour=cao.getHours();if(hour<10){hour='0'+hour;}min=cao.getMinutes();if(min<10){min='0'+min;}second=cao.getSeconds();if(second<10){second='0'+second;}str=hour+':'+min+':'+second;sidobj=document.getElementById('sid');sidobj.innerHTML=str;}//getdate();sobj=setInterval(getdate,0);function a(){clearInterval(sobj);}function b(){sobj=setInterval(getdate,0);}</script>
</head>
<body><div class="time"><span id="sid"></span></div>
</body>
</html>方法二：html+js+jquery
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>钟表</title><script type="text/javascript" src="jquery-2.1.4.js"></script>
</head>
<body><style>.time{width:200px;height:50px;background:#030303;color:#00FF00;border-radius:50px;text-align:center;font-size:20px;line-height:50px;}</style><div class="time"><span id="sid"></span></div>
<script>function Time(){var myDate=new Date();var Year=myDate.getFullYear();var Month=myDate.getMonth()+1;var Day=myDate.getDate();var H=myDate.getHours();if (H<10) {H='0'+H;}var M=myDate.getMinutes();if (M<10) {M='0'+M;}var S=myDate.getSeconds();if (S<10) {S='0'+S;}date=H+':'+M+':'+S;$('#sid').html(date); }sobj=setInterval(Time,0);
</script>
</body>
</html>实验图如下：
