js中定时器setInterval() setTimeout()的使用及区别

最新推荐文章于 2025-05-29 23:26:41 发布

红斗笠

最新推荐文章于 2025-05-29 23:26:41 发布

阅读量349

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_38061311/article/details/87694580

本文深入探讨了JavaScript中的定时器函数setInterval和setTimeout的使用方法，通过实例演示了如何实现页面上的实时时间显示，以及如何在指定时间后执行特定任务。

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

setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setTimeout() ：在指定的毫秒数后调用函数或计算表达式。

js定时器代码
1.

<script language="javascript">
		function count() {
		document.getElementById('m').innerHTML="计时已经开始！";
		setTimeout("alert('1秒钟到！')",1000)
		}
	</script>

<div id="m"></div> 
<input type="button" value=" 计时开始" onclick="count()">

<div>
	<input type="button" value="循环开始" onclick="xun()">
	<div id="word" style="color:red;margin-left: 500px;font-size:60px;"></div>
</div>

定时器
http://www.runoob.com/w3cnote/js-timer.html 定时器

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
      <head>
        <base href="<%=basePath%>">
    
    <title>My JSP 'dingshiqi.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
    <!--1. setInterval() -->
	 <script type="text/javascript">
		var int=self.setInterval("clock()",1000);
		function clock(){
			var d=new Date();
			var t=d.toLocaleTimeString();
			document.getElementById("clock").value=t;
		}
	 </script> 
	 
	 
	 <!--2. 转化date对象的格式 --> 
	  <script type="text/javascript">   
	 	var int2=self.setInterval("clock2()",1000);
	 	function clock2(){
			var d2=new Date();
			var time = d2.toLocaleTimeString();//将本地时间把 Date对象的时间部分转换为字符串，并返回结果。
	 		var dayTime = time.substring(0, 2) // 当前time类型 ，上午和下午
			var currentTime = time.substring(2, time.length) // 当前时间（只保留后面时间戳）
			
			if (dayTime === '下午') { // 对下午的时间进行操作
				var timeList = currentTime.split(':') // 转化为数组
				timeList[0] = Number(timeList[0]) + 12 // 第0个数组为当前小时数， + 12
				currentTime = timeList.toString().replace(/,/g, ':') // 转化为标准时间格式 00:00:00
				document.getElementById("clock2").value=currentTime;
				console.log("进入下午的判断");
			}else if((dayTime === '上午')){
					var dd=new Date();
					var tt=dd.toLocaleTimeString();
					document.getElementById("clock2").value=tt;
					console.log("进入上午的判断"+"dd:"+dd+"tt:"+tt);
			}
		} 
	  </script>   
	  <input type="text" id="clock" />  
	  <input type="text" id="clock2" /><!--转化格式  -->
	  <button onclick="int=window.clearInterval(int)">停止</button>  
	  <button onclick="int2=window.clearInterval(int2)">停止2</button>
	  
	  
	  <!--3. setTimeout() -->
	 <p>点击按钮，在等待 1 秒后弹出 "Hello"。</p>
	 <button onclick="myFunction()">点我</button>
	
	<script>
		function myFunction(){
		    setTimeout(
		    	function(){
		    		alert("Hello")
		    	},1000
		    );
		}
	</script>
	<b>写上你想写的字</b>
	<strong>写上你想写的字2</strong>
  </body>  
</html>