js第二次作业——2019.10.16
第一题：完成省城市的三级联动（包括湖南省），附代码和效果图。
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>
第二题：移出数组arr([1,2,3,4,2,5,6,2,7,2])中与2相等的元素，并生成一个新数组,不改变原数组。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 </head>
6 <body>
7 <script>
8 var arr = [1,2,3,4,2,5,6,2,7,2];
9 document.write("原数组：<br/>" + arr);
10 var a= arr.slice(3,4);
11 var b = arr.slice(0,1);
12 var c = arr.slice(2,3);
13 var d = arr.slice(5,6);
14 var e = arr.slice(6,7);
15 var f = arr.slice(8,9);
16 str = b.concat(c,a,d,e,f);
17 document.write("<br/>");
18 document.write("新数组：<br/>" + str);
19 document.write("<br/>");
20 document.write("原数组arr：<br/>" + arr);
21 </script>
22 </body>
23 </html>
第三题：编写函数实现单击change按钮，为div元素添加红色双线的边框。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <style type="text/css">
6 div{
7 font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei",sans-serif;
8 width: 600px;
9 text-align: center;
10 }
11 .haha{
12 margin-top: 20px;
13 margin-left: 250px;
14 font-size: 20px;
15 }
16 .haha:hover{
17 border: 3px solid purple;
18 }
19 </style>
20 </head>
21 <body>
22 <div id="joy">
23 <p>努力学习</p>
24 </div>
25 <button class="haha" onclick="myFunction()">change</button>
26 <script type="text/javascript">
27 function myFunction(){
28 var Color = document.getElementById("joy");
29 Color.style.border = "3px double red";
30 Color.innerHTML = "<p>加油！</p>";
31
32 }
33 </script>
34 </body>
35 </html>
实训感想：还需多加努力，以便之后自己有更多的技能去面对困难。
js第二次作业——2019.10.16的更多相关文章
- 2019.10.16&17小结
话说也蛮久没写小结了,主要这两次考试失分严重,还是总结下吧. 10.16 T1 小奇挖矿2 100/0 [题目背景] 小奇飞船的钻头开启了无限耐久+精准采集模式!这次它要将原矿运到泛光之源的矿石交易市 ...
- C 题解———2019.10.16
现在很痛苦,等过阵子回头看看,会发现其实那都不算事. [题目描述]定义一个排列 a 的价值为满足|a[i]-i|<=1 的 i 的数量.给出三个正整数 n,m,p,求出长度为 n 且价值恰好为 ...
- A 题解————2019.10.16
[题目描述] 对于给定的一个正整数n, 判断n是否能分成若干个正整数之和 (可以重复) ,其中每个正整数都能表示成两个质数乘积. [输入描述]第一行一个正整数 q,表示询问组数.接下来 q 行,每行一 ...
- jQuery进阶第二天（2019 10.10）
一.事件流程 1.事件的三要素: 事件源:发生事件的对象 事件类型:类型比如单击.双击.鼠标的移入.移除 事件处理程序: 触发事件之后做些什么,事件处理的函数 <body> <but ...
- @CSP模拟2019.10.16 - T3@ 垃圾分类
目录 @description@ @solution@ @accepted code@ @details@ @description@ 为了保护环境,p6pou建设了一个垃圾分类器. 垃圾分类器是一个 ...
- B 题解————2019.10.16
相信他说的话,但不要当真 [题目描述]有一个长度为 n 的自然数序列 a,要求将这个序列恰好分成至少 m 个连续子段. 每个子段的价值为该子段的所有数的按位异或.要使所有子段的价值按位与的结果最大,输 ...
- FZU2018级算法第二次作业 2.10 逆序数（权值线段树）
题目: Nk 最近喜欢上了研究逆序数,给出一个由 1…n 组成的数列 a1,a2,a3…an, a1的逆序数就是在 a2…an 中,比 a1 小的数的数量,而 a2 的逆序数就是 a3….an 中比 ...
- BUAA OO 2019 第二单元作业总结
目录 总 架构 controller model view 优化算法 Look 算法 多种算法取优 预测未来 多线程 第五次作业 第六次作业 第七次作业 代码静态分析 UML 类图 类复杂度 类总代码 ...
- 【2019.10.17】十天Web前端程序员体验（软件工程实践第五次作业）
结对信息.具体分工 Github地址:https://github.com/MokouTyan/131700101-031702425 学号 昵称 主要负责内容 博客地址 131700101 莫多 代 ...
随机推荐
- 看阿里P7讲MyBatis：从MyBatis的理解以及配置和实现全帮你搞懂
前言 MyBatis 是一款优秀的持久层框架,一个半 ORM(对象关系映射)框架,它支持定制化 SQL.存储过程以及高级映`射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结 ...
- 面试腾讯，字节跳动首先要掌握的Java多线程，一次帮你全掌握！
一.程序,进程,线程联系和区别 其实程序是一段静态的代码,它是应用程序执行的脚本.进程就是程序动态的执行过程,它具有动态性,并发性,独立性.线程是进程调度和执行的单位. 进程:每个进程都有独立的代码和 ...
- Camtasia绿幕素材的视频合成
随着科技和互联网的快速发展,让越来越多的人喜欢上了视频的各项制作,那么怎么让两个视频进行合成并一起播放呢?操作很简单,下面来讲解具体的操作步骤.小编选用的是Camtasia2019版本的视频编辑软件进 ...
- FL studio系列教程（十八）：FL Studio输出监视面板讲解
在FL Studio编曲制作软件中输出监视器面板主要的功能是监视输出电平和波形以及频谱.下面大家就跟小编一起来认识下什么是FL Studio监视面板以及它的一些特征吧! 1.首先,我们来看一下输出监视 ...
- 获取qq头像
1 <?php 2 header('content-type: image/jpeg'); 3 $QQ = $_GET['qq']; 4 $time2 = date('Y-m-d H:i:s') ...
- C#6,C#7,V#8,C#9 的新特性总结
看了一下,下图的所有我都有用过,感觉越高的版本越好用. C# 6.0 特性 C# 7.0 Vs2017 C# 8.0 .net core 3.0+ C#9.0 .net5 C#的各种语法糖, ...
- C语言讲义——数组和指针
数组名表示的是这个数组的首地址.即如果有int a[10],则a 相当于&a[0]. #include <stdio.h> main() { int a[5]= {1,3,5,7, ...
- 如何让文科生5分钟写上Python
序言 这篇文章是转型后发表的第一篇文章,有必要先聊一下我的写文计划. 串行文章和并行文章 我会按照发文顺序分为串行文章和并行文章.Python 语言本身的内容,我会按照入门.进阶.原理的顺序依次展开. ...
- 走进flex布局
简介:flex 是一个CSS的display 属性中新添加一个值. 随着inline-flex的使用,它将使它适用的元素成为一个flex container(伸缩容器),而这个元素的每个子元素将成为 ...
- C语言中 EXIT_FAILURE和EXIT_SUCCESS
1.C语言中 宏EXIT_FAILURE和EXIT_SUCCESS定义在头文件stdlib.h中,是一个符号常量,定义如下: #define EXIT_FAILURE 1 #define EXIT_S ...