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+/,"/* ...
随机推荐
- str使用注意点（未完待续）
1.(切片)str[num1,num2],是指截取 str[num1] 到 str[num2-1] 直接的元素
- h264封包介绍
这个要看你怎么理解了.和MPEG2.MPEG4相比,H.264字节流中帧的形式发生了变化.以视频帧为例,MPEG2和MPEG4字节流在传输的时候提取帧的关键参数,将其封装入传输包首部,比如TS包或RT ...
- 利用junit对springMVC的Controller进行测试
本文转自http://www.tuicool.com/articles/7rMziy 平时对junit测试service/DAO层已经很熟悉不过了,如果不了解,可以猛戳这里,但是我们要测试contro ...
- CodeForces - 344A Magnets (模拟题)
CodeForces - 344A id=46664" style="color:blue; text-decoration:none">Magnets Time ...
- Python——迭代器和解析(3)
用迭代工具模拟zip和map ====================================================================== 我们已经知道了zip怎样组合 ...
- <LeetCode OJ> 31. Next Permutation
31. Next Permutation Total Accepted: 54346 Total Submissions: 212155 Difficulty: Medium Implement ne ...
- luogu1965 转圈游戏
题目大意 n 个小伙伴(编号从 0 到 n-1)围坐一圈玩游戏.按照顺时针方向给 n 个位置编号,从0 到 n-1.最初,第 0 号小伙伴在第 0 号位置,第 1 号小伙伴在第 1 号位置,--,依此 ...
- codetemplate
<?xml version="1.0" encoding="UTF-8" standalone="no"?><templa ...
- c14---排序，查找
// // main.c // 冒泡排序 // // Created by xiaomage on 15/6/10. // Copyright (c) 2015年 xiaomage. All righ ...
- 样条函数（spline function）—— 分段多项式函数（piecewise polynomial function）
1. 分段多项式函数 样条函数是某种意义上的分段函数. Spline (mathematics) - Wikipedia 最简单的样条函数是一种分段多项式函数(piecewise polynomial ...