43 第二次作业

1、省城市的三级联动

 1    <select id="province">
 2         <option value="-1">请选择</option>
 3     </select>
 4     <select id="city"></select>
 5     <select id="country"></select>
 6     <script type="text/javascript">
 7         var provinceArr = ['上海','江苏','湖南'];
 8         var cityArr = [
 9             ['上海市'],
10             ['苏州市','南京市','扬州市'],
11             ['长沙市','常德市','张家界市']
12         ];
13         var countryArr = [
14          [
15             ['黄浦区','静安区','长宁区','浦东区']
16         ],
17         [
18             ['虎丘区','吴中区','相城区','姑苏区','吴江区'],
19             ['玄武区','秦淮区','建邺区','鼓楼区','浦口区'],
20             ['邗江区 ','广陵区','江都区']
21         ],
22         [
23             ['岳麓区','雨花区','望城区','芙蓉区'],
24             ['武陵区','鼎城区'],
25             ['永定区','武陵源区']
26         ]
27     ];
28     function createOption(obj,data){
29         for(var i in data){
30             var op = new Option(data[i],i);
31                 obj.options.add(op);
32             }
33     }
34     var province = document.getElementById('province');
35     createOption(province,provinceArr);
36     var city = document.getElementById('city');
37     province.onchange = function(){
38         city.options.length = 0;
39         createOption(city,cityArr[province.value]);
40     };
41     var country = document.getElementById('country');
42     city.onchange = function(){
43         country.options.length = 0;
44         createOption(country,countryArr[province.value][city.value]);
45     };
46     province.onchange = function(){
47         city.options.length = 0;
48         createOption(city,cityArr[province.value]);
49         if(province.value>=0){
50             city.onchange();
51         }
52         else{
53             country.options.length = 0;
54         }
55     };
56 </script>

结果截图：

2、移出数组arr（[1,2,3,4,2,5,6,2,7,2]）中与2相等的元素，并生成一个新数组，不改变原数组。

 1        var arr = [1,2,3,4,2,5,6,2,7,2];
 2         document.write("原数组：<br/>" + arr);
 3         var a= arr.slice(3,4);
 4         var b = arr.slice(0,1);
 5         var c = arr.slice(2,3);
 6         var d = arr.slice(5,6);
 7         var e = arr.slice(6,7);
 8         var f = arr.slice(8,9);
 9         str = b.concat(c,a,d,e,f);
10         document.write("<br/>");
11         document.write("新数组：<br/>" + str);
12         document.write("<br/>");
13         document.write("原数组arr：<br/>" + arr);

效果图：

3、编写函数实现单击change按钮，为div元素添加红色双线的边框。

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

效果图：

2019-10-17 20:14:31

猜你喜欢