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+/,"/* ...
随机推荐
- 14.Idea在html里面的快捷键
1.IntelliJ-Idea里常用的快捷键 Ctrl+/ 或 Ctrl+Shift+/ 注释(// 或者/*…*/ ) Shift+F6 重构-重命名 Ctrl+X 删除行 Ctrl+D 复制行 C ...
- dubbo-源码阅读之dubboSpi实现原理
dubboSPI实现思想跟javaspi的思想差不多javaspi是ServiceLoad 而dubbo自己写的是ExtensionLoader SPI接口定义 @Documented @Retent ...
- Locally managed (LMT) vs. Dictionary managed (DMT) tablespace
The LMT is implemented by adding the extent management local clause to the tablespace definition syn ...
- CentOS 6.3(x86_32)下安装Oracle 10g R2
一.硬件要求 1.内存 & swap Minimum: 1 GB of RAMRecommended: 2 GB of RAM or more 检查内存情况 # grep MemTotal / ...
- ExtJs之Ext.ElementLoader.load
稍微书上代码不适合. var btns = Ext.select('input'); 需要更改为: var btns = Ext.select('input', true); 不然报错: [E] Ex ...
- [bzoj1218][HNOI2003]激光炸弹_暴力
激光炸弹 bzoj-1218 HNOI-2003 题目大意:在笛卡尔坐标系上有n个点,问一个平行于坐标轴的r*r的正方形可以最多覆盖多少个目标. 注释:$1\le n \le 10000$,$1\le ...
- @Service注解的作用
@Service注解作用 1. 其getBean的默认名称是类名(头字母小写),可以@Service(“xxxx”)这样来指定, 2.其定义的bean默认是单例的,可以使用@Service(“b ...
- find-median-from-data-stream & multiset priority queue 堆
https://leetcode.com/problems/find-median-from-data-stream/ 这道题目实在是不错,所以单独拎出来. https://discuss.leetc ...
- iOS中基于 Socket 的 C/S 结构网络通信（中）
结合上一篇的知识.接下来将介绍基于 TCP 协议的 Socket 编程.因为 Socket 须要有client和服务端,那么如今实现的是关于服务端的简单程序.服务端採用的是CFStream 类来实现 ...
- OC中使用UI自己定义控件实现计算器的设计（版本号1简单的加减乘除，连加，连减，连除，连乘）
OC中使用UI自己定义控件实现计算器的设计(版本号1简单的加减乘除,连加.连减,连除,连乘) #import <UIKit/UIKit.h> @interface ViewControll ...