方法一: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>
实验图如下: