JS setInterval()/setTimeout()——实现动态时间，倒计时

最新推荐文章于 2024-05-01 15:56:17 发布
最新推荐文章于 2024-05-01 15:56:17 发布
阅读量9.4k 收藏 23
点赞数 12
分类专栏： JavaScript 前端 文章标签： JavaScript 动态时间 setTimeout() setInterval() 倒计时
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44388523/article/details/86020486
版权

一、动态时间

1.setInterval() 实现

html部分：

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 300px;
			height: 50px;
			color: orange;
			line-height: 50px;
			text-align: center;
			font-size:20px;
			border:1px solid #888;
			margin:10px auto  
		}
	</style>
</head>
<body>
	<div id="box">  </div>
</body>

JS部分：
先获取年月日、时分秒，再补0，最后动态显示时间

function showTime(){
    // 1.获取时间对象
	var date = new Date();
	// 2.获取年月日、时分秒
	var year = date.getFullYear();
	var month = date.getMonth() + 1;
	var day = date.getDate();
	var hour = date.getHours();
	var minute = date.getMinutes();
	var second = date.getSeconds();
	// 3.给小于10的数字前补0
/*		if(hour<10){
		hour = '0' + hour;
	}
	if(minute<10){
		minute = '0' + minute;
	}
	if(second<10){
		second = '0' + second;
	}*/
	// 封装成函数
	month=addZero(month);
	day=addZero(day);
	hour=addZero(hour);
	minute=addZero(minute);
	second=addZero(second);
	// 4.拼接字符串（此处需注意，必须拼接一个字符串，空串也行，否则将会变成数字相加）
	var time = year + '年' + month + '月' + day + ' ' + hour + ':' + minute + ':' + second;
	document.getElementById('box').innerHTML = time;
}
// 为数字添加0前缀
function addZero(num){
	if(num<10){
		num='0'+num;
	}
	return num;
}
// 先调用一次
showTime();  //目的：衔接，
setInterval(showTime,1000);  //每1s执行一次代码(所以开始执行的时候会间隔1s)

2.setTimeout() 实现

function getTime(){
	var date = new Date();
	var year = date.getFullYear();
	var month = date.getMonth() + 1;
	var day = date.getDate();
	var hour = date.getHours();
	var minute = date.getMinutes();
	var second = date.getSeconds();

	// 封装成函数
	month=addZero(month);
	day=addZero(day);
	hour=addZero(hour);
	minute=addZero(minute);
	second=addZero(second);

	var time = year + '年' + month + '月' + day + ' ' + hour + ':' + minute + ':' + second;
	document.getElementById('box').innerHTML = time;
	setTimeout(getTime,1000);
}
// 为数字添加0前缀
function addZero(num){
	if(num<10){
		num='0'+num;
	}
	return num;
}
getTime();  //函数必须调用，否则不执行！！

二、倒计时

获取当前时间，通过传参的方式获取结束时间，分别使用getTime()获取GMT时间，计算GMT时间差值，计算出差值所对应的时、分、秒等。

function showTime(){
	var date = new Date();  //获取当前时间
	var now = date.getTime();  //获取当前GMT时间 
	//dateObject.getTime()，dateObject指定的日期和时间距 1970年 1月 1日午夜（GMT 时间）之间的毫秒数。
	var endDate = new Date("2019-1-9 00:00:00");  //获取结束时间
	var end = endDate.getTime();  //获取结束GMT时间
	var diffTime = end - now;  //计算时间差
	console.log(diffTime);
	var d,h,m,s,ms;
	if(diffTime>=0){
		ms = Math.floor(diffTime % 1000);  
		console.log(ms);
		s = Math.floor(diffTime / 1000 % 60);
		m = Math.floor(diffTime / 1000 / 60 % 60);
		h = Math.floor(diffTime / 1000 / 60 / 60 % 24);
		d = Math.floor(diffTime / 1000 / 60 / 60 / 24);
		
		// 封装成函数
		d=addZero(d);
		h=addZero(h);
		m=addZero(m);
		s=addZero(s);
		if(ms<100){
			ms = '0' + ms;
			if(ms<10){
			ms = '00' + ms;
			}
		}
		
		var time = d + '天' + h + '时' + m + '分' + s + '秒' + ms + '毫秒';
		document.getElementById('box').innerHTML = time;
	}else{
		alert("倒计时结束！！");
	}
}
// 为数字添加0前缀
function addZero(num){
	if(num<10){
		num='0'+num;
	}
	return num;
}
showTime();
setInterval(showTime,1000);
看都看到这了，来个炫酷三连击 ——点赞、收藏、留言。
足各路
关注
  • 12
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
定时器
weixin_48912846的博客
01-18 323
setTimeout( )定时器 语法规范：window.setTimeout(调用函数,[延迟的毫秒数]) ①window在调用的时候可以省略 setTimeout( )方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。 setTimeout(function(){ console.log('时间到了') },2000) ②这个延迟时间单位是毫秒 但是可以省略，如果省略默认的是0 ③这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 ‘函数名()’【不太建议】 //直接写函数 set
自己实现一个高性能的setTimeout和setInterval函数
baidu_28196435的博客
01-21 1204
自己实现一个高性能的setTimeout和setInterval函数浏览器默认提供的setTimeout和setInterval的问题requestAnimationFrame简单介绍setTimeout的实现setInterval的实现结语 浏览器默认提供的setTimeout和setInterval的问题 首先在针对浏览器端的默认实现中，setTimeout和setInterval的定时是不准...
setTimeout实现setInterval
weixin_44761091的博客
04-06 2711
文章目录一、setInterval存在的问题二、setTimeout实现SetInterval 一、setInterval存在的问题 直接例子： let startTime = new Date().getTime(); let count = 0; setInterval(function () { count++; console.log( `与原设定的间隔时差了${ new Date().g
JavaScript 中 setInterval 函数
最新发布
ultramand的博客
05-01 315
是 JavaScript 中的一个函数，用于周期性地执行指定的函数或代码块。它接受一个函数和一个时间间隔作为参数，并在每个时间间隔之后重复执行该函数。是一个用于周期性重复执行指定代码的函数。它会在指定的时间间隔内重复执行指定的函数或代码块，直到被清除。函数，每隔 1000 毫秒（1 秒）执行一次。函数返回一个唯一的标识符，可以使用该标识符来清除定时器，即停止周期性执行。是 JavaScript 的一个全局函数，用于周期性地执行指定的函数或代码块。的函数，用于打印计数器的值并递增计数器。
前端知识点——常见手撕题
m0_49997078的博客
04-05 1690
前端常见手撕题
Web笔记之JavaScript
Mr__Zhang___的博客
04-03 1148
隐式转换 当字符串型遇到 减号，乘号，除号 时，字符串型会转换为数字型，例如：var age = '12' - 12，age 的结果为0。不要直接判断两个浮点数是否相等(因为浮点数有误差) 逻辑与中断 语法：表达式1 && 表达式2 如果 表达式1 为真，则返回 表达式2 如果 表达式1 为假，则返回 表达式1 逻辑或中断 语法：表达式1 ||表达式2 如果 表达式1 为真，则返回 表达式1 如果 表达式1 为假，则返回 表达式2逻辑与的优先级比逻辑或的优先级高 argumen.
动态时钟，利用setInterval
03-31
初学js
html5利用setInterval实现新年元旦倒计时
12-14
html5利用setInterval实现新年元旦倒计时
5秒后跳转效果(setInterval/SetTimeOut)
09-05
`setInterval` 和 `setTimeout` 是JavaScript中的两个重要函数，常用于定时任务的执行，包括实现5秒后的自动跳转效果。下面将详细解释这两个函数的工作原理以及如何在实际应用中使用它们。 首先，`setInterval` ...
Javascript/Jquery——简单定时器的多种实现方法
10-27
JavaScript 和 jQuery 提供了两种主要的方法来实现定时器：`setInterval` 和 `setTimeout`。在本文中，我们将深入探讨这两种方法以及它们的不同用法，同时还会介绍一个使用 `setTimeout` 的可停止计时器的例子。 ##...
JavaScript实现时间倒计时跳转(推荐)
01-21
如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。 <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> ...
js实现指定时间倒计时效果
10-16
主要为大家详细介绍了js实现指定时间倒计时效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
[ JavaScript实现动态显示时间效果：setInterval定时器的使用 ]
qq_47654010的博客
08-09 1072
JavaScript实现动态显示时间效果 知识点 Timing事件之 setInterval()方法： 效果 上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum
setTimeOut、setInterval互相实现
qq_36582776的博客
04-05 295
setTimeOut实现setInterval：递归调用 timerFn() function timerFn(){ console.log("1")//要执行的代码 var timer=setTimeout(() => {//间隔一定时间递归执行一次 timerFn() clearInterval(timer) }, 1000); } setInterval实现setTimeOut：内部清除定时器 var timer=setIn
js 使用setInterval()实现实时刷新
旭东怪的博客
09-22 3721
1 使用详解 （1）setInterval() 说明：可按照指定的周期（以毫秒计）来调用函数或计算表达式。 语法： window.setInterval(code,millisec); 参数： code，要调用的函数或要执行的代码串。 millisec，周期性执行或调用 code 之间的时间间隔，以毫秒计。 返回值： 一个可以传递给 window.clearInterval() 从而取消对 code 的周期性执行的值。 （2）clearInterval() 说明：取消对 code 的周
js定时器做倒计时
qq_42952147的博客
09-03 1228
最近有个需求，要求此静态页面实现倒计时功能 先上图: 分析需求: 这种肯定是用到定时器了，选用了setTime间隔1秒调用自身函数，每次更改文本的值 <span>00</span>天<span id="jq_hour">0</span>小时<span id="jq_minute">1</span>分<span id...
js使用setInterval实现倒计时
热门推荐
itmyhome的专栏
05-19 1万+
利用setInterval制作简单的js倒计时，点击按钮将触发定时器且按钮不可用html：获取校验码JS： var i; function getCode(){ $("#code").attr({"disabled":"disabled"}); i = self.setInterval("countdown()", 1000); } var int = 1
JS实现考试题目系统倒计时自动交卷（转载）
qq_37662419的博客
04-07 1928
JS实现考试题目系统倒计时自动交卷（转载）自动交卷JS代码(微改) 自动交卷JS代码(微改) 目前为60分钟自动执行BT_JJ(Button)按钮点击事件，时间显示在LB_JS（Label）中 <script type="text/javascript"> var sec=0; var min=0; var hou=0; ...
js实现html页面倒计30秒,javascript实现简单页面倒计时
weixin_39710003的博客
06-08 840
本文实例为大家分享了javascript实现简单页面倒计时的具体代码，供大家参考，具体内容如下话不多说，直接贴代码body{color:red;text-align: center;}.one{color:black;text-align:center;}日期倒计时请输入目标日期并点击按钮，实现目标日期的倒计时！年月日时分秒function getdate(clock){var now=new D...
setInterval/setTimeout两者在JS中有什么区别
05-31
`setTimeout` 和 `setInterval` 都是 JavaScript 中用于定时执行代码的函数，但它们之间存在一些区别。 区别如下： 1. `setTimeout` 函数会在指定的时间后执行一次代码，而 `setInterval` 函数会每隔指定的时间就...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值