Skip to content

Commit f710703

Browse files
LinJingOKLinJingOK
committed
新增加js学习笔记
1 parent c799eb7 commit f710703

File tree

293 files changed

+40586
-69
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

293 files changed

+40586
-69
lines changed

‎.idea/workspace.xml

+200-66
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎08-排他思想/06-tab栏切换.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,7 @@
6969
lis[i].className = '';
7070
}
7171
//留下自己
72-
this.className = 'current';
73-
72+
this.className = 'current'
7473

7574
//2.下面的显示内容模块
7675
var index = this.getAttribute('index');

‎09-节点操作/20-常用的键盘事件.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@
2323
document.addEventListener('keydown', function () {
2424
console.log('我按下了press');
2525
})
26-
//4.三个事件的执行顺序是:keydown-- keypress ---keyup
26+
//4.三个事件的执行顺序是:keydown-- keypress ---keyup:
27+
2728
</script>
2829
</body>
2930
</html>

‎10-键盘事件对象/02-键盘事件对象之keyCode属性.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang = "en">
3+
<head>
4+
<meta charset = "UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<script>
9+
//键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
10+
document.addEventListener('keyup',function (e) {
11+
// console.log(e);
12+
console.log('up',e.keyCode);
13+
//1.keyuphe keydown 事件不区分字母大小写 a和A得到的是65
14+
//2.keypress 事件区分字母大小写 a 97 和 A 65
15+
})
16+
document.addEventListener('keypress',function (e) {
17+
// console.log(e);
18+
console.log('press',e.keyCode);
19+
})
20+
</script>
21+
</body>
22+
</html>

‎10-键盘事件对象/03-模拟京东按键输入内容.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang = "en">
3+
<head>
4+
<meta charset = "UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<input type = "text">
9+
<script>
10+
// 1.核心思路︰检测用户是否按下了s键，如果按下s键，就把光标定位到搜索框里面
11+
// 2.使用键盘事件对象里面的keyCode判断用户按下的是否是s键
12+
// 3.搜索框获得焦点:使用js里面的 focus)方法
13+
14+
var search = document.querySelector('input');
15+
document.addEventListener('keyup',function (e) {
16+
if (e.keyCode === 83) {
17+
search.focus();
18+
}
19+
})
20+
</script>
21+
</body>
22+
</html>

‎10-键盘事件对象/04-模拟京东快递单号查询.html

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang = "en">
3+
<head>
4+
<meta charset = "UTF-8">
5+
<title>Title</title>
6+
<style>
7+
.con {
8+
display: none;
9+
position: absolute;
10+
top: -40px;
11+
width: 171px;
12+
border: 1px solid rgba(0, 0, 0, .2);
13+
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
14+
padding: 5px 0;
15+
font-size: 18px;
16+
line-height: 20px;
17+
color: #333333;
18+
}
19+
.search {
20+
position: relative;
21+
width: 178px;
22+
margin: 100px;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<div class="search">
28+
<div class="con">123</div>
29+
<input type = "text" placeholder="请输入您的快递单号" class="jd">
30+
</div>
31+
<script>
32+
//快递单号输入内容时，上面的大号字体盒子（con）显示(这里面的字号更大)
33+
// 表单检测用户输入:给表单添加键盘事件
34+
//同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
35+
// 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
36+
var con = document.querySelector('.con');
37+
var jd_input = document.querySelector('.jd');
38+
jd_input.addEventListener('keyup', function () {
39+
if (this.value == '') {
40+
con.style.display = 'none';
41+
} else {
42+
con.style.display = 'block';
43+
con.innerHTML = this.value;
44+
}
45+
})
46+
47+
//当失去焦点，隐藏这个con盒子
48+
jd_input.addEventListener('blur', function () {
49+
con.style.display = 'none';
50+
})
51+
//当获得焦点，显示这个con盒子
52+
jd_input.addEventListener('focus', function() {
53+
if (this.value !== '') {
54+
con.style.display = 'block';
55+
}
56+
})
57+
</script>
58+
</body>
59+
</html>

‎10-键盘事件对象/05-dom常见事件onload.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang = "en">
3+
<head>
4+
<meta charset = "UTF-8">
5+
<title>Title</title>
6+
7+
</head>
8+
<body>
9+
10+
<button>点击</button>
11+
<script>
12+
var btn = document.querySelector('button');
13+
btn.addEventListener('click', function () {
14+
alert('点击')
15+
})
16+
</script>
17+
18+
</body>
19+
</html>

‎10-键盘事件对象/06-window常见事件onload.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang = "en">
3+
<head>
4+
<meta charset = "UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<script>
9+
window.onload = function () {
10+
var btn = document.querySelector('button');
11+
btn.addEventListener('click', function () {
12+
alert('点击')
13+
})
14+
};
15+
16+
window.onload = function () {
17+
alert(22); //onload只执行最后一个
18+
};
19+
20+
window.addEventListener('load', function () {
21+
alert(33);
22+
});
23+
24+
document.addEventListener('DOMContentLoaded', function () {
25+
alert(44);
26+
})
27+
//load是等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等
28+
//DOMContent 是DOM加载完毕，不包含图片flash css 等就可以执行，加载速度比load快
29+
</script>
30+
<button>点击</button>
31+
</body>
32+
</html>

‎10-键盘事件对象/12-倒计时效果.html

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang = "en">
3+
<head>
4+
<meta charset = "UTF-8">
5+
<title>Title</title>
6+
<style>
7+
span {
8+
width: 200px;
9+
height: 200px;
10+
background-color: lightcoral;
11+
color: cornsilk;
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<div>
17+
<span class="hour">1</span>:
18+
<span class="minute">2</span>:
19+
<span class="second">3</span>
20+
</div>
21+
<script>
22+
//1.获取元素
23+
var hour = document.querySelector('.hour');
24+
var minute = document.querySelector('.minute');
25+
var second = document.querySelector('.second');
26+
var inputTime = +new Date('2021-1-5 21:00:00'); //返回的是用户输入时间总的毫秒数
27+
countDown(); //先调用一次这个函数，防止第一次刷新页面有空白
28+
//2.开启定时器
29+
setInterval(countDown, 1000);
30+
function countDown(){
31+
var nowTime = +new Date();
32+
var times = (inputTime - nowTime) / 1000; //times是剩余时间的总秒数
33+
var h = parseInt(times / 60 /60 % 24);
34+
h = h < 10 ? '0' + h : h;
35+
hour.innerHTML = h;
36+
var m = parseInt(times / 60 % 60);
37+
m = m < 10 ? '0' + m : m;
38+
minute.innerHTML = m;
39+
var s = parseInt(times % 60);
40+
s = s < 10 ? '0' + s : s;
41+
second.innerHTML = s;
42+
43+
}
44+
45+
</script>
46+
</body>
47+
</html>

‎10-键盘事件对象/13-清除setInterval定时器.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang = "en">
3+
<head>
4+
<meta charset = "UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<button class="begin">开启定时器</button>
9+
<button class="stop">停止定时器</button>
10+
<script>
11+
var begin = document.querySelector('.begin');
12+
var stop = document.querySelector('.stop');
13+
var timer = null; //全局变量 null是一个空对象
14+
begin.addEventListener('click', function () {
15+
timer = setInterval(function () {
16+
console.log('nihao')
17+
}, 1000)
18+
})
19+
stop.addEventListener('click',function () {
20+
clearInterval(timer);
21+
})
22+
</script>
23+
</body>
24+
</html>

‎10-键盘事件对象/14-发送短信案例.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang = "en">
3+
<head>
4+
<meta charset = "UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
手机号码： <input type = "number"> <button>发送</button>
9+
<script>
10+
//按钮点击之后，会禁用disabled 为true
11+
//同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改
12+
// 里面秒数是有变化的，因此需要用到定时器
13+
//定义一个变量，在定时器里面，不断递减
14+
//如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
15+
var btn = document.querySelector('button');
16+
var time = 3;
17+
btn.addEventListener('click', function () {
18+
btn.disabled = true;
19+
var timer = setInterval(function () {
20+
if (time == -1) {
21+
clearInterval(timer);
22+
btn.disabled = false;
23+
btn.innerHTML = '发送';
24+
time = 3;
25+
}else {
26+
btn.innerHTML = '还剩下' + time + '秒';
27+
time--;
28+
}
29+
}, 1000)
30+
})
31+
</script>
32+
</body>
33+
</html>

‎10-键盘事件对象/15-this指向问题.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang = "en">
3+
<head>
4+
<meta charset = "UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<button>点击</button>
9+
<script>
10+
//this指向问题 一般情况下 this的最终执行那个的是哪个调用他的对象
11+
// 1．全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window)
12+
console.log(this);//window
13+
function fn() {
14+
console.log(this); //window
15+
}
16+
window.fn();
17+
18+
window.setTimeout(function () {
19+
console.log(this);
20+
}, 1000);
21+
// 2．方法调用中谁调用this指向谁
22+
var o = {
23+
sayHi: function () {
24+
console.log(this); //this指向的是o这个对象
25+
}
26+
}
27+
o.sayHi();
28+
29+
var btn = document.querySelector('button');
30+
// btn.onclick = function () {
31+
// console.log(this); //this指向的是btn这个按钮对象
32+
// }
33+
btn.addEventListener('click', function () {
34+
console.log(this); //this指向的是fun实例对象
35+
})
36+
37+
// 3．构造函数中this指向构造函数的实例
38+
function Fun() {
39+
console.log(this); //指向fun
40+
}
41+
var fun = new Fun();
42+
43+
</script>
44+
</body>
45+
</html>

‎10-键盘事件对象/16-js的执行机制.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang = "en">
3+
<head>
4+
<meta charset = "UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<script>
9+
// console. log (1);
10+
// setTimeout ( function (){
11+
// console. log ( 3);
12+
// }, 1000) ;
13+
// console . log (2);
14+
15+
console. log (1);
16+
setTimeout ( function (){
17+
console. log ( 3);
18+
}, 0) ;
19+
console . log (2);
20+
</script>
21+
</body>
22+
</html>

0 commit comments

Comments
 (0)