Skip to content

Commit bdaa873

Browse files
amydevyaamydevya
committed
new
1 parent 4b01e49 commit bdaa873

31 files changed

Lines changed: 794 additions & 0 deletions

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
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: 1600px;
14+
margin:0 auto;
15+
}
16+
div ul{
17+
float:left;
18+
width:300px;
19+
margin:0 10px;
20+
/*height: 10px; //只是布局用的，千万不要用；
21+
background:red;*/
22+
}
23+
div ul li{
24+
font-size: 30px;
25+
color: white;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<div id="div1">
31+
<ul></ul>
32+
<ul></ul>
33+
<ul></ul>
34+
<ul></ul>
35+
<ul></ul>
36+
</div>
37+
<script src="utils.js"></script>
38+
<script>
39+
var aUl=document.getElementsByTagName('ul'); //类数组
40+
var n=0;
41+
//1.需求：先创建一个li，高度随机，背景随机；
42+
function createLi(){
43+
var oLi=document.createElement('li');
44+
oLi.style.height=utils.rnd(100,300)+'px';
45+
oLi.style.background='rgb('+utils.rnd(0,255)+','+utils.rnd(0,255)+','+utils.rnd(0,255)+')';
46+
return oLi;
47+
}
48+
//创建50个li，每创建一个li，都插入到最短的ul中；
49+
li50();
50+
function li50(){
51+
for(var i=0; i<50; i++){
52+
var oLi=createLi();
53+
oLi.innerHTML=++n;
54+
//1.aUl这个类数组 转 数组
55+
var ary=utils.makeArray(aUl);
56+
//2.数组排序
57+
ary.sort(function(a,b){
58+
return a.offsetHeight- b.offsetHeight;
59+
});
60+
//3.把li插入最短的ul中；
61+
ary[0].appendChild(oLi);
62+
}
63+
}
64+
window.onscroll=function(){
65+
var scrollBottom=utils.win('scrollTop')+utils.win('clientHeight');
66+
if(scrollBottom+500>=document.body.scrollHeight){
67+
li50();
68+
}
69+
}
70+
</script>
71+
</body>
72+
</html>
73+
74+
75+
76+
77+
78+
79+
80+

‎10期JS正式课/正式课周末第三周/第二天/2.test.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<style>
7+
html,body{
8+
height: 100%;
9+
}
10+
#div1{
11+
height: 100%;
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<div id="div1">
17+
<div class=" box1 box2 box3 box4 ">div1111111</div>
18+
<div class="box1 box2 box3">div2</div>
19+
<div class="box1 box2">div3</div>
20+
<div class="box1">div4</div>
21+
<p class="box1 box2 box3 box4">p1</p>
22+
<p class="box1 box2 box3">p2</p>
23+
</div>
24+
<script src="utils.js"></script>
25+
<script>
26+
var oDiv=document.getElementById('div1');
27+
var aDiv=oDiv.getElementsByTagName('div');
28+
var aList=utils.getByClass(' box1 box2 box3 box4 ',oDiv);
29+
for(var i=0; i<aList.length; i++){
30+
aList[i].style.height='50px';
31+
aList[i].style.background='red';
32+
}
33+
//utils.removeClass(aDiv[0],'box2')
34+
//utils.addClass(aDiv[2],'box2 box5 box6');
35+
//console.log(aDiv[0])
36+
/*utils.setCss(aDiv[0],'background','blue')
37+
utils.setCss(aDiv[0],'height','100%')
38+
utils.setCss(aDiv[0],'float','left');
39+
alert(aDiv[0].currentStyle.styleFloat)*/
40+
utils.css(aDiv[0],'height','100%')
41+
/*
42+
* getElementsByClassName//在IE6-8下不支持
43+
* 统一的按照'getComputedStyle' in window
44+
* 标准浏览器下-getElementsByClassName
45+
* IE6-8下-自己处理兼容；
46+
* 1.字符串转数组：['box1','box2','box3','box4];
47+
* 2.分别校验oDiv这个容器下，所有的元素的className,看其是否包含数组中的每一项，如果都包含，那么这个元素就是我们要找的，把他放入数组
48+
* 3.返回数组
49+
* */
50+
function getByClass(strClass,curEle){
51+
curEle=curEle||document;
52+
//标准浏览器下-getElementsByClassName
53+
if('getComputedStyle' in window){
54+
return Array.prototype.slice.call(curEle.getElementsByClassName(strClass));
55+
}
56+
//处理IE6-8的兼容问题：
57+
//1.字符串转数组:先去除首尾空格，再按照空格切分成数组
58+
var aryClass=strClass.replace(/(^ +)|( +$)/g,'').split(/\s+/g);
59+
//2.拿到当前容器下所有的子元素
60+
var nodeList=curEle.getElementsByTagName('*'); //通配符*代表所有
61+
var ary=[];
62+
//3.逐个校验每个元素的className是否包含数组中的每一项；
63+
for(var i=0; i<nodeList.length; i++){
64+
var curNode=nodeList[i];
65+
var bOk=true; //假设该元素的class中包含数组中的每一项
66+
for(var j=0; j<aryClass.length; j++){
67+
var reg=new RegExp('\\b'+aryClass[j]+'\\b');
68+
//如果有一项不合格，boK=false；立即跳出循环
69+
if(!reg.test(curNode.className)){
70+
bOk=false;
71+
break;
72+
}
73+
}
74+
if(bOk){
75+
ary.push(curNode);
76+
}
77+
}
78+
return ary;
79+
}
80+
</script>
81+
</body>
82+
</html>

‎10期JS正式课/正式课周末第三周/第二天/3.test.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<div id="div">
9+
<div class="box0">0</div>
10+
<div class="box">1</div>
11+
<div class="box2">2</div>
12+
<p></p>
13+
<p></p>
14+
<span></span>
15+
<span>span</span>
16+
</div>
17+
<script src="utils.js"></script>
18+
<script>
19+
var oDiv=document.getElementById('div');
20+
var aDiv=utils.getChildren(oDiv,'div');
21+
alert('previousElementSibling' in oDiv)
22+
//console.log(utils.next(aDiv[1]))
23+
//console.log(utils.prevAll(aDiv[2]))
24+
//console.log(utils.index(aDiv[1]))
25+
//console.log(utils.lastChild(oDiv))
26+
//console.log(aDiv)
27+
/*utils.setCss(oDiv,'width',300);
28+
utils.setCss(oDiv,'height',100);
29+
utils.setCss(oDiv,'background','red');
30+
utils.setCss(oDiv,'opacity',0.3);
31+
utils.setCss(oDiv,'float','right');*/
32+
/*utils.setGroupCss(oDiv,{
33+
width:300,
34+
height:100,
35+
background:'green',
36+
opacity:0.3,
37+
float:'right'
38+
})*/
39+
</script>
40+
</body>
41+
</html>

‎10期JS正式课/正式课周末第三周/第二天/4.回调函数.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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+
/*
10+
* 1.函数被调用的次数，取决于里面的条件
11+
* 2.回调函数也可以传参
12+
* 3.回调函数可以改变this指向；
13+
* 4.回调函数是否有返回值,有多少返回值取决于回调函数被调用多少次；
14+
*
15+
* */
16+
var obj={};
17+
function aa(n,m){
18+
alert(this+(n+m))
19+
return 123;
20+
}
21+
function fn(n){
22+
/*if(typeof n ==='function'){
23+
n();//n() 本质就是aa();
24+
}*/
25+
var ary=[];
26+
for(var i=0; i<4; i++){
27+
var val=n.call(obj,2,3); //n()代表aa()
28+
ary.push(val);
29+
}
30+
return ary;
31+
}
32+
fn(aa)
33+
</script>
34+
</body>
35+
</html>

‎10期JS正式课/正式课周末第三周/第二天/5.forEach.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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+
var ary=[12,32,34,25];
10+
var obj={};
11+
//item:数组里面的内容 index：索引 input：原始数组
12+
/*
13+
* 1.回调函数被调用4次 -》取决于数组的长度；
14+
* 2.回调函数被传了三个参数：item:数组里面的内容 index：索引 input：原始数组
15+
* 3.回调函数可以被改变this指向；
16+
* 4.回调函数没有返回值，forEach也没有返回值；
17+
*forEach: 两个参数，第二个参数不写的话，默认是window；
18+
* */
19+
Array.prototype.myForEach=function(callback,context){
20+
//this->实例ary;
21+
context=context||window;
22+
//浏览器支持的话，直接使用forEach
23+
if('forEach' in Array.prototype){
24+
this.forEach(callback,context);
25+
return; //阻断程序执行的作用；
26+
}
27+
//浏览器不支持的兼容处理
28+
for(var i=0; i<this.length; i++){
29+
callback.call(context,this[i],i,this)
30+
}
31+
32+
}
33+
var res=ary.myForEach(function(item,index,input){
34+
console.log(this==window)
35+
},obj);
36+
console.log(res)
37+
38+
</script>
39+
</body>
40+
</html>

‎10期JS正式课/正式课周末第三周/第二天/6.forEach2.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</title>
6+
</head>
7+
<body>
8+
<script>
9+
var ary=[12,32,34,25];
10+
var obj={};
11+
/*
12+
1.回调函数被调用的次数取决于数组的长度
13+
2.回调函数可以接收三个参数：数组的内容，索引，原始数组
14+
3.回调函数的this指向可能会发生改变；取决于forEach的第二个参数
15+
4.回调函数是否有返回值；--没有返回值
16+
17+
myForEach(callback,context); forEach没有返回值；
18+
*/
19+
Array.prototype.myForEach=function(callback,context){
20+
//this-》实例ary;
21+
context=context||window;
22+
//判断浏览器是否支持forEach
23+
if('forEach' in Array.prototype){
24+
this.forEach(callback,context);
25+
return;//阻断程序执行；
26+
}
27+
//处理非标准浏览器
28+
for(var i=0; i<this.length; i++){
29+
callback.call(context,this[i],i,this);
30+
}
31+
};
32+
ary.myForEach(function(item,index,input){
33+
console.log(this)
34+
},obj)
35+
</script>
36+
</body>
37+
</html>

‎10期JS正式课/正式课周末第三周/第二天/6.map.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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+
var ary=[12,32,34,25];
10+
var obj={};
11+
/*
12+
1.回调函数被调用的次数取决于数组的长度
13+
2.回调函数可以接收三个参数：数组的内容，索引，原始数组
14+
3.回调函数的this指向可能会发生改变；取决于forEach的第二个参数
15+
4.回调函数是否有返回值；--没有返回值
16+
17+
myForEach(callback,context); forEach没有返回值；
18+
*/
19+
Array.prototype.myMap=function(callback,context){
20+
//this-》实例ary;
21+
context=context||window;
22+
//判断浏览器是否支持forEach
23+
if('map' in Array.prototype){
24+
return this.map(callback,context);
25+
}
26+
//处理非标准浏览器
27+
var ary=[];
28+
for(var i=0; i<this.length; i++){
29+
var val=callback.call(context,this[i],i,this);
30+
ary.push(val);
31+
}
32+
return ary;
33+
};
34+
var res=ary.myMap(function(item,index,input){
35+
//console.log(this==obj)
36+
return item*100
37+
},obj)
38+
console.log(res)
39+
</script>
40+
</body>
41+
</html>

‎10期JS正式课/正式课周末第三周/第二天/img/1.jpg‎

11.8 KB
Loading

‎10期JS正式课/正式课周末第三周/第二天/img/2.jpg‎

182 KB
Loading

‎10期JS正式课/正式课周末第三周/第二天/img/3.jpg‎

7.64 KB
Loading

0 commit comments

Comments
 (0)