12、JavaScript中定时器setInterval()的用法

来源：互联网发布：知是故人来编辑：程序博客网时间：2024/06/06 03:55

1、JavaScript中定时器setInterval()的用法

1.1 html代码

<body><div id="container"><button id="start">开始</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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 运行截图

1 0