前端简单定时器

最新推荐文章于 2025-06-06 08:35:27 发布

原创最新推荐文章于 2025-06-06 08:35:27 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#定时器

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了使用JavaScript实现简单网页倒计时跳转的方法，并展示了如何在Vue.js中利用生命周期钩子来管理定时器，包括启动、更新及销毁等过程。

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

js简单定时器

<!doctype html>
　　<html>
　　　　<head>
　　　　　　<meta charset="utf-8">
　　　　　　<title>前端笔记</title>
　　　　　　<script type="text/javascript">
　　　　　　　　var time = 8; //时间,秒
　　　　　　　　function Redirect() {
 　　　　　　　　window.location = "http://www.cssue.com/";
　　　　　　　　}
　　　　　　　　var i = 0;
　　　　　　　　function dis() {
 　　　　　　　　document.all.s.innerHTML = "还剩" + (time - i) + "秒";
 　　　　　　　　i++;
　　　　　　　　}
　　　　　　　　timer = setInterval('dis()', 1000); //显示时间
　　　　　　　　timer = setTimeout('Redirect()', time * 1000); //跳转
　　　　　　</script>
　　</head>
　　<body>
　　　　<span id="s"></span>
　　</body>
</html>

部分vue代码

//实例创建生命周期函数
						//当vm实例的data和methods初始化完毕后，vm实例会自动执行created这个生命周期函数
						created() {
						
							console.log("开始时间"+this.timeNum+"秒");
							this.disTime();
							this.disDo();
						},
						//页面销毁定时器
						 beforeDestroy () {
						 	this.destroyDis();
   						 },
						
						methods: {
						
							//定时器计时
							disTime(){
								this.destroyDis();
							 //秒数减一
								this.timer=setInterval(()=>{
									this.timeNum--;
									console.log(this.timeNum+"秒");
								}, 1000); //显示时间								
							},
							//定时触发
							disDo(){
							//定时触发方法
      							this.timerOut = setTimeout(()=>{
      							
      							//超时相当于答题错误，直接成绩
      								this.saveGrade();
      							}, 20 * 1000); //跳转
							},
							//x销毁定时器
							destroyDis(){
								if(this.timer){
									clearTimeout(this.timerOut);
						 			clearInterval(this.timer);				 									 			
						 		}
							},
							againTime(){
								//重新定时触发
								this.timeNum=20;
								clearTimeout(this.timerOut);
								this.disDo();							
							}					
						},