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. 使用Nginx实现反向代理过程(一台服务器部署两个网站)

    正向代理指的是客户端的 反向代理指的是服务端的 需要实现的反向代理: 1.首先使用SwitchHosts配置不同域名,如下:(SwitchHosts软件在上一篇博客有链接) 2.在Linux上部署两台 ...

  2. CXF添加拦截器和自定义拦截器

    前面讲了如何采用CXF开发webservice,现在来讲如何添加拦截器和自定义拦截器. 服务端代码: HelloWorld implementor=new HelloWorldImpl(); Stri ...

  3. Docker入门到实践——简单操作

    1.对比传统虚拟机总结 特性 容器 虚拟机 启动 秒级 分钟级 硬盘使用 一般为MB 一般为GB 性能 接近原生 弱于 系统支持量 单机支持上千个容器 一般几十个 2.基本概念 Docker包括三个基 ...

  4. Java 内省(Introspector)和 BeanUtils

    人生若只如初见,何事秋风悲画扇. 概述 内省(Introspector) 是Java 语言对 JavaBean 类属性.事件的一种缺省处理方法. JavaBean是一种特殊的类,主要用于传递数据信息, ...

  5. MySQL什么时候适合建索引，什么时候不适合建索引

    1.什么事索引(本质:数据结构) 索引是帮助MySQL高效获取数据的数据结构. 2.优势: 1.提高数据检索的效率,降低数据库IO成本 2.通过索引对数据进行排序,降低数据排序的成本,降低了CPU的消 ...

  6. CentOS7 常用命令

    常用命令 1.文件与目录操作 命令 解析 cd /home 进入 ‘/home’ 目录 cd .. 返回上一级目录 cd ../.. 返回上两级目录 cd - 返回上次所在目录 cp file1 fi ...

  7. 数据可视化之3D中国

    本文链接:https://blog.csdn.net/zhai_865327/article/details/82983489 其实一般情况下2D平面地图就够用了,但是为了更加美观及突出效果,就需要3 ...

  8. MySQL优化之索引原理（二）

    一,前言 ​ 上一篇内容说到了MySQL存储引擎的相关内容,及数据类型的选择优化.下面再来说说索引的内容,包括对B-Tree和B+Tree两者的区别. 1.1,什么是索引 ​ 索引是存储引擎用于快速找 ...

  9. （二）spring 高级装配-Condition -条件化的bean

    Condition:满足某个特定条件的情况下创建bean 条件化配置bean: a:@Conditional 指定一个class ,它指明了通过条件对比的类.如果没有指定class则通过Condito ...

  10. （七十三）c#Winform自定义控件-资源加载窗体

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kwwwvagaa/NetWinformControl 码云:ht ...