Skip to content

Commit 493ad8a

Browse files
amydevyaamydevya
committed
new
1 parent 34105b4 commit 493ad8a

35 files changed

Lines changed: 660 additions & 0 deletions

‎10期JS正式课/正式课第三周/第二天/1.跑马灯.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style>
7+
*{
8+
margin:0;
9+
padding:0;
10+
list-style:none;
11+
}
12+
.box{
13+
width: 800px;
14+
height: 200px;
15+
margin:50px auto;
16+
position: relative;
17+
border: 5px dashed lightgreen;
18+
overflow: hidden;
19+
}
20+
.box ul{
21+
height: 100%;
22+
position: absolute;
23+
left:0;
24+
top:0;
25+
overflow: hidden;
26+
}
27+
.box ul li{
28+
float: left;
29+
width: 200px;
30+
height: 200px;
31+
}
32+
.box ul li img{
33+
display: block;
34+
width: 100%;
35+
height: 100%;
36+
}
37+
</style>
38+
</head>
39+
<body>
40+
<div class="box" id="box">
41+
<ul>
42+
<li><img src="img/1.jpg" alt=""/></li>
43+
<li><img src="img/2.jpg" alt=""/></li>
44+
<li><img src="img/3.jpg" alt=""/></li>
45+
<li><img src="img/4.jpg" alt=""/></li>
46+
</ul>
47+
</div>
48+
<script>
49+
var oBox=document.getElementById('box');
50+
var oUl=oBox.getElementsByTagName('ul')[0];
51+
var aLi=oUl.getElementsByTagName('li');
52+
var left=oUl.offsetLeft;
53+
console.log(left)
54+
//1.把ul的内容扩充一倍；
55+
oUl.innerHTML+=oUl.innerHTML;
56+
//2.改变ul的宽度
57+
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
58+
//3.不断的改变oUl的left值；
59+
clearInterval(timer);
60+
var timer=setInterval(function(){
61+
left-=5;
62+
if(left<=-oUl.offsetWidth/2){
63+
left=0;
64+
}
65+
oUl.style.left=left+'px';
66+
},30)
67+
</script>
68+
</body>
69+
</html>

‎10期JS正式课/正式课第三周/第二天/2.单张图片的延迟加载.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style>
7+
html,body{
8+
height: 300%;
9+
}
10+
p{
11+
width: 400px;
12+
height: 200px;
13+
line-height: 200px;
14+
background: url("img2/default.gif") no-repeat center #e1e1e1;
15+
position: absolute;
16+
top:1000px;
17+
text-align: center;
18+
}
19+
p img{
20+
width: 100%;
21+
height: 100%;
22+
}
23+
</style>
24+
</head>
25+
<body>
26+
<p><img src="" realImg="img2/1.jpg" alt=""/></p>
27+
<script src="utils.js"></script>
28+
<script>
29+
var oP=document.getElementsByTagName('p')[0];
30+
var oImg=document.getElementsByTagName('img')[0];
31+
//当划动滚轮的时候，会触发onscroll事件；
32+
window.onscroll=function(){
33+
var scrollBottom=utils.win('scrollTop')+utils.win('clientHeight');
34+
var imgPos=utils.offset(oImg).top+oP.offsetHeight;
35+
if(imgPos<=scrollBottom){//当满足条件的时候，让图片开始延迟加载；
36+
lazyImg();
37+
}
38+
}
39+
function lazyImg(){
40+
if(oImg.loaded) return;//避免重复加载；
41+
var tmpImg=new Image; //'<img>'
42+
tmpImg.src=oImg.getAttribute('realImg');
43+
tmpImg.onload=function(){//当加载成功的时候；
44+
oImg.src=this.src;
45+
oImg.loaded=true;//避免重复加载
46+
tmpImg=null;
47+
console.log('success')
48+
};
49+
tmpImg.onerror=function(){
50+
oImg.loaded=true;//避免重复加载
51+
tmpImg=null;
52+
oP.style.background='url("img2/error.gif") no-repeat center #e1e1e1';
53+
};
54+
}
55+
</script>
56+
</body>
57+
</html>

‎10期JS正式课/正式课第三周/第二天/3.单张图片的延迟加载2.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style>
7+
html,body{
8+
height: 300%;
9+
}
10+
p{
11+
width: 400px;
12+
height: 200px;
13+
line-height: 200px;
14+
background: url("img2/default.gif") no-repeat center #e1e1e1;
15+
position: absolute;
16+
top:1000px;
17+
text-align: center;
18+
}
19+
p img{
20+
width: 100%;
21+
height: 100%;
22+
}
23+
</style>
24+
</head>
25+
<body>
26+
<p><img src="" realImg="img2/1.0.jpg" alt=""/></p>
27+
<script src="utils.js"></script>
28+
<script>
29+
var oP=document.getElementsByTagName('p')[0];
30+
var oImg=document.getElementsByTagName('img')[0];
31+
//当划动滚动条的时候，只有图片满足加载条件才会加载；
32+
window.onscroll=function(){
33+
var scrollBottom=utils.win('scrollTop')+utils.win('clientHeight');
34+
var imgPos=utils.offset(oImg).top+oImg.offsetHeight;
35+
//当imgPos《=scrollBottom时，开始加载图片
36+
if(imgPos<=scrollBottom) {
37+
lazyImg();
38+
}
39+
}
40+
function lazyImg(){
41+
if(oImg.loaded) return;//已经加载过，就不再重复加载；
42+
//1.创建临时图片
43+
var tmpImg=new Image;
44+
//2.给临时图片的地址赋值
45+
tmpImg.src=oImg.getAttribute('realImg');
46+
//3.校验地址
47+
tmpImg.onload=function(){//图片加载成功
48+
//3.1把正确地址赋值给真正的img标签
49+
oImg.src=this.src;
50+
//3.2释放tmpImg这个临时标签
51+
tmpImg=null;
52+
//3.3避免重复加载；
53+
oImg.loaded=true;
54+
};
55+
tmpImg.onerror=function(){//图片加载失败
56+
//1.避免重复加载
57+
oImg.loaded=true;
58+
//2.释放tmpImg
59+
tmpImg=null;
60+
//3.替换背景图-显示一张加载失败的图片
61+
oP.style.background='url("img2/error.gif") no-repeat center #e1e1e1'
62+
};
63+
}
64+
</script>
65+
</body>
66+
</html>

‎10期JS正式课/正式课第三周/第二天/3.多张图片的延迟加载.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style>
7+
html,body{
8+
height: 200%;
9+
}
10+
*{
11+
margin:0;
12+
padding:0;
13+
}
14+
p{
15+
width: 400px;
16+
height: 200px;
17+
background: url("img2/default.gif") no-repeat center #e1e1e1;
18+
}
19+
p img{
20+
width: 100%;
21+
height: 100%;
22+
}
23+
</style>
24+
</head>
25+
<body>
26+
<div style="height: 1000px"></div>
27+
<p><img src="" realImg="img2/1.jpg" alt=""/></p>
28+
<p><img src="" realImg="img2/2.0.jpg" alt=""/></p>
29+
<p><img src="" realImg="img2/3.jpg" alt=""/></p>
30+
<p><img src="" realImg="img2/4.jpg" alt=""/></p>
31+
<p><img src="" realImg="img2/5.jpg" alt=""/></p>
32+
<script src="utils.js"></script>
33+
<script>
34+
var aP=document.getElementsByTagName('p');
35+
var aImg=document.getElementsByTagName('img');
36+
window.onscroll=function(){
37+
var scrollBottom=utils.win('scrollTop')+utils.win('clientHeight');
38+
for(var i=0; i<aImg.length; i++){
39+
var cur=aImg[i];
40+
var imgPos=utils.offset(cur).top+cur.offsetHeight;
41+
if(imgPos<=scrollBottom){
42+
lazyImg(aImg[i]);
43+
}
44+
}
45+
};
46+
function lazyImg(img){
47+
if(img.loaded) return;//避免重复加载；
48+
//1.创建临时图片标签
49+
var tmpImg=new Image;
50+
//2.给图片标签赋值正确的地址
51+
tmpImg.src=img.getAttribute('realImg');
52+
console.log(tmpImg.src)
53+
//3.校验地址
54+
tmpImg.onload=function(){//图片地址正确
55+
//把正确的地址赋值给真正的img标签
56+
img.src=this.src;
57+
//释放tmpImg标签
58+
tmpImg=null;
59+
//避免重复加载
60+
img.loaded=true;
61+
};
62+
tmpImg.onerror=function(){//图片地址错误
63+
//释放tmpImg标签
64+
tmpImg=null;
65+
//避免重复加载
66+
img.loaded=true;
67+
//更改背景图
68+
img.parentNode.style.background='url("img2/error.gif") no-repeat center #e1e1e1'
69+
};
70+
}
71+
</script>
72+
</body>
73+
</html>

‎10期JS正式课/正式课第三周/第二天/4.同步和异步.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style>
7+
body,html{
8+
width: 100%;
9+
height: 100%;
10+
}
11+
</style>
12+
</head>
13+
<body>
14+
<script>
15+
/*for(var i=0; i<4; i++){
16+
document.body.onclick=function(){
17+
alert(i);
18+
}
19+
}*/
20+
/*setTimeout(function(){
21+
alert(1)
22+
},0);//异步
23+
alert(0);*/
24+
setTimeout(function(){
25+
alert(1)
26+
},0);
27+
/*while(1){
28+
29+
}*/
30+
for(var i=0; i<1000; i++){
31+
32+
}
33+
alert(1000)
34+
35+
</script>
36+
</body>
37+
</html>

‎10期JS正式课/正式课第三周/第二天/4.同步和异步2.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<script>
9+
var n=0;
10+
setTimeout(function() {
11+
n += 2;
12+
alert(n);
13+
},2);//7
14+
setTimeout(function() {
15+
n += 5;
16+
alert(n);
17+
},1);//5
18+
for(var i=0; i<1000000; i++){
19+
20+
}
21+
alert(n);//0
22+
23+
</script>
24+
</body>
25+
</html>

0 commit comments

Comments
 (0)