<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jQuery/jquery-1.8.3.min.js"></script>
<style type="text/css">
input{
background-color: #9fc5f1;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
font-size:14px;
font-weight: bold;
}
#time p{
color: #1f6dc2;
font-size: 48px;
font-weight: bold;
margin-left:90px;
margin-bottom:0px;
}
</style>
<script type="text/javascript">
var shijian=3600;//可以將獲取到的時間轉換爲時間戳
var time;
//爲btn1綁定點擊事件
window.onload = function() {
document.getElementById('btn1').addEventListener('click',function() {
setTimeout('start()',1000);
},false);
};
function start() {
time=setInterval('count()',1000);//返回值time只是爲了需要暫停的時候 clearInterval(time)清除時間間隔
};
function count() {
if(shijian<0){
alert("time out");
pause();//一般情況下這個if條件是用來提交數據用的,這裏只是測試一下。
}else{
shijian--;
document.getElementById('time').innerHTML = (Math.floor(shijian/60)+":"+shijian%60);//這裏用到將毫秒轉換到時分格式
console.info(time);
}
};
function pause(){
clearInterval(time);
};
function goOn(){
time = setInterval('count()',1000);//重新設置時間間隔
};
</script>
</head>
<body>
<div>
<p id='time'>00:00</p>
<input id="btn1" type="button" value="開始"/>
<input type="button" value="暫停" onclick="pause()"/>
<input type="button" value="繼續" onclick="goOn()"/>
</div>
</body>
</html>
