Skip to content

Commit 166176a

Browse files
amydevyaamydevya
committed
new
1 parent 2ff7f9e commit 166176a

12 files changed

Lines changed: 514 additions & 0 deletions

File tree

‎10期JS正式课/正式课第二周/第二天/1.求最大值和最小值.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>
6+
</head>
7+
<body>
8+
<script>
9+
var ary=[21,2,48,9,34];
10+
//思路1：sort
11+
/*ary.sort(function(a,b){
12+
return a-b
13+
})
14+
var min=ary[0];
15+
var max=ary[ary.length-1];
16+
alert(min);
17+
alert(max);*/
18+
//思路2：字符串拼接 配合 eval
19+
/*min=Math.min('21','2','48','9','34');
20+
max=Math.max('21','2','48','9','34');
21+
var str=ary.join(','); //'21,2,48,9,34'
22+
var max=eval('Math.max('+str+')');//'Math.max(21,2,48,9,34)'*/
23+
//思路3：假设法；
24+
/*var min=ary[0];
25+
var max=ary[0];
26+
for(var i=0; i<ary.length; i++){
27+
if(ary[i]<min){
28+
min=ary[i]
29+
}
30+
if(ary[i]>max){
31+
max=ary[i]
32+
}
33+
}*/
34+
//思路4：apply来实现
35+
var max=Math.max.apply(null,ary);
36+
alert(max)
37+
38+
</script>
39+
</body>
40+
</html>

‎10期JS正式课/正式课第二周/第二天/2.数据解析.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>
6+
</head>
7+
<body>
8+
<p>Chain Reaction</p>
9+
10+
<p>zhufeng</p>
11+
<script>
12+
var aP=document.getElementsByTagName('p');
13+
/*window.JSON={
14+
parse:function(){}, //把JSON格式的字符串，转成JSON格式的数据-对象
15+
stringify:function(){}
16+
}*/
17+
//var str='{"name":"zhufeng","age":8}'; //JSON格式的字符串
18+
//var json={"name":"zhufeng","age":8};//JSON和对象的区别：JSON的属性名都用双引号；
19+
//var obj={name:"zhufeng",age:8};
20+
// alert('JSON' in window)
21+
var str='[{"id":"1111","title":"Chain Reaction"},{"id":"22222","title":"zhufeng"}]';
22+
//var ary=JSON.parse(str);
23+
//console.log(ary)
24+
/*alert(typeof str)
25+
alert(typeof JSON)*/
26+
/*aP[0].innerHTML=JSON.name;
27+
aP[1].innerHTML=JSON.age;*/
28+
/*for(var i=0; i<ary.length; i++){
29+
aP[i].innerHTML=ary[i].title;
30+
}*/
31+
//alert(JSON.parse)
32+
var ary1=eval('('+str+')') ;//eval会引起注入攻击；--不安全，我们在支持JSON.parse的浏览器中，直接JSON.parse(); 在不兼容JSON.parse()的浏览器中，用eval必须加上();
33+
//console.log(ary1)
34+
//JsonParse:把JSON格式的字符串，转成JSON格式的数据-对象格式
35+
function JsonParse(str){
36+
return 'JSON' in window? JSON.parse(str):eval('('+str+')')
37+
}
38+
</script>
39+
</body>
40+
</html>

‎10期JS正式课/正式课第二周/第二天/3.创建表格，绑定数据.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
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+
table{
12+
width: 600px;
13+
margin: 50px auto;
14+
}
15+
table thead{
16+
height: 40px;
17+
line-height: 40px;
18+
}
19+
table tbody tr{
20+
height: 40px;
21+
line-height: 40px;
22+
text-align: center;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<table border="1" cellpadding="0" cellspacing="0">
28+
<tHead>
29+
<th>姓名</th>
30+
<th>年龄</th>
31+
<th>分数</th>
32+
<th>性别</th>
33+
</tHead>
34+
<tBody>
35+
<!--<tr>
36+
<td>赵老大</td>
37+
<td>45</td>
38+
<td>89</td>
39+
<td>0</td>
40+
</tr>-->
41+
</tBody>
42+
</table>
43+
<script src="json.js"></script>
44+
<script>
45+
var oTab=document.getElementsByTagName('table')[0];
46+
var tBody=oTab.tBodies[0];
47+
var aRow=tBody.rows;
48+
var str='';
49+
//1.字符串拼接的绑定方式
50+
/*for(var i=0; i<jsonAry.length; i++){
51+
var cur=jsonAry[i];
52+
cur.sex=cur.sex==0?'男':'女';
53+
str+='<tr>\
54+
<td>'+cur.name+'</td>\
55+
<td>'+cur.age+'</td>\
56+
<td>'+cur.score+'</td>\
57+
<td>'+cur.sex+'</td>\
58+
</tr>';
59+
}
60+
tBody.innerHTML=str;*/
61+
//2.动态创建-文档碎片
62+
var frg=document.createDocumentFragment();//文档碎片；
63+
for(var i=0; i<jsonAry.length; i++){
64+
var cur=jsonAry[i];
65+
var oTr=document.createElement('tr');
66+
for(var attr in cur){
67+
var oTd=document.createElement('td');
68+
oTd.innerHTML=cur[attr];
69+
oTr.appendChild(oTd);
70+
}
71+
frg.appendChild(oTr);
72+
}
73+
tBody.appendChild(frg);
74+
</script>
75+
</body>
76+
</html>

‎10期JS正式课/正式课第二周/第二天/4.新闻列表.html‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
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+
ul{
13+
width: 500px;
14+
margin:50px auto;
15+
border: 2px solid lightgreen;
16+
box-shadow: 0 0 10px darkGreen;
17+
padding:10px;
18+
}
19+
ul li{
20+
width: 100%;
21+
height: 40px;
22+
line-height: 40px;
23+
border-bottom: 1px dashed green;
24+
25+
white-space: nowrap;
26+
overflow: hidden;
27+
text-overflow: ellipsis;
28+
}
29+
ul li span{
30+
display: inline-block;
31+
width: 20px;
32+
height: 20px;
33+
border-radius: 50%;
34+
background: red;
35+
color: white;
36+
text-align: center;
37+
line-height: 20px;
38+
font-weight: bold;
39+
margin-right: 4px;
40+
}
41+
</style>
42+
</head>
43+
<body>
44+
<ul id="ul1">
45+
<li><span>0</span>习近平总书记１２日上午在十八届中央纪委六次全会上发表重要讲话，深刻分析反腐败斗争依然严峻复杂的形势，提出当前和今后一个时期的目标任务。</li>
46+
<li><span>1</span>习近平总书记１２日上午在十八届中央纪委六次全会上发表重要讲话，深刻分析反腐败斗争依然严峻复杂的形势，提出当前和今后一个时期的目标任务。</li>
47+
<li><span>2</span>习近平总书记１２日上午在十八届中央纪委六次全会上发表重要讲话，深刻分析反腐败斗争依然严峻复杂的形势，提出当前和今后一个时期的目标任务。</li>
48+
</ul>
49+
<script src="json1.js"></script>
50+
<script>
51+
//根据数据，创建li；
52+
var oUl=document.getElementById('ul1');
53+
var aLi=oUl.getElementsByTagName('li');
54+
for(var i=0; i<aLi.length; i++){
55+
aLi[i].onmouseover=function(){
56+
this.style.background='yellow';
57+
};
58+
aLi[i].onmouseout=function(){
59+
this.style.background='';
60+
};
61+
}
62+
//思路3：
63+
var frg=document.createDocumentFragment();
64+
for(var i=0; i<ary.length; i++){
65+
var oLi=document.createElement('li');
66+
oLi.innerHTML='<span>'+(i+3)+'</span>'+ary[i].desc;
67+
frg.appendChild(oLi); //把每次创建的li都放入frg文档碎片；
68+
}
69+
oUl.appendChild(frg);
70+
frg=null;
71+
/*//思路2：动态创建--会引发页面回流，非常耗性能，不推荐
72+
for(var i=0; i<ary.length; i++){
73+
var oLi=document.createElement('li');
74+
oLi.innerHTML='<span>'+(i+3)+'</span>'+ary[i].desc;
75+
oUl.appendChild(oLi);
76+
}*/
77+
//回流 和 重绘
78+
//回流：当页面结构发生一点变动的时候，需要刷新整个页面，进行重新的构建；--非常耗性能；
79+
/*//1.字符串拼接的绑定方式
80+
var str='';
81+
for(var i=0; i<ary.length; i++){
82+
str+='<li><span>'+(i+3)+'</span>'+ary[i].desc+'</li>';
83+
}
84+
oUl.innerHTML+=str;//=的作用：重新赋值；
85+
//oUl.innerHTML=oUl.innerHTML+str;
86+
//字符串拼接的方式，相当于把页面中的内容，全部拿出来，跟字符串进行拼接后，变成一个新的字符串；把这些字符串转为代码重新放入页面，所以，以前页面中元素身上原有的事件，已经都不在了；
87+
//优点：1.绑定方式非常简单；2.性能好，因为他对DOM的操作只有一次；
88+
//缺点：以前页面中元素身上的事件都不在了；*/
89+
</script>
90+
</body>
91+
</html>

‎10期JS正式课/正式课第二周/第二天/5.表格排序.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
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+
table{
12+
width: 600px;
13+
margin: 50px auto;
14+
border: 3px solid lightgreen;
15+
box-shadow: 0 0 10px darkgreen;
16+
padding:10px;
17+
border-radius: 10px;
18+
}
19+
table thead{
20+
height: 40px;
21+
line-height: 40px;
22+
background: darkgreen;
23+
color: white;
24+
}
25+
table tbody tr{
26+
height: 40px;
27+
line-height: 40px;
28+
text-align: center;
29+
}
30+
table tbody tr.bg0{
31+
background: lightgoldenrodyellow;
32+
}
33+
table tbody tr.bg1{
34+
background: lightcyan;
35+
}
36+
.cursor{
37+
cursor: pointer;
38+
}
39+
</style>
40+
</head>
41+
<body>
42+
<table id="tab" cellpadding="0" cellspacing="0">
43+
<tHead>
44+
<tr>
45+
<th class="cursor">姓名</th>
46+
<th class="cursor">年龄</th>
47+
<th class="cursor">分数</th>
48+
<th>性别</th>
49+
</tr>
50+
</tHead>
51+
<tBody>
52+
<!--<tr class="bg0">
53+
<td>赵老大</td>
54+
<td>45</td>
55+
<td>89</td>
56+
<td>0</td>
57+
</tr>
58+
<tr class="bg1">
59+
<td>赵老大</td>
60+
<td>45</td>
61+
<td>89</td>
62+
<td>0</td>
63+
</tr>-->
64+
</tBody>
65+
</table>
66+
<script src="json.js"></script>
67+
<script src="utils.js"></script>
68+
<script src="tab.js"></script>
69+
</body>
70+
</html>

‎10期JS正式课/正式课第二周/第二天/data.txt‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
[
2+
{"name": "赵老大", "age": 45, "score": 89, "sex": 0},
3+
{"name": "钱二妞", "age": 24, "score": 67, "sex": 1},
4+
{"name": "孙三娘", "age": 38, "score": 79, "sex": 1},
5+
{"name": "李四爷", "age": 30, "score": 80, "sex": 0},
6+
{"name": "周姑娘", "age": 65, "score": 56, "sex": 1},
7+
{"name": "爱三桂", "age": 26, "score": 26, "sex": 0}
8+
]

‎10期JS正式课/正式课第二周/第二天/json.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
//为我们的表格排序准备json格式的数据
2+
//sex:0->男 1->女
3+
var jsonAry = [
4+
{"name": "赵老大", "age": 45, "score": 89, "sex": 0},
5+
{"name": "钱二妞", "age": 24, "score": 67, "sex": 1},
6+
{"name": "孙三娘", "age": 38, "score": 79, "sex": 1},
7+
{"name": "李四爷", "age": 30, "score": 80, "sex": 0},
8+
{"name": "周姑娘", "age": 65, "score": 56, "sex": 1},
9+
{"name": "吴三桂", "age": 26, "score": 26, "sex": 0}
10+
];

‎10期JS正式课/正式课第二周/第二天/json1.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
//这里存放的是我们JSON格式的数据
2+
var ary = [
3+
{
4+
"title": "从习近平讲话看下一步反腐倡廉工作着力点",
5+
"desc": "习近平总书记１２日上午在十八届中央纪委六次全会上发表重要讲话，深刻分析反腐败斗争依然严峻复杂的形势，提出当前和今后一个时期的目标任务。"
6+
},
7+
{
8+
"title": "李克强主持国务院常务会议再推简政放权",
9+
"desc": "国务院总理李克强1月13日主持召开国务院常务会议，决定再推出一批简政放权改革措施，让市场活力更大释放;确定完善高新技术企业认定办法，使更多创新型企业得到政策支持。"
10+
},
11+
{
12+
"title": "从习近平讲话看下一步反腐倡廉工作着力点",
13+
"desc": "习近平总书记１２日上午在十八届中央纪委六次全会上发表重要讲话，深刻分析反腐败斗争依然严峻复杂的形势，提出当前和今后一个时期的目标任务。"
14+
},
15+
{
16+
"title": "李克强主持国务院常务会议再推简政放权",
17+
"desc": "国务院总理李克强1月13日主持召开国务院常务会议，决定再推出一批简政放权改革措施，让市场活力更大释放;确定完善高新技术企业认定办法，使更多创新型企业得到政策支持。"
18+
},
19+
{
20+
"title": "从习近平讲话看下一步反腐倡廉工作着力点",
21+
"desc": "习近平总书记１２日上午在十八届中央纪委六次全会上发表重要讲话，深刻分析反腐败斗争依然严峻复杂的形势，提出当前和今后一个时期的目标任务。"
22+
},
23+
{
24+
"title": "李克强主持国务院常务会议再推简政放权",
25+
"desc": "国务院总理李克强1月13日主持召开国务院常务会议，决定再推出一批简政放权改革措施，让市场活力更大释放;确定完善高新技术企业认定办法，使更多创新型企业得到政策支持。"
26+
},
27+
{
28+
"title": "李克强主持国务院常务会议再推简政放权",
29+
"desc": "国务院总理李克强1月13日主持召开国务院常务会议，决定再推出一批简政放权改革措施，让市场活力更大释放;确定完善高新技术企业认定办法，使更多创新型企业得到政策支持。"
30+
}
31+
];

‎10期JS正式课/正式课第二周/第二天/note‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
1.在txt文档中，HTML页面中，拿到的数据都是字符串；
2+
2.ajax:在不重新加载页面的情况下，更新数据；
3+
3.关于ajax的使用步骤：总共四步
4+
1）创建xml对象
5+
var xml=new XMLHttpRequest();
6+
2)打开地址
7+
xml.open('get',请求地址,false);
8+
3)响应请求
9+
xml.onreadystatechange=function(){
10+
//xml.readyState==4 xml.status:2xx
11+
}
12+
4)发送请求
13+
xml.send(null);

0 commit comments

Comments
 (0)