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+/,"/* ...
随机推荐
- Atcoder AGC031B Reversi (DP计数)
简单的计数题.(总算做出一道AGC的B题了,然而这场比赛我忘记打了233333) 题目链接: https://atcoder.jp/contests/agc031/tasks/agc031_b 题意: ...
- 2018ICPC南京
可能上一次秦皇岛拿了银,有了偶像包袱? 打的时候感觉状态不是很好. 第一题,让你每次将连续一段区间的石头都拿掉.. 然后让你做个博弈. 橘子一顿分析,认为k+1的倍数都是输. 这时,我们以及默认i+1 ...
- CSS行高line-height的学习
一.定义和用法 line-height 属性设置行间的距离(行高). 可能的值 normal默认.设置合理的行间距. number设置数字,此数字会与当前的字体尺寸相乘来设置行间距. length设置 ...
- elasticsearch 权威指南聚合阅读笔记(七)
count(1) select clssId,count(1) from student group by classId { "size":0, "aggs" ...
- [Javascript Crocks] Recover from a Nothing with the `alt` method
Once we’re using Maybes throughout our code, it stands to reason that at some point we’ll get a Mayb ...
- APP漏洞自动化扫描专业评测报告（中篇）
前言 上一篇中通过对阿里聚安全[1].360App漏洞扫描[2].腾讯金刚审计系统[3].百度移动云测试中心[4]以及AppRisk Scanner[5] 在收费情况.样本测试后的扫描时间对比和漏洞项 ...
- Android 怎样实现 焦点图的 无线循环滑动的状态?
參考网址:http://my.oschina.net/xsk/blog/119167 总体的架构:ViewPgaer 中直接嵌套 IamgeView 方案一: 重写Viewpager 这样有局限性 ...
- Linux命令（九）——系统监视和进程控制
与windows系统一样,linux系统中也有很多进程在同时运行,每个进程都有一个识别码PID,它是进程的唯一识别标志. 一.进程的类型 1.系统进程 在操作系统启动后,系统环境平台运行所加载的进程, ...
- 面向对象的三大特性之二——继承（含super的使用）
1.继承的语法:class 子类 extends 父类 例1: class Person { int age; String name; public void print1() { System.o ...
- keyboard键盘demo
main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:and ...