倒计时发送短信小案例以及this指向

最新推荐文章于 2023-12-06 15:44:04 发布

Ednburgh-

最新推荐文章于 2023-12-06 15:44:04 发布

阅读量178

点赞数 1

文章标签： javascript 前端 css html

本文链接：https://blog.csdn.net/m0_71345904/article/details/125546482

版权

这篇博客探讨了JavaScript中的倒计时实现，详细解释了如何在倒计时结束后触发短信发送，并深入讨论了this的指向问题。包括在方法、单独使用、函数和事件中的不同行为，强调了this在不同上下文中的变化特点。

摘要由CSDN通过智能技术生成

一，倒计时

核心逻辑：设置倒计时，用if做判断，倒计时结束发送短信，把短信内容赋值给留言板。

代码展示

<body>
		<input type="text">
		<input type="button" id="btn" value="发送信息">
	<textarea name="" id="area" cols="30" rows="10"></textarea>
		<script type="text/javascript">
        var btn=document.getElementById('btn');
		var text=document.querySelector('input');
		var area=document.querySelector('#area')
		btn.onclick=function(){
			var time=5;
			var s=setInterval(function(){
            if(time==0){
				btn.disabled=false;
				 clearInterval(s);
				btn.value='发送信息'
                text.value==area.value;
				area.innerHTML=text.value


			}else{
				btn.disabled=true;
				btn.value=time
				time--
			}
			},1000)
		}

效果展示

二， this指向问题

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
console.log(this)

1，方法中的 this

在对象方法中， this 指向调用它所在方法的对象。

在上面一个实例中，this 表示 person 对象。

fullName 方法所属的对象就是 person。

fullName : function() {
  return this.firstName + " " + this.lastName;
}

2，单独使用 this

单独使用 this，则它指向全局(Global)对象。

在浏览器中，window 就是该全局对象为 [object Window]:

var x=0;
console.log(this);

3，函数中使用 this（默认）

在函数中，函数的所属者默认绑定到 this 上。

在浏览器中，window 就是该全局对象为 [object Window]:

function obj(){
	return this
	
}
console.log(this);

4，事件中的 this

在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素：

<body>
	<p>点我就消失</p>
</body>
<script>
	var p = document.querySelector('p');
	p.onclick = function () {
		this.style.display = 'none'
		console.log(this);
	}



</script>

Ednburgh-

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
倒计时发送短信小案例以及this指向

目录一，倒计时二， this指向问题1，方法中的 this2，单独使用 this3，函数中使用 this（默认）4，事件中的 this代码展示效果展示面向对象语言中 this 表示当前对象的一个引用。但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。在对象方法中， this 指向调用它所在方法的对象。在上面一个实例中，this 表示 person 对象。fullName 方法所属的对象就是 person。2，单独使用 this单独使用 th
复制链接

扫一扫