js二次作业
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二次作业的更多相关文章
- 软工 · 第十二次作业 - Beta答辩总结
福大软工 · 第十二次作业 - Beta答辩总结 写第十二次的时候操作失误直接在Beta版本的博客里改了...第七次冲刺的作业链接补在这里 Beta(7/7) 组长本次博客作业链接 项目宣传视频链接 ...
- JS二维数组排序组合
需求是这样的:http://q.cnblogs.com/q/29093/ 这里简述一下: 现在有一个不确定长度的数组.比如:var temp=[["Fu","Hai&qu ...
- 一天带你入门到放弃vue.js(二)
接下来我们继续学习一天带你入门到放弃系列vue.js(二),如有问题请留言讨论! v-if index.html <div id="app"> <p v-if=& ...
- js 二维数组 for 循环重新赋值
javascript 二维数组的重新 组装 var arr = [[1,2],[3,4],[5,6],[7,8]]; var temp = new Array(); for(var i= 0 ;i&l ...
- 201621123005《Java程序设计》第十二次作业
<Java程序设计>第十二次作业 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 面向系统综合设计-图书馆管理系统或购物车 使用流与文件改造 ...
- 2017-2018-1 《Linux内核原理与设计》第十二周作业
<linux内核原理与设计>第十二周作业 Sql注入基础原理介绍 分组: 和20179215袁琳完成实验 一.实验说明 SQL注入攻击通过构建特殊的输入作为参数传入Web应用程序,而这 ...
- 实验十二 团队作业8：软件测试与Alpha冲刺
实验十二 团队作业8:软件测试与Alpha冲刺 实验时间 2018-6-13 Deadline: [6.13-6.19]之间任选连续5天的23:00,以团队随笔博文提交时间为准. 评分标准: 按时交 ...
- js二维数组定义和初始化的三种方法总结
js二维数组定义和初始化的三种方法总结 方法一:直接定义并且初始化,这种遇到数量少的情况可以用var _TheArray = [["0-1","0-2"],[& ...
- 实验十二 团队作业8：软件测试与Alpha冲刺 第四天
项目 内容 这个作业属于哪个课程 老师链接 这个作业的要求在哪里 实验十二 团队作业8:软件测试与Alpha冲刺 团队名称 Always Run! 作业学习目标 (1)掌握软件测试基础技术 (2)学习 ...
随机推荐
- 网关高可用之keepavlived全流程（安装/配置/验证/解析）
1.场景描述 因为要做网关的高可用,用到了keepalived+nginx,来保证nginx的高可用.(微服务时代之网关及注册中心高可用架构设计),如下图: 安装了keepavlived,走了一些弯路 ...
- 右键没有新建word选项
两类解决办法 一. 1. 新建一个txt文本,并插入如下内容: Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.doc] @=&quo ...
- Lucene 全文检索入门
博客地址:http://www.moonxy.com 一.前言 Lucene 是 apache 软件基金会的一个子项目,由 Doug Cutting 开发,是一个开放源代码的全文检索引擎工具包,但它不 ...
- Day 19 磁盘管理
1.磁盘的基本概念 1.什么是磁盘 磁盘(disk)是指利用磁记录技术存储数据的存储器. 磁盘是计算机主要的存储介质,可以存储大量的二进制数据,并且断电后也能保持数据不丢失. *绝大多数人对硬盘都不陌 ...
- MOOC 数据库系统笔记（一）：初步认识数据库系统
概述 什么是数据库 数据库是电子化信息的集合 数据库起源于规范化"表(Table)"的处理. Table:以按行按列形式组织及展现的数据. E.F.Codd,基于对"表( ...
- 【linux】【sonarqube】安装sonarqube7.9
前言 SonarQube 是一款用于代码质量管理的开源工具,它主要用于管理源代码的质量. 通过插件形式,可以支持众多计算机语言,比如 java, C#, go,C/C++, PL/SQL, Cobol ...
- 针对媒体不实报道误导大众--抹黑C#工资垫底
最近注意到一些媒体故意抹黑C# 工资垫底,参见 https://www.toutiao.com/i6741889572931633668/: 通过搜索引擎搜索<编程语言薪酬排行:Python薪资 ...
- 小鸟初学Shell编程（七）变量引用及作用范围
变量引用 那么定义好变量,如何打印变量的值呢?举例下变量引用的方式. ${变量名}称作为对变量的引用 echo ${变量名}查看变量的值 ${变量名}在部分情况下可以省略成 $变量名 [root@li ...
- zookeeper 都有哪些使用场景？
面试题 zookeeper 都有哪些使用场景? 面试官心理分析 现在聊的 topic 是分布式系统,面试官跟你聊完了 dubbo 相关的一些问题之后,已经确认你对分布式服务框架/RPC框架基本都有一些 ...
- Angular6 CodeMirror在线编辑sql 智能提示
1. 安装ng2-codemirror包.codemirror包 npm install ng2-codemirror -- save npm install codemirror -- save 2 ...