欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

43 第二次作业

程序员文章站 2022-12-21 22:10:12
1、省城市的三级联动 结果截图: 2、移出数组arr([1,2,3,4,2,5,6,2,7,2])中与2相等的元素,并生成一个新数组,不改变原数组。 效果图: 3、编写函数实现单击change按钮,为div元素添加红色双线的边框。 效果图: 2019-10-17 20:14:31 ......

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>

结果截图:

43 第二次作业

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);

效果图:

43 第二次作业

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>

效果图:

43 第二次作业

2019-10-17  20:14:31