Skip to content

Commit 3035740

Browse files
past-codepast-code
committed
2 parents c44e21f + 9f0b0a9 commit 3035740

File tree

97 files changed

+3753
-0
lines changed

Some content is hidden

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

97 files changed

+3753
-0
lines changed

‎公开课第二周/8期第二周周末班第一天/1.复习任意个参数求和.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 add(){//因为不知道要传多少个参数，所以不写形参；用函数自带的参数机制arguments;
10+
var total=0;
11+
for(var i=0; i<arguments.length; i++){
12+
if(!isNaN(arguments[i])){//进行有效数组的过滤
13+
total+=Number(arguments[i]);//'5' 防止字符串拼接；
14+
}
15+
}
16+
return total;
17+
}
18+
console.log(add(12,'3',4,'3px'))
19+
</script>
20+
</body>
21+
</html>

‎公开课第二周/8期第二周周末班第一天/2.循环绑定事件.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<input type="button" value="按钮1"/>
9+
<input type="button" value="按钮2"/>
10+
<input type="button" value="按钮3"/>
11+
<input type="button" value="按钮4"/>
12+
<script>
13+
//需求：点击每个按钮，弹出对应的索引；
14+
//思想1：自定义属性
15+
var aBtn=document.getElementsByTagName('input');
16+
//想给每个元素都绑定点击事件
17+
/*for(var i=0; i<aBtn.length; i++){
18+
// alert(i) 都是正确的i值；
19+
aBtn[i].index=i;//把每个正确的i值都保存到自定义属性上；
20+
aBtn[i].onclick=function(){
21+
//事件中触发的函数中的i值，一定有问题；
22+
alert(this.index)
23+
}
24+
}*/
25+
//思想2：闭包
26+
for(var i=0; i<aBtn.length; i++){
27+
//想保存正确的i值；
28+
(function(index){//把正确的i值都保存在元素的私有属性index;
29+
aBtn[index].onclick=function(){
30+
alert(index);
31+
}
32+
})(i);
33+
}
34+
35+
36+
37+
38+
39+
40+
41+
42+
43+
44+
45+
46+
</script>
47+
</body>
48+
</html>

‎公开课第二周/8期第二周周末班第一天/3.用setTimeout实现setInterval.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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+
var n=0;
11+
function fn(){
12+
n++;//1 2 3....
13+
alert(n)
14+
if(n===5){//当n===5的时候，结束定时器，同时，阻断程序执行；
15+
// console.log(n);
16+
clearTimeout(timer);//结束定时器
17+
return;//阻断程序执行；
18+
}
19+
var timer=setTimeout(fn,1000);//开启定时器；
20+
}
21+
fn();
22+
23+
24+
25+
26+
27+
28+
29+
</script>
30+
</body>
31+
</html>

‎公开课第二周/8期第二周周末班第一天/4.隔行换色.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+
li{
8+
height: 40px;
9+
list-style: none;
10+
}
11+
.bg0{
12+
background: lightblue;
13+
}
14+
.bg1{
15+
background: lightcyan;
16+
}
17+
.bg2{
18+
background: lightgoldenrodyellow;
19+
}
20+
.changeBg{
21+
background: darkmagenta;
22+
color: white;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<ul>
28+
<li></li>
29+
<li></li>
30+
<li></li>
31+
<li></li>
32+
<li></li>
33+
</ul>
34+
<script>
35+
var aLi=document.getElementsByTagName('li');
36+
var oldBg=null;//现在没有，以后会有；
37+
for(var i=0; i<aLi.length; i++){
38+
switch (i%3){//用switch时，每个case下，必须写break;
39+
case 0:
40+
aLi[i].className='bg0';
41+
break;
42+
case 1:
43+
aLi[i].className='bg1';
44+
break;
45+
default :
46+
aLi[i].className='bg2';
47+
break;
48+
}
49+
aLi[i].onmouseover=function(){
50+
oldBg=this.className;//把以前的颜色存起来；
51+
this.className='changeBg';
52+
};
53+
aLi[i].onmouseout=function(){
54+
this.className=oldBg;
55+
};
56+
(function(index){
57+
aLi[index].onclick=function(){
58+
alert(index)
59+
}
60+
})(i);
61+
}
62+
/* var i=0;//用while循环代替for循环时；必须写定义阶段
63+
while(i<aLi.length){
64+
if(i%3===0){
65+
aLi[i].className='bg0';
66+
}else if(i%3===1){
67+
aLi[i].className='bg1';
68+
}else{
69+
aLi[i].className='bg2';
70+
}
71+
i++;//自增必须得写，否则死循环；
72+
}*/
73+
</script>
74+
</body>
75+
</html>

‎公开课第二周/8期第二周周末班第一天/5.获取一个长度为四位的随机验证码.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
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+
//需求：获取一个长度为4位的不重复的随机验证码；
15+
var strCode='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
16+
var str='';
17+
//只要字符串的长度小于4，满足循环条件
18+
while(str.length<4){
19+
var rnd=Math.round(Math.random()*61);//拿随机数的目的，把数字做为索引找对应的内容；
20+
//字符串中如果没有该字符，才给字符串里添加
21+
if(str.indexOf(strCode.charAt(rnd))===-1){
22+
str+=strCode.charAt(rnd);
23+
}
24+
}
25+
document.write(str);
26+
</script>
27+
</body>
28+
</html>

‎公开课第二周/8期第二周周末班第一天/6.获取元素的方法.html

Lines changed: 22 additions & 0 deletions
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>
6+
</head>
7+
<body>
8+
<div id="box" class="box"></div>
9+
<script>
10+
/*var oBox=document.getElementById('box');
11+
var oBox=document.getElementsByTagName('div')[0];
12+
var oBox=document.getElementsByClassName('box')[0];*/
13+
var oBox=document.querySelector('div');
14+
var oBox=document.querySelector('#box');
15+
var oBox=document.querySelector('.box');
16+
var oBox=document.querySelectorAll('div')[0];
17+
var oBox=document.querySelectorAll('#box')[0];
18+
var oBox=document.querySelectorAll('.box')[0];
19+
console.log(oBox);
20+
</script>
21+
</body>
22+
</html>

‎公开课第二周/8期第二周周末班第一天/7.点击自增.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>
6+
<style>
7+
body{
8+
font-size: 100px;
9+
}
10+
#box{
11+
width: 200px;
12+
margin: 50px auto;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<div id="box">
18+
<input type="button" value="点击我吧"/>
19+
<div id="num">0</div>
20+
</div>
21+
<script>
22+
var oBtn=document.getElementsByTagName('input')[0];
23+
var oDiv=document.getElementById('num');
24+
var bOk=true;
25+
var timer=null;
26+
var num=0;
27+
oBtn.onclick=function(){
28+
//当点击按钮的时候，如果bOk为true，开启一个定时器，不断累加num,并把累加的值，放到oDiv.innerHTML;让bOk=false;
29+
if(bOk){
30+
timer=setInterval(function(){
31+
num++;
32+
oDiv.innerHTML=num;
33+
},500)
34+
}else{
35+
clearInterval(timer);
36+
}
37+
bOk=!bOk;
38+
}
39+
</script>
40+
</body>
41+
</html>

0 commit comments

Comments
 (0)