小试牛刀JavaScript鼠标事件

时间：2021-04-02 23:43:25

鼠标事件练习1

当鼠标点击网页某个单元格的时候，其他的单元格颜色不变，只有被点击的单元格颜色发生变化

<style type="text/css">

*{ margin:0;}

#xuankuang{ width:1200px;float:left}

.xuanxiang{ width:290px; height:200px; float:left; background-color:#0F3; margin-bottom:10px; margin-right:10px; margin-left:10px}

</style>

</head>

<body>

<div id="xuankuang">

   <div class="xuanxiang" onclick="dianJi(this)"></div>   //this代表调用自身。

   <div class="xuanxiang" onclick="dianJi(this)"></div>

   <div class="xuanxiang" onclick="dianJi(this)"></div>

   <div class="xuanxiang" onclick="dianJi(this)"></div>

   <div class="xuanxiang" onclick="dianJi(this)"></div>

   <div class="xuanxiang" onclick="dianJi(this)"></div>

   <div class="xuanxiang" onclick="dianJi(this)"></div>

   <div class="xuanxiang" onclick="dianJi(this)"></div>

   <div class="xuanxiang" onclick="dianJi(this)"></div>

</div>

</body>

<script>

 function dianJi(m){   //这个m是一个形式参数

	var b=document.getElementsByClassName("xuanxiang")  用b接收获取的元素数组

	 for(var i=0;i<b.length;i++){

		 b[i].style.backgroundColor="blue";} //通过循环让每一次鼠标放在某个位置的时候所有位置的颜色都变成蓝色。

     m.style.backgroundColor="red"} //鼠标放在的地方变为红色

</script>

这个鼠标事件练习使用到了数组，用数组通过循环的方式使在每次鼠标点击单元格的时候其他的单元格不变色，只有被点击的发生颜色的变化，定义方法的时候方法名后边的形参要注意。　　

鼠标事件练习2

这个练习是做的一个下拉菜单，下拉菜单带有背景色，选项框的背景色会随着鼠标的移动（不点击选项框）变色，当选中其中一个选项框的时候，所有选项框隐藏，被选中的选项框的内容进到空白的选框内。

<body>

<div id="xxkuang" onclick="dianJi(this)"></div>

<div id="list" style="display:none">

   <div class="xuanxiangka" onmouseover="fangshang(this)" onclick="dj(this)">qingdao</div>

   <div class="xuanxiangka" onmouseover="fangshang(this)" onclick="dj(this)">jinan</div>

   <div class="xuanxiangka" onmouseover="fangshang(this)" onclick="dj(this)">zibo</div>

   <div class="xuanxiangka" onmouseover="fangshang(this)" onclick="dj(this)">binzhou</div>

   <div class="xuanxiangka" onmouseover="fangshang(this)" onclick="dj(this)">linzi</div>

</div>

</body>

<script>

function fangshang(n){

	var b=document.getElementsByClassName("xuanxiangka")//括号里的classname要加引号

	for(var i=0;i<b.length;i++){

		b[i].style.backgroundColor="white"

		b[i].style.color="black"}

		n.style.backgroundColor="red"

		n.style.color="white"}

function dianJi(m){

	var l=document.getElementById("list")

	if(l.style.display=="none"){  //隐藏后边的内容要带上引号，切记！！！

		l.style.display="block"}

		else{l.style.display="none"}}

function dj(p){

	document.getElementById("list").style.display="none"; //选中后所有的选项框隐藏

	document.getElementById("xxkuang").innerText=p.innerText  //选中后被选中的选项框的内容进到空白的选项框内

	}

</script>

　　点击空白单元格的时候下拉菜单的显示与隐藏需要用到判断。

相关文章