<!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>
浙公网安备 33010602011771号