<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.all{
margin-left:33% ;
width:300px;
height:250px;
background-color: palevioletred;
}
.point{
border-color: #000000;
margin-left:20% ;
padding-top: 50px;
}
.input{
width:180px;
font-size: 24px;
color: red;
text-align: center;
}
.point1{
margin-left: 20%;
padding-top: 15px;
background-color: palevioletred;
font-size: 22px;
}
.input1{
width:150px;
margin-left: 15px;
margin-top: 30px;
font-size: 24px;
color: red;
background-color: palevioletred;
text-align: center;
border-color: black;
}
</style>
<script>
var maxtime= -(60*10-1);
function start(){
maxtime=maxtime*-1;
if(maxtime<0){
document.getElementById("start").value="开始";
clearInterval(stop);
}else{
document.getElementById("start").value="暂停";
stop=setInterval("start1()",1000);
}
}
function start1(){
if(maxtime>=0){
minutes=Math.floor(maxtime/60);
seconds=Math.floor(maxtime`);
msg=minutes+":"+seconds;
document.getElementById("time").value=msg;
--maxtime;
}
}
</script>
</head>
<body>
<div class="all">
<div class="point1">
<input class="input1" id="time" value="10:00"/>
</div>
<div class="point" >
<input class="input" οnclick="start()" id="start" value="开始" />
</div>
</div>
</body>
</html>
