Skip to content

Commit 3c8a64e

Browse files
amydevyaamydevya
committed
new
1 parent 493ad8a commit 3c8a64e

28 files changed

Lines changed: 664 additions & 0 deletions

‎10期JS正式课/正式课第三周/第三天/1.复习回到顶部.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style>
7+
html,body{
8+
height: 1000%;
9+
background: -webkit-linear-gradient(top,darkgreen,lightgoldenrodyellow,lightcyan,lightcoral);
10+
}
11+
*{
12+
margin:0;
13+
padding:0;
14+
}
15+
div{
16+
width: 80px;
17+
height: 80px;
18+
line-height: 80px;
19+
background: lightgreen;
20+
border-radius: 50%;
21+
position: fixed;
22+
right:20px;
23+
bottom:20px;
24+
font-size:30px;
25+
display: none;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<div id="div">toTop</div>
31+
<script src="utils.js"></script>
32+
<script>
33+
var oDiv=document.getElementById('div');
34+
35+
//2.第一屏不显示按钮，划动距离超过一屏，显示按钮
36+
window.onscroll=function(){
37+
if(utils.win('scrollTop')>utils.win('clientHeight')){
38+
oDiv.style.display='block';
39+
}else{
40+
oDiv.style.display='none';
41+
}
42+
};
43+
//1.点击按钮，回到顶部：
44+
/*1.target：当前浏览器被卷去的高度，也就是要走的总距离
45+
2.duration：总时间 3.interval：频率，多久走一次
46+
通过以上三个条件，求出步长step:target/duration*interval;*/
47+
oDiv.onclick=function(){
48+
var target=utils.win('scrollTop');
49+
var duration=1000;
50+
var interval=30;
51+
var step=target/duration*interval;
52+
//开启定时器，每次在最新的距离上-step值
53+
clearInterval(timer);
54+
var timer=setInterval(function(){
55+
var curTop=utils.win('scrollTop');//最新的距离
56+
if(curTop<=0){
57+
clearInterval(timer);
58+
return;//阻断程序的执行
59+
}
60+
curTop-=step;
61+
//重新设置总距离
62+
utils.win('scrollTop',curTop);
63+
},interval)
64+
}
65+
</script>
66+
</body>
67+
</html>

‎10期JS正式课/正式课第三周/第三天/2.瀑布流.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
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+
div{
13+
width: 1100px;
14+
margin:0 auto;
15+
}
16+
div ul{
17+
width: 200px;
18+
margin:0 10px;
19+
/*height和background展示完效果后，立即注释，否则，会影响瀑布流的效果*/
20+
/*height: 10px;
21+
background: red;*/
22+
float: left;
23+
}
24+
div ul li{
25+
width: 100%;
26+
font-size: 50px;
27+
color: white;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
<div>
33+
<ul></ul>
34+
<ul></ul>
35+
<ul></ul>
36+
<ul></ul>
37+
<ul></ul>
38+
</div>
39+
<script src="utils.js"></script>
40+
<script>
41+
var aUl=document.getElementsByTagName('ul');
42+
var n=0;
43+
//核心原理：把创建出来的li，都插入到最短的ul中；
44+
function createLi(){//高度随机，背景随机；
45+
var oLi=document.createElement('li');
46+
oLi.style.height=utils.rnd(100,300)+'px';
47+
oLi.style.background='rgb('+utils.rnd(0,255)+','+utils.rnd(0,255)+','+utils.rnd(0,255)+')';
48+
return oLi;
49+
}
50+
//每创建一个li，都往"最短的ul"中插入一个li；
51+
li50();
52+
window.onscroll=function(){
53+
var scrollBottom=utils.win('scrollTop')+utils.win('clientHeight');
54+
//clientHeight：设定容器的固定宽高+padding； scrollHeight：上padding+内容的高度
55+
if(scrollBottom>=document.body.scrollHeight){
56+
li50();
57+
}
58+
};
59+
function li50(){
60+
for(var i=0; i<50; i++){
61+
var oLi=createLi();
62+
oLi.innerHTML=++n;
63+
//1.类数组转数组
64+
var ary=utils.makeArray(aUl);
65+
//2.数组排序
66+
ary.sort(function(a,b){
67+
return a.offsetHeight- b.offsetHeight;
68+
});
69+
//3.把li插入到最短的ul中
70+
ary[0].appendChild(oLi);
71+
}
72+
}
73+
</script>
74+
</body>
75+
</html>

‎10期JS正式课/正式课第三周/第三天/3.瀑布流+图片延迟加载+回到顶部.html‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
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+
img{
13+
border: none;
14+
}
15+
div{
16+
width: 1100px;
17+
margin:0 auto;
18+
}
19+
div ul{
20+
width: 200px;
21+
margin:0 10px;
22+
float: left;
23+
}
24+
div ul li{
25+
width: 100%;
26+
margin-bottom: 10px;
27+
background: url("img2/default.gif") no-repeat center #e1e1e1;
28+
}
29+
div ul li img{
30+
width: 100%;
31+
}
32+
.btn{
33+
width: 80px;
34+
height: 80px;
35+
background: darkmagenta;
36+
color: white;
37+
border-radius: 50%;
38+
text-align: center;
39+
line-height: 80px;
40+
position: fixed;
41+
right:20px;
42+
bottom:20px;
43+
font-size: 30px;
44+
display: none;
45+
}
46+
</style>
47+
</head>
48+
<body>
49+
<div>
50+
<ul>
51+
<!--<li><img src="" realImg="img2/1.jpg" alt=""/></li>-->
52+
</ul>
53+
<ul></ul>
54+
<ul></ul>
55+
<ul></ul>
56+
<ul></ul>
57+
</div>
58+
<script src="utils.js"></script>
59+
<div id="btn" class="btn">toTop</div>
60+
<script>
61+
var aUl=document.getElementsByTagName('ul');
62+
var aLi=document.getElementsByTagName('li');
63+
var aImg=document.getElementsByTagName('img');
64+
var oBtn=document.getElementById('btn');
65+
var timer=null;
66+
var bOk=false;
67+
var ary=[
68+
{imgSrc:'img2/1.jpg'},
69+
{imgSrc:'img2/2.jpg'},
70+
{imgSrc:'img2/3.jpg'},
71+
{imgSrc:'img2/4.jpg'},
72+
{imgSrc:'img2/5.jpg'},
73+
{imgSrc:'img2/6.jpg'},
74+
{imgSrc:'img2/7.jpg'},
75+
{imgSrc:'img2/8.jpg'},
76+
{imgSrc:'img2/9.jpg'},
77+
{imgSrc:'img2/10.jpg'},
78+
];
79+
//1.创建一个元素li,内容为图片；为了保证背景图比较好看，给li设置随机高度；
80+
function createLi(){
81+
var oLi=document.createElement('li');
82+
oLi.style.height=utils.rnd(100,180)+'px';
83+
oLi.innerHTML='<img src="" realImg="'+ary[utils.rnd(0,9)].imgSrc+'" alt=""/>';
84+
return oLi;
85+
}
86+
//2.创建50个li,每创建一个，都插入ul中最短的；
87+
function li50(){
88+
for(var i=0; i<50; i++){
89+
var oLi=createLi();
90+
//1.类数组转数组
91+
var ary=utils.makeArray(aUl);
92+
//2.数组排序
93+
ary.sort(function(a,b){
94+
return a.offsetHeight- b.offsetHeight;
95+
});
96+
//3.把oLi插入最短的ul;
97+
ary[0].appendChild(oLi);
98+
}
99+
}
100+
//3.显示图片的封装
101+
function showImg(){
102+
//每张图片到body顶部的距离+图片自身的高度《scrollTop+clientHeight；
103+
for(var i=0; i<aImg.length; i++){
104+
var scrollBottom=utils.win('scrollTop')+utils.win('clientHeight');
105+
var imgPos=utils.offset(aImg[i]).top+aLi[i].offsetHeight;
106+
if(imgPos<scrollBottom){
107+
lazyImg(aImg[i]);
108+
}
109+
}
110+
}
111+
function lazyImg(img){
112+
if(img.loaded) return;
113+
//1.创建临时img标签
114+
var tmpImg=new Image;
115+
//2.给临时img标签赋值正确的地址
116+
tmpImg.src=img.getAttribute('realImg');
117+
//3.校验地址
118+
tmpImg.onload=function(){
119+
//1.把正确的地址赋值给img;
120+
img.src=this.src;
121+
//让img父级的高度为auto；
122+
img.parentNode.style.height='auto';
123+
//2.释放临时标签tmpImg
124+
tmpImg=null;
125+
//3.避免重复加载
126+
img.loaded=true;
127+
}
128+
}
129+
function toTop(){
130+
var target=utils.win('scrollTop');
131+
var duration=1000;
132+
var interval=30;
133+
var step=target/duration*interval;
134+
//开启定时器，每次在最新的距离上减去step步长
135+
clearInterval(timer);
136+
timer=setInterval(function(){//只有定时器在影响onscroll事件
137+
var curTop=utils.win('scrollTop');
138+
if(curTop<=0){
139+
clearInterval(timer);
140+
return;
141+
}
142+
curTop-=step;
143+
utils.win('scrollTop',curTop);
144+
bOk=false;
145+
},interval)
146+
}
147+
//..........调用......
148+
li50();
149+
showImg();
150+
oBtn.onclick=toTop;
151+
window.onscroll=function(){//能触发滚轮事件有两种情况：手动+定时器
152+
//计算浏览器卷去的高度+可视区的高度 跟 内容的高度进行比较
153+
var scrollBottom=utils.win('scrollTop')+utils.win('clientHeight');
154+
showImg();
155+
if(bOk) clearInterval(timer);
156+
bOk=true;
157+
//第一屏按钮隐藏，当滚动条滚动距离超过一屏，显示按钮
158+
if(utils.win('scrollTop')>utils.win('clientHeight')){
159+
oBtn.style.display='block'
160+
}else{
161+
oBtn.style.display='none'
162+
}
163+
if(scrollBottom>=document.body.scrollHeight){
164+
li50();
165+
}
166+
}
167+
</script>
168+
</body>
169+
</html>

‎10期JS正式课/正式课第三周/第三天/4.getByClass.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<div class="box1 box2 box3 box4"></div>
9+
<div class="box1 box2 box3"></div>
10+
<div class="box1 box2"></div>
11+
<div class="box1"></div>
12+
<p class="box1 box2 box3 box4">我是p元素</p>
13+
<script src="utils.js"></script>
14+
<script>
15+
var oP=document.getElementsByTagName('p')[0];
16+
utils.removeClass(oP,'box1 box2 box3 box4')
17+
//utils.addClass(oP,'box1 box3 box5')
18+
//var aDiv=utils.getByClass(' box1 box2 ');
19+
//console.log(utils.hasClass(oP,'box1'))
20+
// ary[box1,box2,box3];
21+
//校验 所有div.className,必须包含数组中的每一项，才算合格；
22+
/*思路：
23+
* 1.curEle.getElementsByClassName ->支持，就直接使用系统提供的方法；
24+
* 1）系统提供的方法获取到的类数组，把类数组转数组；--为保证数据格式返回一致；
25+
* 2.如果不支持：
26+
* 1）把字符串转成数组
27+
* 2）拿到当前容器下的所有元素
28+
* 3）校验每个元素的className是否包含数组中的每一项；如果都包含，该元素就是我们要的；把该元素应该放入数组
29+
* 4）最后返回数组
30+
* */
31+
//获取当前元素下所有包含strClass的元素
32+
/* function getByClass(strClass,curEle){
33+
curEle=curEle||document;
34+
if('getComputedStyle' in window){//高级浏览器
35+
return [].slice.call(curEle.getElementsByClassName(strClass))
36+
}
37+
//1）把字符串转成数组
38+
var aryClass=strClass.replace(/(^ +)|( +$)/g,'').split(/\s+/g);
39+
//2）拿到当前容器下的所有元素
40+
var nodeList=curEle.getElementsByTagName('*');//!* 通配符，代表所有元素
41+
var ary=[];
42+
//3)校验每个元素的className是否包含数组中的每一项；如果都包含，该元素就是我们要的；把该元素应该放入数组
43+
for(var i=0; i<nodeList.length; i++){
44+
var curList=nodeList[i];
45+
var bOk=true;//假设该元素身上包含数组中的每一项
46+
for(var j=0; j<aryClass.length; j++){
47+
var reg=new RegExp('\\b'+aryClass[i]+'\\b');
48+
//如果有一项不合格，bOk就为false；
49+
if(!reg.test(curList.className)){
50+
bOk=false;
51+
}
52+
}
53+
//在整个过滤后，如果bOk还为true，说明该元素合格
54+
if(bOk){
55+
ary.push(curList)
56+
}
57+
}
58+
return ary;
59+
}*/
60+
</script>
61+
</body>
62+
</html>

0 commit comments

Comments
 (0)