1.要出现的效果:不点击是绿色,移上就会变红色,点击就会变成红色,而且移上其他的框理也不变红色。移出还是绿色
<style type="text/css">
#wai{
width:50px;
height:60px;}
.li{
width:50px;
height:30px;
background-color:#0F0;
border:1px solid #F00;}
</style>
<body>
<div id="wai">
<div class="li" οnclick="Dian(this)" οnmοuseοver="Yi(this)" οnmοuseοut="Zou()">日本</div>
<div class="li" οnclick="Dian(this)" οnmοuseοver="Yi(this)" οnmοuseοut="Zou()">韩国</div>
</div>
<script type="text/javascript">
function Dian(a)
{
/*要出现的效果:不点击是绿色,移上就会变红色,点击就会变成红色,而且移上其他的框理也不变红色。移出还是绿色*/
var li = document.getElementsByClassName("li");
for( var i=0;i<li.length;i++)
{
li[i].removeAttribute ("bs") ; /* 清除他的属性的目的是让其点击的时候,这个属性在此函数中不起任何的作用*/
li[i].style.backgroundColor = "#0F0";
}
a.setAttribute ("bs",1); /*bs想表示的是有没有选中 */
a.style.backgroundColor = "red";
}
function Yi(b)
{
var li = document.getElementsByClassName("li");
for( var i=0;i<li.length;i++)
{
if(li[i].getAttribute("bs")!= "1" ) /*已经点击一个框时,又移到别的框时,移上的时候给个判断,先获得bs这个属性,这个框依旧是绿色的。
*/
{
li[i].style.backgroundColor = "#0F0";
}
}
b.style.backgroundColor = "red";
}
function Zou()
{
var li = document.getElementsByClassName("li");
for( var i=0;i<li.length;i++)
{
if(li[i].getAttribute("bs")!= "1" ) /*如果不进行点击的话,移出时就恢复为以前的绿色,*/
{
li[i].style.backgroundColor = "#0F0";
}
}
}
</script>
效果的图:
总结:这个题里面涉及到的问题是,为何添加这个属性,如果单用点击事件和放上的话,放上时,确实都会变成红色,但是如果选中
一个,再放上其他的也会变红,想实现的效果是:不点击是绿色,移上就会变红色,点击就会变成红色,而且移上其他的框理也不变红色。移出还是绿色。不进行点击,就只执行放上和移出,点击了之后,屏蔽了移上和移出的功能,移出整个框
时点击的还是红色。
2.出现如下图中的效果:
<style type="text/css">
#wai{
width:500px;
height:200px;}
#zuo{
width:200px;
height:200px;
float:left;
}
#zhong{
width:100px;
height:200px;
float:left;}
#right{
width:200px;
height:200px;
float:left;}
</style>
<body>
<div id="wai">
<div id="zuo">
<select id="k" multiple="multiple" style="width:200px; height:100px;" >
<option value="四川">四川</option> <!--里面有value值-->
<option value="北京">北京</option>
</select>
</div>
<div id="zhong">
<div style="margin-top:15px; margin-left:20px;">
<input type="button" value="全" οnclick="All()"/>
</div>
<div style="margin-top:15px; margin-left:20px;">
<input type="button" value="单" οnclick="Dan()" />
</div>
</div>
<div id="right">
<select id="ka" multiple="multiple" style="width:200px; height:100px;">
</select>
</div>
</div>
</body>
<script type="text/javascript">
function Dan()
{
var k = document.getElementById("k");
var ka = document.getElementById("ka");
var zhi = k.value; /*取出左边列表的值,相当于取出里面的文字不用再添加点击事件了*/
var str;
str = "<option value='"+zhi+"'>"+zhi+"</option>"; /* 注意拼接,最外面有双引号时,里面就变成了单引号,输出某一参数的值:输出的值是"+a+"*/
var bs = 0; /*设置此变量的作用是,如果我左边的四川,北京都单击进去右边的框,再点击的话会又会重复进去右边的框。这个就是判断右面的文字有没有跟左面的文字有重复的。*/
for( var i=0;i<ka.childNodes.length;i++) childNodes.length 代表的是子元素的长度,连空格的样式都算进去了,相当于是把整个的左边的样式给拿了出来。
{
if(ka.childNodes.item(i).text==zhi)
{
bs=1; 有重复的文字出现;
}
}
if( bs==0)
{
ka.innerHTML = ka.innerHTML + str; /*相当于累加求和的意思,点一下按钮,进来一个,再点一下,又进来一个*/
}
}
function All()
{
var k = document.getElementById("k");
var ka = document.getElementById("ka");
ka.innerHTML = k.innerHTML;
}
/*总结:注意的是总体的布局,一个大的div里面又嵌了三个小的div,可以让其选择左流。*/