1、JavaScript中定时器setInterval()的用法
1.1 html代码
<body>
<div id="container">
<button id="start">开始</button> <button id="stop">停止</button>
<div id="mycount">0</div>
</div>
</body>
1.2 style代码
<style type="text/css">
#container {
margin: 0 auto;
width: 200px;
height: 100px;
border: 1px dashed red;
position: relative;
}
#mycount {
width: 100px;
height: 50px;
border: 1px solid black;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -25px;
text-align: center;
line-height: 50px;
font-size: 16px;
}
</style>
1.3 JavaScript代码
<script type="text/javascript">
//用于保存定时器的返回值
var setIntervalValue;
//用于计数的变量
var count = 0;
function $(id) {
return document.getElementById(id);
}
function start() {
setIntervalValue = setInterval(function() {
$('mycount').innerHTML = '';
$('mycount').innerHTML = count++;
}, 300);
}
function stop() {
clearInterval(setIntervalValue);
}
$('start').onclick = function() {
start();
}
$('stop').onclick = function() {
stop();
}
</script>
1.4 运行截图