JS 20180416课时训练
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: auto;
padding: 0 px;
} #a1 {
width: 1000px;
height: 200px;
transition: 2s;
background-color: white;
box-shadow: 8px 8px 8px gray;
color: gray;
} #a11 {
width: 1000px;
height: 50px; } #a12 {
width: 1000px;
height: 50px; } #a121 {
width: 100px;
height: 50px; float: left;
margin-left: 50px;
background-color: gainsboro;
text-align: center;
line-height: 50px; } #a121:hover {
cursor: pointer;
} #a122 {
width: 100px;
height: 50px; float: left;
background-color: gainsboro;
margin-left: 10px;
text-align: center;
line-height: 50px;
} #a122:hover {
cursor: pointer;
} #a123 {
width: 100px;
height: 50px; float: left;
background-color: gainsboro;
margin-left: 10px;
text-align: center;
line-height: 50px;
} #a123:hover {
cursor: pointer;
} #a124 {
width: 100px;
height: 50px; float: left;
background-color: gainsboro;
margin-left: 10px;
text-align: center;
line-height: 50px;
} #a124:hover {
cursor: pointer;
} #a13 {
width: 1000px;
height: 95px; } #a2 {
width: 1000px;
height: 200px;
transition: 2s;
background-color: white;
box-shadow: 8px 8px 8px gray;
margin-top: 20px;
overflow: hidden;
} #a21 {
width: 1000px;
height: 50px; } #a22 {
width: 1000px;
height: 50px; } #a221 {
width: 100px;
height: 50px; float: left;
margin-left: 50px;
background-color: gainsboro;
text-align: center;
line-height: 50px;
} #a221:hover {
cursor: pointer;
} #a222 {
width: 100px;
height: 50px; float: left;
background-color: gainsboro;
margin-left: 10px;
text-align: center;
line-height: 50px;
} #a222:hover {
cursor: pointer;
} #a223 {
width: 100px;
height: 50px; float: left;
background-color: gainsboro;
margin-left: 10px;
text-align: center;
line-height: 50px;
} #a223:hover {
cursor: pointer;
} #a224 {
width: 100px;
height: 50px; float: left;
background-color: gainsboro;
margin-left: 10px;
text-align: center;
line-height: 50px;
} #a224:hover {
cursor: pointer;
} #a23 {
width: 1000px;
height: 95px; } #a3 {
width: 1000px;
height: 200px;
transition: 2s;
background-color: white;
box-shadow: 8px 8px 8px gray;
margin-top: 20px;
overflow: hidden;
} #a31 {
width: 1000px;
height: 50px; } #a32 {
width: 1000px;
height: 50px; } #a321 {
width: 200px;
height: 40px; float: left;
margin-left: 50px;
background-color: gainsboro;
text-align: center;
line-height: 50px;
} #a321:hover {
cursor: pointer;
} #a322 {
width: 100px;
height: 50px; float: left;
background-color: gainsboro;
margin-left: 10px;
text-align: center;
line-height: 50px;
} #a322:hover {
cursor: pointer;
} #a323 {
width: 200px;
height: 50px; float: left;
background-color: gainsboro;
margin-left: 10px;
text-align: center;
line-height: 50px;
} #a323:hover {
cursor: pointer;
} #a33 {
width: 1000px;
height: 95px; }
.a4{
width: 1000px;
height: 200px;
transition: 2s;
background-color: white;
box-shadow: 8px 8px 8px gray;
margin-top: 20px; }
.a41{
width: 1000px;
height: 100px; }
.a42{
width: 1000px;
height: 98px; }
.a421 {
width: 200px;
height: 50px; float: left;
margin-top: 20px;
background-color: gainsboro;
margin-left: 50px;
text-align: center;
line-height: 50px;
} .a421:hover {
cursor: pointer;
}
.a422 {
width: 100px;
height: 50px; float: left;
margin-top: 20px;
background-color: gainsboro;
margin-left: 20px;
text-align: center;
line-height: 50px;
} .a422:hover {
cursor: pointer;
}
.a5{
width: 800px;
height: 400px;
transition: 2s;
background-color: red;
box-shadow: 8px 8px 8px gray;
margin-top: 20px;
overflow: hidden;
}
</style>
</head> <body>
<div id="a1">
<div id="a11">
1、函数传参，一个参数
</div>
<div id="a12">
<div id="a121" onclick="b1(1)">
背景变黄
</div>
<div id="a122" onclick="b1(2)">
背景变红
</div>
<div id="a123" onclick="b1(3)">
背景变黑
</div>
<div id="a124" onclick="b1(4)">
回复原样
</div>
</div>
<div id="a13">
定义参数为color，变量div
</div>
</div>
<div id="a2">
<div id="a21">
1、函数传参，二个参数
</div>
<div id="a22">
<div id="a221" onclick="b2(1)">
背景变窄
</div>
<div id="a222" onclick="b2(2)">
背景变黄
</div>
<div id="a223" onclick="b2(3)">
背景变高
</div>
<div id="a224" onclick="b2(4)">
回复原样
</div>
</div>
<div id="a23">
定义函数的参数为name和value
</div>
</div>
<div id="a3">
<div id="a31">
1、函数传参，参数加变量
</div>
<div id="a32">
<input type="" name="a321" id="a321" value="你拍一我拍一" />
<div id="a322" onclick="b3(1)">
改变文字
</div>
<div id="a323" onclick="b3(2)">
添加title属性（鼠标经过）
</div> </div>
<div id="a33">
定义函数的参数为name
</div>
</div>
<div class="a4">
<div class="a41">
4、修改样式、通过调取className
</div>
<div class="a42">
<div class="a421" onclick="b4(1)">
变红 变高 变窄
</div>
<div class="a422" onclick="b4(2)">
回复原样
</div>
</div>
</div>
</body> </html>
<script type="text/javascript">
function b1(t) {
if(t == 1){
var a121 = document.getElementById("a1")
a1.style.background = "yellow"
}
else if(t == 2){
var a122 = document.getElementById("a1")
a1.style.background = "red"
}
else if(t == 3){
var a123 = document.getElementById("a1")
a1.style.background = "black"
}
else{
var a124 = document.getElementById("a1")
a1.style.background = "white"
}
} function b2(q) {
if(q == 1){
var a221 = document.getElementById("a2")
a2.style.width = "800px"
}
else if(q == 2){
var a222 = document.getElementById("a2")
a2.style.background = "yellow"
}
else if(q == 3){
var a223 = document.getElementById("a2")
a2.style.height = "300px"
}
else{
var a224 = document.getElementById("a2")
a2.style.height = "200px"
a2.style.width = "1000px"
a2.style.background = "white"
}
} function b3(p) {
if(p == 1){
var a322 = document.getElementById("a321")
a321.value = "两个小孩坐飞机"
}
else if(p == 2){
var a323 = document.getElementById("a321")
a321.style.title = "两个小孩坐飞机"
}
} function b4(w){
if(w == 1){
var a4 = document.getElementsByClassName("a4")[0];
a4.className = "a5";
}
else if(w == 2){
var a5 = document.getElementsByClassName("a5")[0];
a5.className = "a4";
}
} </script>
JS 20180416课时训练的更多相关文章
- JS 20180416考试
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS 20180416作业
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- angularjs, nodejs, express, gulp, karma, jasmine 前端方案整合
今年转向做前端开发,主要是做angularjs开发,期间接触了nodejs平台,从此一发不可收拾. npm丰富的插件库,express 开发框架, grunt, gulp构建工具,karma测试管理工 ...
- 软工+C(2017第9期) 助教指南
//上一篇:提问与回复 [备注]:请优先阅读 Handshake/点评/评分 三部分. 0x00 Handshake 了解<构建之法>作者参与软件工程改革的一些背景: http://www ...
- 28款GitHub最流行的开源机器学习项目
现在机器学习逐渐成为行业热门,经过二十几年的发展,机器学习目前也有了十分广泛的应用,如:数据挖掘.计算机视觉.自然语言处理.生物特征识别.搜索引擎.医学诊断.DNA序列测序.语音和手写识别.战略游戏和 ...
- 软工+C(9): 助教指南，持续更新...
上一篇:提问与回复 下一篇:从命令行开始逐步培养编程能力(Java) 目录: ** 0x00 Handshake ** 0x01 点评 ** 0x02 评分 ** 0x03 知识储备 ** 0x04 ...
- 28款GitHub最流行的开源机器学习项目,推荐GitHub上10 个开源深度学习框架
20 个顶尖的 Python 机器学习开源项目 机器学习 2015-06-08 22:44:30 发布 您的评价: 0.0 收藏 1收藏 我们在Github上的贡献者和提交者之中检查了用Python语 ...
- codefordream 关于js中级训练
中级训练接着就紧锣密鼓的开始了. 首先是关于变量,变量的作用是给一个数据值标注名称. 注:JavaScript中变量名,函数名,参数名的命名规范:至少由字母,下划线,美元符号,数字其中的一种组成,但不 ...
- codefordream 关于js初级训练
这里的初级训练相对简单,差不多都是以前知识温习. 比如输出“hello world”,直接使用console.log()就行.注释符号,“//”可以注释单行,快捷键 alt+/,"/* ...
随机推荐
- mysql如何删除数据库指定ID段的数据库。比如删除id 1-500的数据。
delete from tablename where id>=1 and id<=500或者DELETE FROM `数据库名称`.`数据表名称` WHERE `house_cs`.`i ...
- 【习题 4-8 UVA - 12108】Extraordinarily Tired Students
[链接] 我是链接,点我呀:) [题意] [题解] 一个单位时间.一个单位时间地模拟就好. 然后对于每个人. 记录它所处的周期下标idx 每个单位时间都会让每个人的idx++ 注意从醒着到睡着的分界线 ...
- Spring深入理解（三）
Spring 中 AOP 特性详解 动态代理的实现原理 要了解 Spring 的 AOP 就必须先了解动态代理的原理,因为 AOP 就是基于动态代理实现的.动态代理还要从 JDK 本身说起. 在 Jd ...
- Column注解的的RetentionPolicy的属性值是RUTIME,这样注解处理器可以通过反射，获取到该注解的属性值，从而去做一些运行时的逻辑处理
1.Column注解的的RetentionPolicy的属性值是RUTIME,这样注解处理器可以通过反射,获取到该注解的属性值,从而去做一些运行时的逻辑处理 2. 自定义注解: 使用@interfac ...
- POJ 1198/HDU 1401
双向广搜... 呃,双向广搜一般都都用了HASH判重,这样可以更快判断两个方向是否重叠了.这道题用了双向的BFS,有效地减少了状态.但代码太长了,不写,贴一个别人的代码.. #include<i ...
- java内存结构(执行时数据区域)
java虚拟机规范规定的java虚拟机内存事实上就是java虚拟机执行时数据区,其架构例如以下: 当中方法区和堆是由全部线程共享的数据区. Java虚拟机栈.本地方法栈和程序计数器是线程隔离的数据区. ...
- win7/WIN8.1(x64) 下使用MSDE WIN10不行
通过强制安装(使用管理员权限),手工启动服务的方式,能够在其win7 win81上安装并使用MSDE Microsoft SQL Server 2000 Service Pack 4 Desktop ...
- SQLServer 多点及时备份技巧
为了保证数据库的安全性,我们都会规划数据库的容灾策略,包含本地备份.异地备份.raid.或者使用高可用性(如 日志传送.镜像.复制等)进行异地容灾.因为 SqlServer 数据库的备份仅仅有一个备份 ...
- elasticsearch插件开发
检索引擎Elasticsearch支持插件模式.有些时候你可能须要安装一些插件.甚至自己开发插件,这里就提供一个開始ES插件开发演示样例,ES版本号为1.5.2. 一.插件类继承自org.elasti ...
- luogu1775 古代人的难题 打表找规律
题目大意:给出一正整数k,求满足(x^2-x*y-y^2)^2=1且x,y∈[1,k]且x^2+y^2最大的正整数x,y. 既然x,y的范围给出来了,我们便有了暴力解法.因此,本题最适合打表找规律了! ...