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. Spring Boot（一）：快速开始

    Spring Boot(一):快速开始 本系列文章旨在使用最小依赖.最简单配置,帮助初学者快速掌握Spring Boot各组件使用,达到快速入门的目的.全部文章所使用示例代码均同步Github仓库和G ...

  2. ubuntu下配置JDK，Eclipse，android开发环境

    前言:由于我的电脑是64位的,所以下面使用的jdk ; eclipse : 包括我安装的 ubuntu12.0.4LTS 都是64位的:如果你是32位请下载32位的系统以及jdk,eclipse等软件 ...

  3. hive内部表与外部表区别详细介绍

    问题导读:1.创建内部表与外部表的区别是什么?2.external关键字的作用是什么?3.外部表与内部表的区别是什么?4.删除表的时候,内部表与外部表有什么区别?5.load data local i ...

  4. Python Flask高级编程之RESTFul API前后端分离精讲 (网盘免费分享)

    Python Flask高级编程之RESTFul API前后端分离精讲 (免费分享)  点击链接或搜索QQ号直接加群获取其它资料: 链接:https://pan.baidu.com/s/12eKrJK ...

  5. Java多线程（十四）：Timer

    Timer schedule(TimerTask task, Date time) 该方法在指定日期执行任务,如果是过去的时间,这个任务会立即被执行. 执行时间早于当前时间 示例代码,当前时间是201 ...

  6. Kubernetes v1.16 发布 | 云原生生态周报 Vol. 20

    作者:心贵.进超.元毅.心水.衷源.洗兵 业界要闻 Kubernetes v1.16 发布 在这次发布中值得关注的一些特性和 Feature: CRD 正式进入 GA 阶段: Admission We ...

  7. MySQL 8.0主从（Master-Slave）配置

    版权声明:转载请注明出处,谢谢配合. https://blog.csdn.net/zyhlwzy/article/details/80569422 MySQL 主从复制的方式有多种,本文主要演示基于基 ...

  8. SpringBoot——Web开发（静态资源映射）

    静态资源映射 SpringBoot对于SpringMVC的自动化配置都在WebMVCAutoConfiguration类中. 其中一个静态内部类WebMvcAutoConfigurationAdapt ...

  9. 48 (OC)* 适配iPad和iPhone、以及横竖屏适配。

    一:核心方法 1.三个方法 1.1:开始就会触发 - (void)viewWillLayoutSubviews; 1.2:开始就会触发 - (void)viewDidLayoutSubviews; 1 ...

  10. 了解Java线程优先级，更要知道对应操作系统的优先级，不然会踩坑

    Java 多线程系列第 6 篇. 这篇我们来看看 Java 线程的优先级. Java 线程优先级 Thread 类中,使用如下属性来代表优先级. private int priority; 我们可以通 ...