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

最新推荐文章于 2024-01-15 16:03:58 发布

Bwz_Learning

最新推荐文章于 2024-01-15 16:03:58 发布

阅读量794

点赞数 1

分类专栏： JavaScript_Bak 文章标签： setInterval clearInterval JavaScript的定时器

本文链接：https://blog.csdn.net/zbw18297786698/article/details/51334829

版权

JavaScript_Bak 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

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 运行截图

Bwz_Learning

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
12、JavaScript中定时器setInterval()的用法

1、JavaScript中定时器setInterval()的用法 1.1 html代码开始       停止 0 1.2 style代码 #container { margin: 0 auto; width: 200px; height: 100px;
复制链接

扫一扫

专栏目录