JavaScript 时间对象及方法及定时器、倒计时小案例

最新推荐文章于 2023-11-27 11:40:06 发布

我思,故我在

最新推荐文章于 2023-11-27 11:40:06 发布

阅读量391

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/zy25595/article/details/127507609

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

创建一个时间对象：

var date=new Date()

时间对象常用方法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			
			var date=new Date()
			console.log(date)
			
			//年 月 周几 日
			console.log(date.getFullYear())
			console.log(date.getMonth())
			console.log(date.getDay())
			console.log(date.getDate())
			
			//时 分 秒 毫秒
			console.log(date.getHours())
			console.log(date.getMinutes())
			console.log(date.getSeconds())
			console.log(date.getMilliseconds())
			
			//时间戳（距1970年1月1日0点毫秒数）
			console.log(date.getTime())
			
			//设置
			date.setFullYear(2025)
			date.setMonth(8)
			date.setDate(29)
			
			date.setHours(18)
			date.setMinutes(25)
			date.setSeconds(22)
			console.log(date)
			
			//设置具体某个时间的时间戳
			date.setTime(1666581517523)
			console.log(date)
			
			
		</script>
	</body>
</html>

定时器小案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id=btn1>清除延时</button>
		<button id=btn2>清除间隔</button>
		<div id="box"></div>
		<script>
			
			var time1=setTimeout(function() {
				console.log("我一秒后出来啦")
			}, 1000);	//延时
			
			var time2=setInterval(function(){
				console.log(new Date()+"诶~ 我又出来了 打我啊笨蛋")
			},1000)		//间隔
			
			// console.log(btn1,btn2)	//新版浏览器可以这样直接获取id属性
			
			btn1.onclick=function(){	//onclick 事件绑定
				console.log("stop!")
				//清除延时
				clearTimeout(time1)
			}
			
			btn2.onclick=function(){
				console.log("stop!")
				//清除间隔
				clearTimeout(time2)
			}
			
			
		</script>
	</body>
</html>

倒计时小案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="box"></div>
		<script>

			// var nowtime=new Date()
			var mbtime=new Date("2022/11/11")
			
			// console.log(mbtime-nowtime)
			
			function Time(now,mb){
				//秒
				var time=Math.ceil((mb-now)/1000)
				//天
				var day=parseInt(time/(60*60*24))
				//时
				var hours=parseInt((time%(60*60*24))/(60*60))
				//分
				var minutes=parseInt((time%(60*60))/60)
				//秒
				var seconds=time%60
				
				var obj={
					day:day,
					hours:hours,
					minutes:minutes,
					seconds:seconds
				}
				return obj
				
			}
			// Time(nowtime,mbtime)
			
			//setInterval 设置间隔定时器
			setInterval(function(){
				//将现在时间nowtime拿到这里面以实时刷新
				var nowtime=new Date()
				var res=Time(nowtime,mbtime)
				// document.write("距双11特惠活动还有"+res.day+"天"+res.hours+"小时"+res.minutes+"分钟"+res.seconds+"秒"+"<br>")
				box.innerHTML="距双11特惠活动还有"+res.day+"天"+res.hours+"小时"+res.minutes+"分钟"+res.seconds+"秒"+"<br>"
				//用一个盒子来以覆盖的方式显示
			},1000)
			
			
		</script>
	</body>
</html>