javaScript中setInterval（）计时器_js setinterval 时钟-CSDN博客

本文介绍了setInterval()方法的基本用法及语法，并通过两个实例——动态时钟和随机点名，展示了如何在网页上使用该方法实现定时更新内容和定时触发事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

setInterval（）概述

setInterval() 方法在每个给定的计时事件中重复一个代码块

setInterval（）常用语法

setInterval(function, milliseconds);

function 是包含代码块的函数

milliseconds 是时间间隔单位是毫秒

setInterval（）方法的停止 --> clearInterval （）

clearInterval() 方法可取消由 setInterval() 设置的 timeout

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值

setInterval()运用

动态时钟

		<span id="td">
			
		</span>
        <script type="text/javascript">
        	//动态时钟
			setInterval(function(){
				
				var date = new Date()
				// 获取年份
				var year = date.getFullYear()
				//获取月份
				var month = date.getMonth()
				// 获取日
				var dates = date.getDate()
				//获取小时
				var hours =  date.getHours()
				// 获取分钟
				var mit = date.getMinutes()
				// 获取秒
				var seconds = date.getSeconds()
				
                //小时数小于10时就在前面加0
				month>9?month:"0"+month
				dates>9?dates:"0"+dates
				hours>9?hours:"0"+hours
				mit>9?mit:"0"+mit
				seconds>9?seconds:"0"+seconds
				//将获取的时间信息以不同的形式展示
				var result = year +"年" +month + "月" + dates + "日 " + hours + ":"+  mit +":" + seconds;
                //在id为td的控件中进行显示
				 document.getElementById("td").innerHTML  = result
				
			},1000)

</script>

随机点名

 	    <input type="text" name="" id="name" value=""  />
        <input type="button" name="" id="in" value="开始" />
		<input type="button" name="" id="end" value="停止" />
		<span id="td">
			
		</span>
		<script type="text/javascript">
                //随机点名的所有名字
             var a = ["张三","李四","王五","赵六","小明","小白"]

            //定义一个变量用来接收serInterval
		  var times 
            //id为in的控件的点击事件
		  document.getElementById("in").onclick = function(){
			  //计时器
			 times =  setInterval(function(){
			  	//随机数组的下标
			  	var c = Math.floor(Math.random()*a.length)
			  	//在固定位置展示
			  	document.getElementById("name").value = a[c]
			  	
			  },50)
		  }
		//停止按钮点击事件
		document.getElementById("end").onclick = function(){
			        //停止计时器
					 clearInterval(times)
		}
</script>