task 1：完成省城市的三级联动（包括湖南省），附代码和效果图。
<!DOCTYPE html>

<html>

<head>

    <title>完成省城市的三级联动（包括湖南省），附代码和效果图。</title>

</head>

<body>

 <select id="province">

   <option value="-1">请选择</option>

 </select>

 <select id="city"></select>

 <select id="country"></select>

 <script type="text/javascript">

   var provinceArr = ['上海','江苏','河北','湖南'];

   var cityArr = [

                  ['上海市'],

                  ['苏州市','南京市','扬州市'],

                  ['石家庄','秦皇岛','张家口'],

                  ['长沙市','株洲市','湘潭市']

                 ];

    var countryArr =[

                     [

                      ['黄浦区','静安区','长宁区','浦东区']

                     ],

                     [

                      ['虎丘区','吴中区','相城区','姑苏区','吴江区'],

                      ['玄武区','秦淮区','建邺区','鼓楼区','浦口区'],

                      ['邗江区','广陵区','江都区']

                     ],

                     [

                      ['长安区','桥西区','新华区','井陉矿区'],

                      ['海港区','山海关区','北戴河区','抚宁区'],

                      ['桥东区','桥西区','宣化区','下花园区']

                     ],

                     [

                      ['芙蓉区','岳麓区','天心区','开福区'],

                      ['荷塘区','芦淞区','石峰区','天元区'],

                      ['雨湖区','岳塘区']

                     ]

                    ];

    function creatOption(obj,data){

        for(var i in data){

            var op = new Option(data[i],i);

            obj.options.add(op);

        }

    }

    var province = document.getElementById('province');

    creatOption(province,provinceArr);   

    var city = document.getElementById("city");

    province.onchange = function(){

        city.options.length = 0;

        creatOption(city,cityArr[province.value]);

        if(province.value >= 0){

            city.onchange();

        }else{

            country.options.length = 0;

        }

    };

    var country = document.getElementById("country");

    city.onchange = function(){

        country.options.length = 0;

        creatOption(country,countryArr[province.value][city.value]);

    };

 </script>

</body>

</html>


task 2：移出数组arr中与2相等的元素，并生成一个新数组，不改变原数组。
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>移出数组arr中与2相等的元素，并生成一个新数组，不改变原数组。</title>

</head>

<body>

  <script>

   var arr = [1,2,3,4,2,5,6,2,7,2];

   var str4 = arr.slice(1,2);

   var str1 = arr.slice(4,5);

   var str2 = arr.slice(7,8);

   var str3 = arr.slice(9);

   str = str1.concat(str2,str3,str4);

   document.write("原数组arr：<br/>" + arr);

   document.write("<br/>");

   document.write("移出数组arr中与2相等的元素，并生成一个新数组str：<br/>" + str);

   document.write("<br/>");

   document.write("没有改变原数组arr：<br/>" + arr);

  </script>

</body>

</html>

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

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

感想
　　本次实训花了差不多一天的时间，对于刚接触这门语言很多知识都是现学现用或者参考别人的代码。但是总体给我的感觉，Jscript是较之前学的所有语言都容易一点，基本都能看懂，只要多练习很容易掌握。

js二次作业的更多相关文章

  1. 软工 · 第十二次作业 - Beta答辩总结

    福大软工 · 第十二次作业 - Beta答辩总结 写第十二次的时候操作失误直接在Beta版本的博客里改了...第七次冲刺的作业链接补在这里 Beta(7/7) 组长本次博客作业链接 项目宣传视频链接 ...

  2. JS二维数组排序组合

    需求是这样的:http://q.cnblogs.com/q/29093/ 这里简述一下: 现在有一个不确定长度的数组.比如:var temp=[["Fu","Hai&qu ...

  3. 一天带你入门到放弃vue.js(二)

    接下来我们继续学习一天带你入门到放弃系列vue.js(二),如有问题请留言讨论! v-if index.html <div id="app"> <p v-if=& ...

  4. js 二维数组 for 循环重新赋值

    javascript 二维数组的重新 组装 var arr = [[1,2],[3,4],[5,6],[7,8]]; var temp = new Array(); for(var i= 0 ;i&l ...

  5. 201621123005《Java程序设计》第十二次作业

    <Java程序设计>第十二次作业 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 面向系统综合设计-图书馆管理系统或购物车 使用流与文件改造 ...

  6. 2017-2018-1 《Linux内核原理与设计》第十二周作业

    <linux内核原理与设计>第十二周作业 Sql注入基础原理介绍 分组: 和20179215袁琳完成实验 一.实验说明   SQL注入攻击通过构建特殊的输入作为参数传入Web应用程序,而这 ...

  7. 实验十二 团队作业8：软件测试与Alpha冲刺

    实验十二 团队作业8:软件测试与Alpha冲刺 实验时间 2018-6-13 Deadline: [6.13-6.19]之间任选连续5天的23:00,以团队随笔博文提交时间为准. 评分标准: 按时交 ...

  8. js二维数组定义和初始化的三种方法总结

    js二维数组定义和初始化的三种方法总结 方法一:直接定义并且初始化,这种遇到数量少的情况可以用var _TheArray = [["0-1","0-2"],[& ...

  9. 实验十二 团队作业8：软件测试与Alpha冲刺 第四天

    项目 内容 这个作业属于哪个课程 老师链接 这个作业的要求在哪里 实验十二 团队作业8:软件测试与Alpha冲刺 团队名称 Always Run! 作业学习目标 (1)掌握软件测试基础技术 (2)学习 ...

随机推荐

  1. mysql设置updatetime字段每次修改时自动更新

    我们在数据库表设计阶段中都会加上CreateTime, UpdateTime字段, 在重要业务字段更新的时候,都会重新赋值UpdateTime字段,这个对后期查找分析业务数据变更时非常有用. 但是现在 ...

  2. 巨杉Tech | Hbase迁移至SequoiaDB 实战

    背景 在传统银行 IT 架构中,联机交易与统计分析系统往往采用不同的技术与物理设备,通过定期执行的 ETL 将联机交易数据向分析系统中迁移.而作为数据服务资源池,同一份数据可能被不同类型的微服务共享访 ...

  3. graphics.drawRect()方法

    drawRect方法的官方API文档描述 drawRect public void drawRect(int x, int y, int width, int height) Draws the ou ...

  4. java动态代理之CGLIB实现

    动态代理(CGlib 与连接池的案例) Cglib代理: 针对类来实现代理,对指定目标 产生一个子类 通过方法拦截技术拦截所有父类方法的调用. 我们要使用cglib代理必须引入 cglib的jar包 ...

  5. 使用 Docker 安装 showdoc

    一.简介 ShowDoc 是一个非常适合IT团队在线共享文档的工具,在线访问地址为:https://www.showDoc.cc 本来也可以直接 pull showdoc 镜像到本地,使用 docke ...

  6. 《Java核心技术卷1》读书笔记

    一.基础 数据类型 Java是一种强类型语言,一共8种基本类型,没有无符号类型 整型:int(正负20亿).short(正负3万).long(巨多).byte(正负127) 浮点类型:float(正负 ...

  7. DataGuard开启failover

    1.修改保护模式 DGMGRL> edit configuration set protection mode as maxAvailability; Succeeded. 2.修改日志同步方式 ...

  8. hadoop之mapreduce详解（基础篇）

    本篇文章主要从mapreduce运行作业的过程,shuffle,以及mapreduce作业失败的容错几个方面进行详解. 一.mapreduce作业运行过程 1.1.mapreduce介绍 MapRed ...

  9. 【笔试题】Java笔试题知识点

    Java高概率笔试题知识点 Java语法基础部分 [解析]java命令程序执行字节码文件是,不能跟文件的后缀名! 1.包的名字都应该是由小写单词组成,它们全都是小写字母,即便中间的单词亦是如此 2.类 ...

  10. springboot 集成Redis单机

    1.redis服务搭建 centos7 搭建redis服务 2.接入相关 pom文件依赖引入 <dependencies> <dependency> <groupId&g ...