BOM对象之两个定时器案例

原创已于 2022-06-30 15:51:09 修改 · 154 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-06-30 15:14:10 首次发布

本文详细介绍了JavaScript中的setTimeout和setInterval两个定时器的使用，以及如何实现页面倒计时功能。通过实例代码展示了定时器的清除方法，并探讨了this关键字在不同场景下的指向。此外，还讲解了实现发送短信验证码倒计时的逻辑，并利用location对象实现页面跳转的方法。

两个定时器

setTimeout()

定时器，在延迟多少毫秒执行函数，只执行一次

第一个参数：调用的函数；

第二个参数：延时的毫秒数,默认是0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两个定时器</title>
</head>
<body>
    <div>5s后消失</div>
    <script>
        //第一个定时器
        var div=document.querySelector('div');
        var time1=setTimeout(function(){
            div.style.display='none';
        },5000)
        //清除定时器
        clearTimeout(time1);

        
        

    </script>
</body>
</html>

清除定时器，清除之前需要创建定时器。

clearTimeout(timeout);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两个定时器</title>
</head>
<body>
    <div>5s后消失</div>
    <script>
        // //第一个定时器
        // var div=document.querySelector('div');
        // var time1=setTimeout(function(){
        //     div.style.display='none';
        // },5000)
        // //清除定时器
        // clearTimeout(time1);

        //第二个定时器
        var i=0;
        var time2=setInterval(function(){
             i++;
            console.log(i);
        },1000);
        //4s后停止打印i
            setTimeout(function(){
                clearInterval(time2);
        },4000)
        

    </script>
</body>
</html>

setInterval()

每隔一段时间，都调用回调函数。

清除定时器，清除之前需要创建定时器。

clearInterval(myinterval);

页面倒计时

思路：获取目标日期与当期日期的时间差（毫秒）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面倒计时</title>
</head>
<body>
    <p><span>0</span>天<span>0</span>时<span>0</span>分<span>0</span>秒</p>
    <script>
        function showTime(){
        var spans=document.querySelectorAll('span');
        var endTime=new Date("2022-07-01 14:00:00").getTime();
        var currentTime=new Date().getTime();
        var time=(endTime-currentTime)/1000;
        var day=parseInt(time/60/60/24);
        var hour=parseInt(time/60/60%24);
        var minute=parseInt(time/60%60);
        var second=parseInt(time%60);
        spans[0].innerText=day;
        spans[1].innerText=hour;
        spans[2].innerText=minute;
        spans[3].innerText=second;
        }
        // 设置监听事件
        setInterval(showTime,1000);
    </script>
</body>
</html>

this指向

普通函数的this的通常指向的是那个调用它的对象。

1；全局作用域下的this

function fn() {

console.log(this);

}

fn()

2：对象身上的this

var person = {

realname:'张三',

say:function(){

console.log(this);

}

person.say();

3：构造函数的this

function person(realname,age){

this.realname = realname;

this.age = age;

this.say = function(){

console.log(this)

}

var p1 = new person('张三',19);

var p2 = new person('李四',18);

4：定时器下的this

var btn = document.getElementById("button");

btn.onclick = function(){

console.log(this);

setTimeout(function(){

console.log(this);

},1000）;

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="" id="btn" value="点击执行" />
		
		<script type="text/javascript">
			// 01全局作用域下的this
			//再全局下 直接打印 this指向的是 窗口顶级对象window  
			console.log('全局：',this);
			function demo(){
				console.log('demo:',this);//window
				// 这里的函数 其实也是再全局下调用的 相当于window.demo()  所以打印的结果还是window
			}
			demo();
			
			// 02 对象里面的this 指向
			//通过字面量形式创建一个对象
			var person = {
				realname:'张三',
				age:20,
				say:function(){
					console.log('说话');
					console.log(this);//指向的是当前对象本身 person
				}
			};
			console.log(person.realname);
			person.say();
			
			// 03构造函数里面的this指向问题 
			function Person(realname,age){
				this.realname = realname;
				this.age = age;
				this.say = function(){
					console.log('说话');
					console.log(this);//构造函数里面的this 指向的是实例化的这个对象 
					// 实例化指的是 new出来的实例
				}
			}
			var p1 = new Person('李四',22);
			var p2 = new Person('王武',23);
			p1.say();
			p2.say();
		//通过 01 02 03 总结 再普通函数里的this 通常指向是 那个调用它的对象
		// 即谁调用 this指向谁
		
		// 04 再定时器里面的this指向
		var btn= document.querySelector('#btn');
		btn.onclick = function(){
			console.log(this);//btn对象
			setTimeout(function(){
				console.log(this);//定时器 是window调用的 所以这里打印的是window
			},1000)
		}
			
		</script>
	</body>
</html>

实现发送短信的倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面倒计时</title>
</head>
<body>
    <p><span>0</span>天<span>0</span>时<span>0</span>分<span>0</span>秒</p>
    <script>
        function showTime(){
        var spans=document.querySelectorAll('span');
        var endTime=new Date("2022-07-01 14:00:00").getTime();
        var currentTime=new Date().getTime();
        var time=(endTime-currentTime)/1000;
        var day=parseInt(time/60/60/24);
        var hour=parseInt(time/60/60%24);
        var minute=parseInt(time/60%60);
        var second=parseInt(time%60);
        spans[0].innerText=day;
        spans[1].innerText=hour;
        spans[2].innerText=minute;
        spans[3].innerText=second;
        }
        // 设置监听事件
        setInterval(showTime,1000);
    </script>
</body>
</html>

location实现页面跳转

定义：window对象给我们提供一个location属于用来获取url与解析。

location对象的属性

location.href ：获取，设置，跳转url。

location.host ：获取域名 www.baidu.com

location.port : 获取端口号

location.pathname : 返回路径

Location.search : 返回参数比如: ?id=1&name=zs

location.hash ：返回片段，常用于锚链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>location对象</title>
</head>
<body>
    <div></div>
    <script>
        var div=document.querySelector('div');
        var time=5;
        setInterval(function(){
            if(time==0){
                location.href="http://www.baidu.com";
            }
            time--;
            div.innerText=time;
        },1000)
    </script>
</body>
</html>