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

约定不等于承诺〃 2022-08-22 00:01 103阅读 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 条评论，103人围观）

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

相关阅读

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

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

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

相关 java定时器用法

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

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

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

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

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

相关 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 赞/ 206 阅读

相关 JAVA中定时器的几种用法

package com.kevin; import java.util.Calendar; import java.util.Date

本是古典何须时尚/ 2022年07月24日 08:19/ 0 赞/ 151 阅读

相关 MFC 定时器用法

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

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

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

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

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

相关 JavaScript中的setInterval()和setTimeout()

1.setlnterval() setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到

水深无声/ 2022年04月05日 03:50/ 0 赞/ 187 阅读

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

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

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

相关 Javascript 中 setInterval 函数怎么用？

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

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