第二次作业

第一题：

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>



第三题：
<!DOCTYPE html>

<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元素的使用，
        通过同学们的帮助、上网查询和看书上的代码，成功得到了预想的结果。
        多看书上的案例，熟悉各个标签的含义及其用法，理解代码的含义，再进行运用，而不是盲目的抄写。

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

posted @ 2019-10-17 21:31 捡球的杨某人阅读(131) 评论(0) 收藏举报

刷新页面返回顶部

捡球的杨某人

第二次作业

公告