js初级实现省级联动及div控制另外一个div，以及子类父类div牵制

来源：互联网发布：知呼和分答编辑：程序博客网时间：2024/05/21 17:11

学习了js一段时间之后，只会写最基本的代码。现在有六个问题：

①：实现div的鼠标事件，当鼠标放在一个div上面的时候，背景颜色和字体的颜色都会发生改变（导航栏）

②：当点击文字的时候，在它的下方会出现相应的子目录（菜单功能）

③：当点击文字的时候，会出现对应的效果。查看，会在另外一个div中显示它的内容。删除：会将所有的内容都隐藏。

④：密码的输入与检测。

⑤：省级联动功能。当一个框中选择了一个内容，在另外一个下拉框中出现时对应的选项。

代码如下：

HTML：

<html>
<head>
<meta charset="utf-8"/>

<link rel="stylesheet" type="text/css" href="test.css"/>
</head>

<script>

function fc1(node){
node.style.backgroundColor="rgb(0,162,232)";
}
function fc2(node){
node.style.backgroundColor="rgb(14,89,170)";
}
function fc3(node){
node.style.backgroundColor="rgb(25,40,48)"
}
function fc4(node){
node.style.backgroundColor="rgb(17,26,33)"
}

function deleInput1(){
var p=document.getElementById("m1");

p.parentNode.removeChild(p);
}
function deleInput2(){
var p=document.getElementById("m2");

p.parentNode.removeChild(p);
}
function deleInput3(){
var p=document.getElementById("m3");

p.parentNode.removeChild(p);
}

function fuc5(){
var m=document.getElementById("m4");

m.style.display="block";

}
function fuc6(){
var m=document.getElementById("m5");
var f=document.getElementById("m4");
f.style.display="none";

m.style.display="block";

}
function fuc7(){
var m=document.getElementById("m6");
var f=document.getElementById("m5");
f.style.display="none";
m.style.display="block";

}

function fuc8(){
var value=document.getElementById("username").value;
var a=document.getElementById("ume");

if((value.length>12)||(value.length<1)){
a.style.display="block";
}
}
function fuc9(){
var value=document.getElementById("password").value;
var a=document.getElementById("pasw");

if((value.length>8)||(value.length<4)){
a.style.display="block";
}
}

function fuc10(){
var value1=document.getElementById("password").value;
var value2=document.getElementById("confirm").value;
var a=document.getElementById("conpasw1");
var b=document.getElementById("conpasw2");
if(value1==value2){

a.style.display="block";

}else{
b.style.display="block";

}
}

function fuc11(){
var value=document.getElementById("email").value;
var a=document.getElementById("emi1");
var b=document.getElementById("emi2");
var myReg=/^[a-zA-Z0-9_-]+@([qq]+\.)+(com)$/;
if(myReg.test(value)){
b.style.display="block";

}else{

a.style.display="block";
}

}

function clickOpt(){
var city=document.getElementByID("province");
var Citylength=city.option.length;
if(Citylength>0){
for(var i=0;i<Citylength;i++)

city.option.remove(0);

}

}

cities = new Object();
cities['河北省']=new Array('石家庄', '张家口市', '承德市', '秦皇岛市', '唐山市', '廊坊市', '保定市', '沧州市', '衡水市', '邢台市', '邯郸市');
cities['山西省']=new Array('太原市', '大同市', '朔州市', '阳泉市', '长治市', '晋城市', '忻州地区', '吕梁地区', '晋中市', '临汾地区', '运城地区');

function set_city(province, city)
{
var pv, cv;
var i, ii;

pv=province.value;
cv=city.value;

city.length=1;


if(pv=='0') return;
if(typeof(cities[pv])=='undefined') return;

for(i=0; i<cities[pv].length; i++)
  {
ii = i+1;
city.options[ii] = new Option();
city.options[ii].text = cities[pv][i];
city.options[ii].value = cities[pv][i];
}

}

</script>

<body>

< div id="top1" onmouseover="fc1(this)" onmouseout="fc2(this)" style="width:50px;height:40px;margin-left:10px">

</div>
<div id="top1" onmouseover="fc1(this)" onmouseout="fc2(this)">
<a href="#">首页</a>
</div>
<div id="top1" onmouseover="fc1(this)" onmouseout="fc2(this)">
<a href="#">首页</a>
</div>
<div id="top1" onmouseover="fc1(this)" onmouseout="fc2(this)">
<a href="#">首页</a>
</div>
<div id="top1" onmouseover="fc1(this)" onmouseout="fc2(this)">
<a href="#">首页</a>
</div>
<div id="top1" onmouseover="fc1(this)" onmouseout="fc2(this)">
<a href="#">首页</a>
</div>


<div id="top2">
<div class="top21" onmouseover="fc3(this)" onmouseout="fc4(this)" onclick="document.all.child1.style.display=(document.all.child1.style.display =='none')?'':'none'" ><a class="a1" href="#">123</a>
</div>
<div id="child1" style="display:none">
<a href="#">- 子目录1</a> <br>
<a href="#">- 子目录2</a> <br>
<a href="#">- 子目录3</a> <br>
<a href="#">- 子目录4</a> <br>
<a href="#">- 子目录1</a> <br>
<a href="#">- 子目录2</a> <br>
</div>

<div class="top21" onmouseover="fc3(this)" onmouseout="fc4(this)"onclick="document.all.child2.style.display=(document.all.child2.style.display =='none')?'':'none'" ><a class="a1" href="#">123</a>
</div>
<div id="child2" style="display:none">
<a href="#">- 子目录1</a> <br>
<a href="#">- 子目录2</a> <br>
<a href="#">- 子目录3</a> <br>
<a href="#">- 子目录4</a> <br>
<a href="#">- 子目录1</a> <br>
<a href="#">- 子目录2</a> <br>

</div>
<div class="top21" onmouseover="fc3(this)" onmouseout="fc4(this)" onclick="document.all.child3.style.display=(document.all.child3.style.display =='none')?'':'none'" ><a class="a1" href="#">123</a>
</div>
<div id="child3" style="display:none">
<a href="#">- 子目录1</a> <br>
<a href="#">- 子目录2</a> <br>
<a href="#">- 子目录3</a> <br>
<a href="#">- 子目录4</a> <br>
<a href="#">- 子目录1</a> <br>
<a href="#">- 子目录2</a> <br>

</div>
<div class="top21" onmouseover="fc3(this)" onmouseout="fc4(this)"onclick="document.all.child4.style.display=(document.all.child4.style.display =='none')?'':'none'" ><a class="a1" href="#">123</a>
</div>
<div id="child4" style="display:none">
<a href="#">- 子目录1</a> <br>
<a href="#">- 子目录2</a> <br>
<a href="#">- 子目录3</a> <br>
<a href="#">- 子目录4</a> <br>
<a href="#">- 子目录1</a> <br>
<a href="#">- 子目录2</a> <br>

</div>
<div class="top21" onmouseover="fc3(this)" onmouseout="fc4(this)"onclick="document.all.child5.style.display=(document.all.child5.style.display =='none')?'':'none'" ><a class="a1" href="#">123</a>
</div>
<div id="child5" style="display:none">
<a href="#">- 子目录1</a> <br>
<a href="#">- 子目录2</a> <br>
<a href="#">- 子目录3</a> <br>
<a href="#">- 子目录4</a> <br>
<a href="#">- 子目录1</a> <br>
<a href="#">- 子目录2</a> <br>

</div>
<div class="top21" onmouseover="fc3(this)" onmouseout="fc4(this)"onclick="document.all.child6.style.display=(document.all.child6.style.display =='none')?'':'none'" ><a class="a1" href="#">123</a>
</div>
<div id="child6" style="display:none">
<a href="#">- 子目录1</a> <br>
<a href="#">- 子目录2</a> <br>
<a href="#">- 子目录3</a> <br>
<a href="#">- 子目录4</a> <br>
<a href="#">- 子目录1</a> <br>
<a href="#">- 子目录2</a> <br>

</div>
<div class="top21" onmouseover="fc3(this)" onmouseout="fc4(this)"onclick="document.all.child7.style.display=(document.all.child7.style.display =='none')?'':'none'" ><a class="a1" href="#">123</a>
</div>
<div id="child7" style="display:none">
<a href="#">- 子目录1</a> <br>
<a href="#">- 子目录2</a> <br>
<a href="#">- 子目录3</a> <br>
<a href="#">- 子目录4</a> <br>
<a href="#">- 子目录1</a> <br>
<a href="#">- 子目录2</a> <br>

</div>
</div>



<div id="top3">
<div id="top33">
<ul id="top31">
<li><span id="m1" style="color:blue">陕西各大高校的录取情况<span>　　 <span onclick="fuc5()">查看</span>　<spanonclick="deleInput1()">删除</span></li>
<li><span id="m2" style="color:blue">陕西各大高校的录取情况<span>　　<span onclick="fuc6()">查看</span>　<span onclick="deleInput2()">删除</span></li>
<li><span id="m3" style="color:blue">陕西各大高校的录取情况<span>　　<span onclick="fuc7()">查看</span>　<span onclick="deleInput3()">删除</span></li>
</ul>
</div>
<div id="top4">
<div id="m4">内容11111111111111111111111111</div>
<div id="m5">内容222222222222222222222222222</div>
<div id="m6">内容33333333333333333333333</div>
</div>
</div>
<div id="top5">

<div id="top51">
<input type="text" id="username" onblur="fuc8()" placeholder="请输入用户名"/>
<span id="ume" style="color:red;font-size:12px">长度是1-12个字符</span>
</div>

<div id="top52">
<input type="text" onblur="fuc9()" id="password" placeholder="请输入密码"/>
<span id="pasw" style="color:red;font-size:12px">请输入4-8个字符</span>
</div>
<div id="top53">
<input type="text" onblur="fuc10()" id="confirm" placeholder="请再次输入密码"/>
<span id="conpasw1" style="color:blue;font-size:12px">密码正确</span>
<span id="conpasw2" style="color:red;font-size:12px">两次密码不一样</span>
</div>
<div id="top54">
<input type="text" onblur="fuc11()" id="email" placeholder="请输入邮箱"/>
<span id="emi1" style="color:red;font-size:12px">错误(qq号@qq.com)</span>
<span id="emi2" style="color:blue;font-size:12px">输入正确</span>
</div>
</div>
<div id="top6">


<form name="form1" action="" method="get">
<select name="province" onChange="set_city(this, this.form.city);">
<option value="0">选择省</option>
<option value="河北省">河北省</option>
<option value="山西省">山西省</option>
</select>
<select name="city" id="citys">
<option value="0">选择城市</option>
</select>

</form>
</div>

</body>

</html>

CSS部分：

body{width:1000px;height:800px;}#top1{width:150px;height:40px;border:1px solid rgb(28,116,211);background-color:rgb(14,89,170);float:left;text-align:center;padding-top:12px;}a{text-decoration:none;}a:link{color:white;}a:active{color:white;}a:hover{color:white;}a:visited{color:white;}a.a1:link{color:rgb(239,228,176);}a.a1:active{color:rgb(239,228,176);}a.a1:hover{color:rgb(239,228,176);}a.a1:visited{color:rgb(239,228,176);}#top2{width:212px;height:600px;margin-left:10px;background-color:rgb(17,26,33);float:left;}.top21{width:200px;height:30px;border:1px solid rgb(73,73,73);text-align:center;padding-top:4px;}#top3{width:598px;height:150px;border:1px solid black;float:left;}#top31 li{list-style-type:none;width:310px;height:18px;border:1px solid black;margin-top:5px;}#top3.top4{width:358px;height:50px;border:1px solid black;}#m4{display:none;}#m5{display:none;}#m6{display:none;}#top5{width:300px;height:446px;border:1px solid black;float:left;}#top51{width:300px;height:30px;margin-top:5px;}#username{float:left;color:rgb(162,162,162);}#ume{float:left;width:120px;height:20px;margin-left:2px;display:none;}#top52{width:300px;height:30px;margin-top:5px;}#password{float:left;color:rgb(162,162,162);}#pasw{float:left;width:120px;height:20px;margin-left:2px;display:none;}#top53{width:300px;height:30px;margin-top:5px;}#confirm{float:left;color:rgb(162,162,162);}#conpasw1{float:left;width:120px;height:20px;margin-left:2px;display:none;}#conpasw2{float:left;width:120px;height:20px;margin-left:2px;display:none;}#top54{width:300px;height:40px;margin-top:5px;}#email{float:left;color:rgb(162,162,162);}#emi1{float:left;width:120px;height:20px;margin-left:2px;display:none;}#emi2{float:left;width:120px;height:20px;margin-left:2px;display:none;}#top6{width:296px;height:446px;float:left;border:1px solid black;}

阅读全文

0 0