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>
结果截图：
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
上一篇： 光绪皇帝到底长什么样 慈禧为什么要杀光绪
下一篇： 前端性能优化的三大类处理方式