Skip to content

Commit 3bbb45e

Browse files
amydevyaamydevya
committed
new
1 parent 679e5fc commit 3bbb45e

28 files changed

+10810
-0
lines changed

‎补课/前四周题的补课/1.setTimeout实现setInterval.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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 count=0;
10+
function fn(){
11+
count++;
12+
13+
alert(count);
14+
if(count>=10){
15+
return;
16+
}
17+
clearTimeout(timer);
18+
var timer=setTimeout(fn,1000)
19+
}
20+
fn()
21+
</script>
22+
</body>
23+
</html>

‎补课/前四周题的补课/2.获取不重复的随机验证码.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style>
7+
body {
8+
font-size: 100px;
9+
}
10+
</style>
11+
</head>
12+
<body>
13+
<script>
14+
var strCode = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
15+
var str = '';
16+
var ary = [];
17+
/*for (var i = 0; i < 4; i++) {
18+
var rnd = Math.round(Math.random() * 61);
19+
if (ary.indexOf(rnd) !== -1) {
20+
i--;
21+
} else {
22+
ary.push(rnd);
23+
str += strCode.charAt(rnd);
24+
}
25+
}*/
26+
while (ary.length < 4) {
27+
var rnd = Math.round(Math.random() * 61);
28+
if (ary.indexOf(rnd) === -1) {
29+
ary.push(rnd);
30+
str += strCode.charAt(rnd);
31+
}
32+
}
33+
document.body.innerHTML = str;
34+
</script>
35+
</body>
36+
</html>
37+
38+
39+
40+
41+
42+
43+
44+

‎补课/前四周题的补课/3.题.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<script>
9+
function fn(i){//i=2;3;4;
10+
return function(n){
11+
console.log(n*(++i));
12+
}
13+
}
14+
var f=fn(2);//xxff00
15+
f(3);//xxff00 n=3; 3*3=9
16+
f(4);//4*4=16
17+
fn(5)(6);//6*6=36;
18+
fn(7)(8);//8*8=64;
19+
</script>
20+
</body>
21+
</html>

‎补课/前四周题的补课/4.题.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 num=1; var obj={num:2};
10+
obj.fn=(function(num){
11+
this.num=num*2;
12+
num++;
13+
return function (n){
14+
this.num+=n;
15+
num++;
16+
console.log(num);
17+
}
18+
})(obj.num);
19+
var fn=obj.fn;
20+
fn(10);
21+
obj.fn(20);
22+
console.log(num,obj.num)
23+
</script>
24+
</body>
25+
</html>

‎补课/前四周题的补课/5call题.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<script>
9+
function fn1(){alert(1)};
10+
function fn2(){alert(2)};
11+
fn3=fn2.call;//Function.prototype.call:1)改变this这个实例中的this关键字 2）this这个实例执行
12+
fn2.call(fn1);//请问输出什么结果，为什么 2
13+
fn3.call.call.call(fn1);//请问输出什么结果，为什么 1
14+
</script>
15+
</body>
16+
</html>

‎补课/前四周题的补课/6.正则题.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+
/*
10+
* exec
11+
* 在没有小分组的情况下，exec捕获到的数组有三项：
12+
* 1）正则捕获到的内容
13+
* 。。。。。。。
14+
* 2）索引
15+
* 3）原始字符串
16+
* */
17+
var str='54389';
18+
var ary=['伍','肆','叁','捌','玖'];
19+
str=str.replace(/\d/g,function($0,$1,$2){
20+
return ary[$1];
21+
})
22+
document.write(str)
23+
</script>
24+
</body>
25+
</html>

‎补课/前四周题的补课/7.多张图片的延迟加载.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style>
7+
div{
8+
width: 450px;
9+
height: 300px;
10+
background: url("img2/default.gif") center #e1e1e1 no-repeat;
11+
}
12+
div img{
13+
width: 100%;
14+
height: 100%;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<p style="height: 1000px"></p>
20+
<div><img realImg="img2/1.jpg" alt=""/></div>
21+
<div><img realImg="img2/2.jpg" alt=""/></div>
22+
<div><img realImg="img2/3.jpg" alt=""/></div>
23+
<div><img realImg="img2/4.jpg" alt=""/></div>
24+
<div><img realImg="img2/5.jpg" alt=""/></div>
25+
<script>
26+
var aImg=document.getElementsByTagName('img');
27+
window.onscroll=function(){
28+
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
29+
var clientHeight=document.documentElement.clientHeight||document.body.clientHeight;
30+
for(var i=0; i<aImg.length; i++){
31+
var cur=aImg[i];
32+
if((cur.offsetTop+cur.offsetHeight)<(scrollTop+clientHeight)){
33+
lazyImg(cur);
34+
}
35+
}
36+
}
37+
function lazyImg(img){
38+
if(img.loaded){
39+
return;
40+
}
41+
var tmpImg=new Image;
42+
tmpImg.src=img.getAttribute('realImg');
43+
tmpImg.onload=function(){
44+
img.src=this.src;
45+
tmpImg=null;
46+
img.loaded=true;
47+
}
48+
}
49+
</script>
50+
</body>
51+
</html>

‎补课/前四周题的补课/8.选项卡.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
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+
}
11+
.box{
12+
width: 600px;
13+
height: 300px;
14+
margin-bottom: 20px;
15+
}
16+
.box input{
17+
float: left;
18+
width: 150px;
19+
height: 40px;
20+
}
21+
.box input.bg{
22+
background: red;
23+
}
24+
.box div{
25+
width: 100%;
26+
height: 100%;
27+
background: lightblue;
28+
display: none;
29+
font-size: 50px;
30+
}
31+
.box div.show{
32+
display: block;
33+
}
34+
</style>
35+
</head>
36+
<body>
37+
<div class="box" id="box1">
38+
<input type="button" value="按钮1" class="bg"/>
39+
<input type="button" value="按钮2"/>
40+
<input type="button" value="按钮3"/>
41+
<input type="button" value="按钮4"/>
42+
43+
<div class="show">内容1</div>
44+
<div>内容2</div>
45+
<div>内容3</div>
46+
<div>内容4</div>
47+
</div>
48+
<div class="box" id="box2">
49+
<input type="button" value="按钮1" class="bg"/>
50+
<input type="button" value="按钮2"/>
51+
<input type="button" value="按钮3"/>
52+
<input type="button" value="按钮4"/>
53+
54+
<div class="show">内容1</div>
55+
<div>内容2</div>
56+
<div>内容3</div>
57+
<div>内容4</div>
58+
</div>
59+
<script src="js/jquery-1.11.3.js"></script>
60+
<script src="js/tab2.js"></script>
61+
<script>
62+
/*
63+
* 关于jquery插件的封装：
64+
* $.extend({}) ===> $.each(对象，callback)// 对象:jquery,元素集合这个类数组，[],{}
65+
* $.fn.extend()===> $().xxx(); $('div').mouseover();
66+
* */
67+
// var obj={name:'zhufeng',age:9};
68+
/*var aDiv=$('div');
69+
var obj=[123,456,789]
70+
$.each(aDiv,function(index,item){
71+
console.log($(item).css('backgroundColor'))
72+
})*/
73+
$('#box1').tab();
74+
$('#box2').tab();
75+
76+
</script>
77+
</body>
78+
</html>

‎补课/前四周题的补课/9.jq回到顶部.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+
height: 1000%;
9+
background: green;
10+
background: -webkit-linear-gradient(top,lightsalmon,lightgoldenrodyellow,lightblue,lightslategray);
11+
}
12+
*{
13+
margin:0;
14+
padding: 0;
15+
}
16+
div{
17+
width: 80px;
18+
height: 80px;
19+
text-align: center;
20+
line-height: 80px;
21+
font-size: 30px;
22+
border-radius: 50%;
23+
background: #fff;
24+
box-shadow: 4px 4px 10px darkGreen;
25+
position: fixed;
26+
right:10px;
27+
bottom:30px;
28+
display: none;
29+
}
30+
</style>
31+
</head>
32+
<body>
33+
<div>toTop</div>
34+
<script src="js/jquery-1.11.3.js"></script>
35+
<script src="js/toTop.js"></script>
36+
</body>
37+
</html>

‎补课/前四周题的补课/img2/1.jpg‎

21.1 KB
Loading

0 commit comments

Comments
 (0)