第一题：完成省城市的三级联动（包括湖南省），附代码和效果图。

  1.  1 <!DOCTYPE HTML>
  2.  2 <html>
  3.  3 <head>
  4.  4 </head>
  5.  5 <body>
  6.  6 <select id="province">
  7.  7 <option value="-1">请选择</option>
  8.  8 </select>
  9.  9 <select id="city"></select>
  10. 10 <select id="country"></select>
  11. 11 <script type="text/javascript">
  12. 12 var provinceArr = ['上海','江苏','湖南'];
  13. 13 var cityArr = [
  14. 14 ['上海市'],
  15. 15 ['苏州市','南京市','扬州市'],
  16. 16 ['长沙市','常德市','张家界市']
  17. 17 ];
  18. 18 var countryArr = [
  19. 19 [
  20. 20 ['黄浦区','静安区','长宁区','浦东区']
  21. 21 ],
  22. 22 [
  23. 23 ['虎丘区','吴中区','相城区','姑苏区','吴江区'],['玄武区','秦淮区','建邺区','鼓楼区','浦口区'],['邗江区 ','广陵区','江都区']
  24. 24 ],
  25. 25 [
  26. 26 ['岳麓区','雨花区','望城区','芙蓉区'],['武陵区','鼎城区'],['永定区','武陵源区']
  27. 27 ]
  28. 28 ];
  29. 29 function createOption(obj,data){
  30. 30 for(var i in data){
  31. 31 var op = new Option(data[i],i);
  32. 32 obj.options.add(op);
  33. 33 }
  34. 34 }
  35. 35 var province = document.getElementById('province');
  36. 36 createOption(province,provinceArr);
  37. 37 var city = document.getElementById('city');
  38. 38 province.onchange = function(){
  39. 39 city.options.length = 0;
  40. 40 createOption(city,cityArr[province.value]);
  41. 41 };
  42. 42 var country = document.getElementById('country');
  43. 43 city.onchange = function(){
  44. 44 country.options.length = 0;
  45. 45 createOption(country,countryArr[province.value][city.value]);
  46. 46 };
  47. 47 province.onchange = function(){
  48. 48 city.options.length = 0;
  49. 49 createOption(city,cityArr[province.value]);
  50. 50 if(province.value>=0){
  51. 51 city.onchange();
  52. 52 }
  53. 53 else{
  54. 54 country.options.length = 0;
  55. 55 }
  56. 56 };
  57. 57 </script>
  58. 58 </body>
  59. 59 </html>

第二题：移出数组arr([1,2,3,4,2,5,6,2,7,2])中与2相等的元素，并生成一个新数组,不改变原数组。

  1.  1 <!DOCTYPE html>
  2.  2 <html>
  3.  3 <head>
  4.  4 <meta charset="utf-8">
  5.  5 </head>
  6.  6 <body>
  7.  7 <script>
  8.  8 var arr = [1,2,3,4,2,5,6,2,7,2];
  9.  9 document.write("原数组：<br/>" + arr);
  10. 10 var a= arr.slice(3,4);
  11. 11 var b = arr.slice(0,1);
  12. 12 var c = arr.slice(2,3);
  13. 13 var d = arr.slice(5,6);
  14. 14 var e = arr.slice(6,7);
  15. 15 var f = arr.slice(8,9);
  16. 16 str = b.concat(c,a,d,e,f);
  17. 17 document.write("<br/>");
  18. 18 document.write("新数组：<br/>" + str);
  19. 19 document.write("<br/>");
  20. 20 document.write("原数组arr：<br/>" + arr);
  21. 21 </script>
  22. 22 </body>
  23. 23 </html>

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

  1.  1 <!DOCTYPE html>
  2.  2 <html>
  3.  3 <head>
  4.  4     <meta charset="utf-8">
  5.  5     <style type="text/css">
  6.  6         div{
  7.  7             font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei",sans-serif;
  8.  8             width: 600px;
  9.  9             text-align: center;
  10. 10         }
  11. 11         .haha{
  12. 12             margin-top: 20px;
  13. 13             margin-left: 250px;
  14. 14             font-size: 20px;
  15. 15         }
  16. 16         .haha:hover{
  17. 17             border: 3px solid purple;
  18. 18         }
  19. 19     </style>
  20. 20 </head>
  21. 21 <body>
  22. 22    <div id="joy">
  23. 23       <p>努力学习</p>
  24. 24    </div>
  25. 25    <button class="haha" onclick="myFunction()">change</button>
  26. 26    <script type="text/javascript">
  27. 27     function  myFunction(){
  28. 28         var Color = document.getElementById("joy");
  29. 29         Color.style.border = "3px double red";
  30. 30         Color.innerHTML = "<p>加油！</p>";
  31. 31
  32. 32     }
  33. 33     </script>
  34. 34 </body>
  35. 35 </html>

实训感想：还需多加努力，以便之后自己有更多的技能去面对困难。

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

  1. 2019.10.16&17小结

    话说也蛮久没写小结了,主要这两次考试失分严重,还是总结下吧. 10.16 T1 小奇挖矿2 100/0 [题目背景] 小奇飞船的钻头开启了无限耐久+精准采集模式!这次它要将原矿运到泛光之源的矿石交易市 ...

  2. C 题解———2019.10.16

    现在很痛苦,等过阵子回头看看,会发现其实那都不算事. [题目描述]定义一个排列 a 的价值为满足|a[i]-i|<=1 的 i 的数量.给出三个正整数 n,m,p,求出长度为 n 且价值恰好为 ...

  3. A 题解————2019.10.16

    [题目描述] 对于给定的一个正整数n, 判断n是否能分成若干个正整数之和 (可以重复) ,其中每个正整数都能表示成两个质数乘积. [输入描述]第一行一个正整数 q,表示询问组数.接下来 q 行,每行一 ...

  4. jQuery进阶第二天（2019 10.10）

    一.事件流程 1.事件的三要素: 事件源:发生事件的对象 事件类型:类型比如单击.双击.鼠标的移入.移除 事件处理程序: 触发事件之后做些什么,事件处理的函数 <body> <but ...

  5. @CSP模拟2019.10.16 - T3@ 垃圾分类

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 为了保护环境,p6pou建设了一个垃圾分类器. 垃圾分类器是一个 ...

  6. B 题解————2019.10.16

    相信他说的话,但不要当真 [题目描述]有一个长度为 n 的自然数序列 a,要求将这个序列恰好分成至少 m 个连续子段. 每个子段的价值为该子段的所有数的按位异或.要使所有子段的价值按位与的结果最大,输 ...

  7. FZU2018级算法第二次作业 2.10 逆序数（权值线段树）

    题目: Nk 最近喜欢上了研究逆序数,给出一个由 1…n 组成的数列 a1,a2,a3…an, a1的逆序数就是在 a2…an 中,比 a1 小的数的数量,而 a2 的逆序数就是 a3….an 中比 ...

  8. BUAA OO 2019 第二单元作业总结

    目录 总 架构 controller model view 优化算法 Look 算法 多种算法取优 预测未来 多线程 第五次作业 第六次作业 第七次作业 代码静态分析 UML 类图 类复杂度 类总代码 ...

  9. 【2019.10.17】十天Web前端程序员体验（软件工程实践第五次作业）

    结对信息.具体分工 Github地址:https://github.com/MokouTyan/131700101-031702425 学号 昵称 主要负责内容 博客地址 131700101 莫多 代 ...

随机推荐

  1. python selenium 时间搜索框查询和日期大小比较

    在做selenium自动化的时候遇到 时间搜索框查询(如下图)并比较查询结果是否在输入的时间之类. 首先,第一步要做的就是选择时间,并获取到所选时间的文本信息 如上图所示,获取到的时间搜索框并没有文本 ...

  2. Codeforces Round #674 (Div. 3) F. Number of Subsequences 题解(dp)

    题目链接 题目大意 给你一个长为d只包含字符'a','b','c','?' 的字符串,?可以变成a,b,c字符,假如有x个?字符,那么有\(3^x\)个字符串,求所有字符串种子序列包含多少个abc子序 ...

  3. CentOS下设置ipmi

    1.载入支持 ipmi 功能的系统模块 modprobe ipmi_msghandler modprobe ipmi_devintf modprobe ipmi_poweroff modprobe i ...

  4. 深圳-2020-java面试题分享

    记录一下最近面试接触的面试题. 深圳掌众传媒: union 和union all区别 union:对两个结果集进行并集操作,不包括重复行,同时进行默认规则的排序: union All:对两个结果集进行 ...

  5. 雪花算法 Java 版

    雪花算法根据时间戳生成有序的 64 bit 的 Long 类型的唯一 ID 各 bit 含义: 1 bit: 符号位,0 是正数 1 是负数, ID 为正数,所以恒取 0 41 bit: 时间差,我们 ...

  6. 阻止brew自动更新

    export HOMEBREW_NO_AUTO_UPDATE=true  

  7. 第6.6节 Python动态执行小结

    一.    Python动态执行支持通过输入数据流或文件传入Python源代码串,进行编译后执行,可以通过这种方式扩展Python程序的功能: 二.    动态执行方法可能导致恶意攻击,因此使用时需要 ...

  8. 老猿学5G扫盲贴：中国移动5G融合计费漫游计费架构和路由方案

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt+moviepy音视频剪辑实战 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一. ...

  9. Python中使用百分号占位符的字符串格式化方法中%s和%r的输出内容有何不同？

    Python中使用百分号占位符的字符串格式化方法中%s和%r表示需要显示的数据对应变量x会以str(x)还是repr(x)输出内容展示. 关于str和repr的关系请见: <Python中rep ...

  10. PyQt学习随笔：QTableWidget的selectedRanges、setRangeSelected访问选中矩形范围的方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 在QTableWidget对项的操作支持选中多个项的情况下,可以通过方法selectedRanges ...