前端简单定时器

绝地灬酷狼 2022-05-12 12:44 210阅读 0赞

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();							
    							}					
    						},