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+/,"/* ...
随机推荐
- android网络类型之2G-3G切换
在android手机‘设置’-‘移动网络类型’里可以看到有关网络类型的选项,一般默认为3G优先. 如果有需要在程序中切换网络类型的朋友,不妨试试下面的方法.这里提供了几种思路,虽然可能对待 手机的方式 ...
- Java - 将vCard中十六进制编码转换成Unicode
做课程设计的时候在处理vCard格式的时候遇到过出现十六进制编码的情况,例如 QUOTED-PRINTABLE:=XX=XX=XX=XX=XX`````` 其中XX代表十六进制数,当然,也有可能在末尾 ...
- Eclipse全局搜索
按[Ctrl]+[H] 搜索时支持一些正则表达式. 参考: http://blog.csdn.net/huaweitman/article/details/38709323
- 先验概率 vs 后验概率
其实还不是很懂.看了这篇文章: http://blog.csdn.net/passball/article/details/5859878 事情还没有发生,要求这件事情发生的可能性的大小,是先验概 ...
- hadoop-2.6.0集群开发环境配置
hadoop-2.6.0集群开发环境配置 一．环境说明 1.1安装环境说明 本例中,操作系统为CentOS 6.6, JDK版本号为JDK 1.7,Hadoop版本号为Apache Hadoop 2. ...
- 支付宝又惹怒Windows Phone用户了
支付宝,重新.把WP用户惹怒了. 事情是酱紫的,苹果公布Apple Watch之后.支付宝钱包第一时间在微博上表示:"已经完毕适配Apple Watch版本号的开发工作,中国用户在订购App ...
- 【剑指Offer学习】【面试题34：丑数】
题目:我们把仅仅包括因子2.3 和5 的数称作丑数(Ugly Number).求从小到大的顺序的第1500个丑数. 举例说明: 比如6.8 都是丑数.但14 不是.它包括因子7.习惯上我们把1 当做第 ...
- Android开发时经经常使用的LogUtil
在开发过程中经经常使用到Log.我们常写的一种方式就是自己定义一个LogUtil工具类 private static boolean LOGV = true; private static boole ...
- Chrome Extension 的 webRequest模块的解读
Chrome Extension 的 webRequest模块的解读 文档在此:http://developer.chrome.com/trunk/extensions/webRequest.ht ...
- DotNetBar.Bar菜单的使用
DotNetBar.Bar菜单的使用 老帅 在C#中使用控件DevComponents.DotNetBar.Bar时,怎样设计菜单呢? 1.拖放生成一个菜单容器 拖放一个D ...