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 莫多 代 ...
随机推荐
- 深度分析：java设计模式中的原型模式，看完就没有说不懂的
前言 原型模式(Prototype模式)是指:用原型实例指定创建对象的种类,并且通过拷贝这些原型,创建新的对象 原型模式是一种创建型设计模式,允许一个对象再创建另外一个可定制的对象,无需知道如何创建的 ...
- Guitar Pro 教程之有效的几种泛音
学习音乐的朋友们都知道,泛音的种类分为好几种,一般分为自然泛音和人工泛音,击弦泛音,拨片泛音,半泛音等等.本章节采用图文结合的方式讲解{cms_selflink page='index' text=' ...
- 「CSP-S 2019」划分
description loj 3212 solution 首先容易想到\(n^3\)DP,即令\(f_{i,j}\)表示前\(i\)个数的划分,其中最后一段是从\(j\)开始时的答案 于是有 \[f ...
- Java中的主线程
目录 概览 主线程 怎么来控制主线程 主线程和main()函数的关系 主线程中的死锁(单个线程) 概览 前段时间有同事提到了主线程这个名词,但当时我们说的主线程是指Java Web程序中每一个请求进来 ...
- 如何循序渐进、有效地学习JavaScript？
转载链接:https://www.zhihu.com/question/19713563/answer/23068003 分享一篇 超毛 的一篇文章<如何学习javascript>(原文链 ...
- 适合 Java 新手的开源项目集合——在 GitHub 学编程
作者:HelloGitHub--老荀 当今互联网份额最大的编程语言是哪一个?是 Java!这两年一直有听说 Java 要不行了.在走下坡路了.没错,Java 的确在走下坡路,未来的事情的确不好说,但是 ...
- 网络拓扑实例之RRPP单环(五)
组网图形 RRPP简介 在城域网和企业网的网络规划以及实际组网应用中大多会采用环网结构来提高网络的可靠性.采用环网结构的好处是:当环上任意一个节点或节点之间的链路发生故障,都可以将数据流量切换到备份链 ...
- QBXT 提高组储备营 2020.夏 游记
DAY 1 是第一天呐!老师好强!讲得好仔细!连我都全懂了![doge] 突然对后面几天充满了期待-- 复习内容:二分,排序,贪心,搜索(好评) 新知识:Huffman树及Huffman编码,对拍,二 ...
- mysql hash join
面阿里问到的. "mysql join的实现有几种方式?" "啥?不就一种吗?" 转载: 简单介绍:https://zhuanlan.zhihu.com/p/9 ...
- 【佛山市选2013】JZOJ2020年8月7日提高组T1 回文子序列
[佛山市选2013]JZOJ2020年8月7日提高组T1 回文子序列 题目 描述 回文序列是指左右对称的序列.例如1 2 3 2 1是回文序列,但是1 2 3 2 2就不是.我们会给定一个N×M的矩阵 ...