发表于： 2022-12-29 20:40:56
0 341
今天学习的js知识点:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发送短信</title>
<style></style>
</head>
<body>
手机号码： <input type="number"><button>点击发送</button>
<script>
var btn = document.querySelector('button');
var time = 5;
btn.addEventListener('click', function () {
//disabled 表示任何被禁用的元素
this.disabled = true;
var timer = setInterval(function () {
if( time == 0 ) {
// 清除定时器和复原按钮
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '点击发送';
time = 5; // 这个数值需要重新开始
} else {
btn.innerHTML = '还剩下' + time + '秒';
time--;
}
},1000)})
//开启与停止的效果
var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null; //全局变量 null是一个空对象
begin.addEventListener('click', function () {
//开启定时器
timer = setInterval(function () {
console.log('你好');
},1000)
})
stop.addEventListener('click', function () {
//停止定时器
clearInterval(timer);
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>点击</button>
<script>
//this 指向问题 一般情况下this的最终指向的是内鬼调用它的对象
//1、全局作用域或者普通函数中 this 指向全局对象 window (注意定时器里面的this指向window)
console.log(this); //指向window
function fn() {
console.log(this); //指向window
}
fn();
// setInterval(function () {
// console.log(this); //指向window
// },1000)
//2、方法调用中调用this指向谁
var o = {
a: function () {
console.log(this); //指向的是 o 这个对象
}
}
o.a();
var btn = document.querySelector('button');
// btn.onclick = function () {
// console.log(this); //指向的是 btn 这个按钮对象
// }
btn.addEventListener('click',function (){
console.log(this); //指向的是 btn 这个按钮对象
})
//3、构造函数中this指向构造函数的实例
function Fun() {
console.log(this); //this 指向的是fun 实例对象
}
var fun = new Fun();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js同步和异步</title>
</head>
<body>
<script>
//同步："同步模式"就是后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的
// 异步模式"则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，"
// "而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。
//他们的本质区别：这条流水线上各个执行顺序不同
// console.log(1);
// setInterval(function (){
// console.log(3)
// },2000)
// console.log(2);
//执行顺序 1 -- 2 隔2秒之后才执行3
//2、同步任务
// 执行机制
//1.先执行同步任务
//2.异步任务（回调函数）放到任务列队中
//3.一旦执行栈中的同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，被读取的异步任务就会开始执行
// console.log(1);
// setInterval(function (){
// console.log(3)
// },0)
// console.log(2);
console.log(1);
document.onclick = function () {
console.log('click');
}
console.log(2);
setInterval(function () {
console.log(3);
},3000)
</script>
</body>
</html>
明天计划:完成接下来的任务
返回列表
评论