第二次作业
第一题：
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 </head>
5 <body>
6 <select id="province">
7 <option value="-1">请选择</option>
8 </select>
9 <select id="city"></select>
10 <select id="country"></select>
11 <script type="text/javascript">
12 var provinceArr = ['上海','江苏','湖南'];
13 var cityArr = [
14 ['上海市'],
15 ['苏州市','南京市','扬州市'],
16 ['长沙市','常德市','张家界市']
17 ];
18 var countryArr = [
19 [
20 ['黄浦区','静安区','长宁区','浦东区']
21 ],
22 [
23 ['虎丘区','吴中区','相城区','姑苏区','吴江区'],['玄武区','秦淮区','建邺区','鼓楼区','浦口区'],['邗江区 ','广陵区','江都区']
24 ],
25 [
26 ['岳麓区','雨花区','望城区','芙蓉区'],['武陵区','鼎城区'],['永定区','武陵源区']
27 ]
28 ];
29 function createOption(obj,data){
30 for(var i in data){
31 var op = new Option(data[i],i);
32 obj.options.add(op);
33 }
34 }
35 var province = document.getElementById('province');
36 createOption(province,provinceArr);
37 var city = document.getElementById('city');
38 province.onchange = function(){
39 city.options.length = 0;
40 createOption(city,cityArr[province.value]);
41 };
42 var country = document.getElementById('country');
43 city.onchange = function(){
44 country.options.length = 0;
45 createOption(country,countryArr[province.value][city.value]);
46 };
47 province.onchange = function(){
48 city.options.length = 0;
49 createOption(city,cityArr[province.value]);
50 if(province.value>=0){
51 city.onchange();
52 }
53 else{
54 country.options.length = 0;
55 }
56 };
57 </script>
58 </body>
59 </html>
第二1 <!DOCTYPE html 2 <html>
3 <head> 4 <meta charset="utf-8"> 5 <title>移出数组arr中与2相等的元素</title> 6 </head> 7 <body> 8 <script> 9 var arr = [1,2,3,4,2,5,6,2,7,2]; 10 document.write("原数组：" + arr); 11 var length=arr.length 12 for(var i=0;i<length;++i){ 13 var str=arr.shift(); 14 if(str%2!=0){ 15 arr.push(str); 16 } 17 } 18 document.write("<br/>新数组：" + arr); 19 </script> 20 </body> 21 </html>
第三题：<!DOCTYPEhtml>
<html><head> <meta charset="utf-8"> <title>编写函数实现单击change按钮，为div元素添加红色双线的边框。</title> <style type="text/css"> div{ font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei",sans-serif; width: 600px; text-align: center; } .haha{ margin-top: 20px; margin-left: 250px; font-size: 20px; } .haha:hover{ border: 3px solid purple; } </style></head><body> <div id="joy"> <p>咱们什么都没有，唯一的本钱就是青春。</p> </div> <button class="haha" onclick="myFunction()">change</button> <script type="text/javascript"> function myFunction(){ var Color = document.getElementById("joy"); Color.style.border = "3px double red"; Color.innerHTML = "<p>那就努力改变自己吧，不辜负这大好的青春，不辜负自己！</p>"; } </script></body></html>
个人感想：在实训过程中，对于HTML中的很多标签不熟悉，不是很理解div元素的使用，
通过同学们的帮助、上网查询和看书上的代码，成功得到了预想的结果。
多看书上的案例，熟悉各个标签的含义及其用法，理解代码的含义，再进行运用，而不是盲目的抄写。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<html><head> <style > div{ } </style></head><body> <div id="joy"> <p>123</p> </div> <button onclick="myFunction()">change</button> <script > function myFunction(){ var Color = document.getElementById("joy"); Color.style.border = "3px double red"; } </script></body></html>
|
