js第二次作业——2019.10.16

第一题:完成省城市的三级联动(包括湖南省),附代码和效果图。

 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>

 

 

第二题:移出数组arr([1,2,3,4,2,5,6,2,7,2])中与2相等的元素,并生成一个新数组,不改变原数组。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 </head>
 6 <body>
 7 <script>
 8 var arr = [1,2,3,4,2,5,6,2,7,2];
 9 document.write("原数组:<br/>" + arr);
10 var a= arr.slice(3,4);
11 var b = arr.slice(0,1);
12 var c = arr.slice(2,3);
13 var d = arr.slice(5,6);
14 var e = arr.slice(6,7);
15 var f = arr.slice(8,9);
16 str = b.concat(c,a,d,e,f);
17 document.write("<br/>");
18 document.write("新数组:<br/>" + str);
19 document.write("<br/>");
20 document.write("原数组arr:<br/>" + arr);
21 </script> 
22 </body>
23 </html>

 

第三题:编写函数实现单击change按钮,为div元素添加红色双线的边框。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <style type="text/css">
 6         div{
 7             font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei",sans-serif;
 8             width: 600px;
 9             text-align: center;
10         }
11         .haha{
12             margin-top: 20px;
13             margin-left: 250px;
14             font-size: 20px;
15         }
16         .haha:hover{
17             border: 3px solid purple;
18         }
19     </style>
20 </head>
21 <body>
22    <div id="joy">
23       <p>努力学习</p>
24    </div>
25    <button class="haha" onclick="myFunction()">change</button>
26    <script type="text/javascript">
27     function  myFunction(){
28         var Color = document.getElementById("joy");
29         Color.style.border = "3px double red";
30         Color.innerHTML = "<p>加油!</p>";
31        
32     }
33     </script>
34 </body>
35 </html>

 

实训感想:还需多加努力,以便之后自己有更多的技能去面对困难。

猜你喜欢

转载自www.cnblogs.com/ryan555789xiaojun/p/11689340.html