<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计时器</title>
<style>
input {
border:1px solid rgba(0,0,0,0.8);
text-align: right;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
minutes: <input type="text" value="0" id="minutes"/>
seconds: <input type="text" value="0" id="seconds"/>
<script>
var minutes = 0;
var seconds = 0;
var oMin = document.getElementById("minutes");
var oSec = document.getElementById("seconds");
var timer = setInterval(function(){
seconds++;
if (seconds == 60) {
minutes ++;
seconds = 0;
}
if (minutes == 3) {
clearInterval(timer);
}
oMin.value = minutes;
oSec.value = seconds;
},1000);
</script>
</body>
</html>
执行开始效果:
执行最终效果: