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

约定不等于承诺〃 2022-08-22 00:01 159阅读 0赞

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

![20160506215910687][]

[20160506215910687]: /images/20220724/45e2df165cea43348dc6aee0385df170.png

发表评论取消回复

表情：

评论列表（有 0 条评论，159人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript定时器setTimeout和setInterval()以及清除定时器

JavaScript定时器setTimeout和setInterval window对象提供了两种好用的计时器：setTimeout()和setInterval()

我就是我/ 2022年12月25日 11:53/ 0 赞/ 241 阅读

相关 python定时器的用法

很多场景下存在需要定时操作的功能，比如定时进行写入操作或者获取数据。我主要是用来定时获取配置的，然后达到更新配置的目的。代码参考如下： import thre

╰+哭是因爲堅強的太久メ/ 2022年10月19日 04:28/ 0 赞/ 19 阅读

相关 java定时器用法

1、代码示例 //继承TimerTask public class TestTimerTask extends TimerTask{

男娘i/ 2022年09月26日 03:55/ 0 赞/ 197 阅读

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

1、JavaScript中定时器setInterval()的用法 1.1 html代码 <body> <div id="container"

约定不等于承诺〃/ 2022年08月22日 00:01/ 0 赞/ 160 阅读

相关 js中setInterval与setTimeout用法

原文：[http://blog.sina.com.cn/s/blog\_6b1ab3be0100pzmo.html][http_blog.sina.com.cn_s_blog_

电玩女神/ 2022年08月06日 08:29/ 0 赞/ 275 阅读

相关 MFC 定时器用法

MFC定时器的使用 1.在头文件定义一个afx\_msg void OnTimer(UINT\_PTR nIDEvent)函数定义一个定时

Love The Way You Lie/ 2022年06月15日 03:44/ 0 赞/ 225 阅读

相关 SpringMVC中的定时器@Scheduled用法

@Component public class missingTask { / 定时任务 0/5 ? CronTri

清疚/ 2022年05月26日 23:48/ 0 赞/ 215 阅读

相关 ScheduledExecutorService 定时器用法

原文：[http://www.cnblogs.com/junrong624/p/5504711.html][http_www.cnblogs.com_junrong624_p_

约定不等于承诺〃/ 2022年05月15日 11:37/ 0 赞/ 204 阅读

相关 spring中的quartz(定时器)的用法

quartz-all-2.1.1.jar 1.配置信息 <!-- <bean class="org.cs.task.CreatorsTask" init-m

布满荆棘的人生/ 2022年01月26日 00:05/ 0 赞/ 538 阅读

相关 Javascript 中 setInterval 函数怎么用？

Javascript 中 setInterval 函数怎么用？使用示例你可以通过调用一个已命名的函数，每三秒（3000 毫秒）弹出 “Hello”:

朱雀/ 2020年07月01日 20:22/ 0 赞/ 729 阅读