码迷，mamicode.com
首页 > 编程语言 > 详细

javascript基础-常见控件事件处理

时间：2016-04-27 14:21:55      阅读：220      评论：0      收藏：0      [点我收藏+]

标签：javascript   function   

（1）鼠标事件-onmouseover、onmouseout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
   function overDemo(h){
	   if(h=="h1"){
		   var d1=document.getElementById("h1");
		   if(d1.style.display=="none"){
			   d1.style.display="block";
			   }
	   }else if(h=="h2"){
		   var d2=document.getElementById("h2");
		   if(d2.style.display=="none"){
			   d2.style.display="block";
			   }
		   }else if(h=="h3"){
			    var d3=document.getElementById("h3");
		        if(d3.style.display=="none"){
			      d3.style.display="block";
			    }
			   }else if(h=="h4"){
				   var d4=document.getElementById("h4");
		           if(d4.style.display=="none"){
			          d4.style.display="block";
			        }
				   }else{
					    var d5=document.getElementById("h5");
		                if(d5.style.display=="none"){
			               d5.style.display="block";
			            }
					   }
	   }
   function outDemo(h){
	  if(h=="h1"){
		   var d1=document.getElementById("h1");
		   if(d1.style.display=="block"){
				d1.style.display="none";
			   }
	  }else if(h=="h2"){
		   var d2=document.getElementById("h2");
		   if(d2.style.display=="block"){
			   d2.style.display="none";
			   }
		   }else if(h=="h3"){
			    var d3=document.getElementById("h3");
		        if(d3.style.display=="block"){
			      d3.style.display="none";
			    }
			   }else if(h=="h4"){
				   var d4=document.getElementById("h4");
		           if(d4.style.display=="block"){
			          d4.style.display="none";
			        }
				   }else{
					    var d5=document.getElementById("h5");
		                if(d5.style.display=="block"){
			               d5.style.display="none";
			            }
					   }
	   }
</script>
</head>

<body>
<div style="position:absolute;top:40px;left:30px;width:450px;height:40px;background-color:#9FF">
<table style="width:100%;height:100%;border:solid 1px;role="all";bordercolor="#FF0000">
    <tr>
    <td width="100" align="center" onmouseout="outDemo(‘h1‘)" onmouseover="overDemo(‘h1‘)">首页</td>
    <td width="100" align="center" onmouseout="outDemo(‘h2‘)" onmouseover="overDemo(‘h2‘)">最新商品</td>
    <td width="100" align="center" onmouseout="outDemo(‘h3‘)" onmouseover="overDemo(‘h3‘)">打折商品</td>
    <td width="100" align="center" onmouseout="outDemo(‘h4‘)" onmouseover="overDemo(‘h4‘)">网上订单</td>
    <td width="100" align="center" onmouseout="outDemo(‘h5‘)" onmouseover="overDemo(‘h5‘)">联系我们</td>
	</tr>
	</table>
</div>
<div style="position:absolute;top:80px;left:30px;width:90px;height:200px;background-color:#CCC;display:none;"id="h1">
	<table style="width:100%;height:100%">
    <tr>
      <td>adwhd</td>
    </tr>
    <tr>
      <td>ahhdws</td>
    </tr>
    <tr>
      <td>hhjdk</td>
    </tr>
	</table>
</div>
<div style="position:absolute;top:80px;left:120px;width:90px;height:200px;background-color:#CCC;display:none;"id="h2">
	<table style="width:100%;height:100%">
    <tr>
      <td>123456</td>
    </tr>
    <tr>
      <td>789456</td>
    </tr>
    <tr>
      <td>321465</td>
    </tr>
	</table>
</div>
<div style="position:absolute;top:80px;left:210px;width:90px;height:200px;background-color:#CCC;display:none;"id="h3">
	<table style="width:100%;height:100%">
    <tr>
      <td>@##$%$%</td>
    </tr>
    <tr>
      <td>)(*&^%$#$#</td>
    </tr>
    <tr>
      <td>?{}++_)%</td>
    </tr>
	</table>
</div>
<div style="position:absolute;top:80px;left:300px;width:90px;height:200px;background-color:#CCC;display:none;"id="h4">
	<table style="width:100%;height:100%">
    <tr>
      <td>AHDWEF</td>
    </tr>
    <tr>
      <td>FHDJJK</td>
    </tr>
    <tr>
      <td>JKLLSD</td>
    </tr>
	</table>
</div>
<div style="position:absolute;top:80px;left:390px;width:90px;height:200px;background-color:#CCC;display:none;"id="h5">
	<table style="width:100%;height:100%">
    <tr>
      <td>+-*/</td>
    </tr>
    <tr>
      <td>-+/*</td>
    </tr>
    <tr>
      <td>++--*/</td>
    </tr>
	</table>
</div>
</body>
</html>

技术分享

(2)文本框获得焦点、失去焦点事件-onfocus、onblur

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
   function change(obj){
		   obj.value="";
	   }
   function unchange(obj){
	   if(obj.value.length==0){
		   obj.style.color="red";
		   obj.value="师姐你好";
		   }else{
			    obj.style.color="black";
			   }
	   }
	   
</script>
</head>

<body>
<input type="text" value="helloworld" id="t1" onfocus="change(this)"/><br/><br/>
<input type="text" value="师姐你好" id="t2" name="bun" onblur="unchange(this)" onfocus="change(this)"/>
</body>
</html>

技术分享

(3)单选框-radio

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
  function Demo(s){
	  var text=document.getElementById("txt");
	  if(s==1){
		  text.value="男";
	  }else if(s==2){
		  text.value="女";
		  }
  } 
</script>
</head>

<body>
<input type="radio" name="s" value="1"id="r1" onclick="Demo(this.value)"/>男
<input type="radio" name="s" value="2"id="r2" onclick="Demo(this.value)"/>女
<input type="text" name="性别" value="" id="txt" />
</body>
</html>

技术分享

(4)计算圆的周长和面积-onclick

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
    function calc(){
		 var r=document.getElementById("r");
		 var c=document.getElementById("c");
		 var s=document.getElementById("s");
		 r.value=parseInt(r.value);
		 c.value=parseInt(2*3.14*r.value);
		 s.value=parseInt(3.14*r.value*r.value);
		}
</script>
</head>

<body>
<center>
<p>计算圆的周长和面积</p>
半径：<input type="text" name="半径"  value="" id="r"/><br/>
周长：<input type="text" name="周长" readonly="readonly" value="" id="c"/><br/>
面积：<input type="text" name="面积" readonly="readonly" value="" id="s"/><br/>
<input type="button" name="result" value="计算" id="result" onclick="calc()"/>
</center>
</body>
</html>

技术分享

(5)计算总成绩与平均成绩-parseInt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
   function calc(obj){
	   var ch=document.getElementById("ch").value;
	   var ma=document.getElementById("ma").value;
	   var en=document.getElementById("en").value;
	   var chinese=parseInt(ch);
	   var math=parseInt(ma);
	   var english=parseInt(en);
	   var sum=chinese+english+math;
	   var avg=(sum)/3;
	   if(obj.value=="总成绩"){
	       document.getElementById("sum").value=sum;
	   }else if(obj.value=="平均成绩"){
		   document.getElementById("avg").value=avg;
		   }
	   }
</script>
</head>

<body>
<center>
<table bgcolor="#00CCFF" align="center" width="200px" top="20px" border="FF0000">
<tr>
<td width="100%">科目</td>
<td>成绩</td>
</tr>
<tr>
<td width="100%">语文</td>
<td>
<input type="text" name="chinese"id="ch"/>
</td>
</tr>
<tr>
<td width="100%">数学</td>
<td>
<input type="text" name="math"id="ma"/>
</td>
</tr>
<tr>
<td width="100%">英语</td>
<td>
<input type="text" name="english" id="en"/>
</td>
</tr>
<tr>
<td width="100%">
<input type="button" value="总成绩" onclick="calc(this)"
</td>
<td>
<input type="text" name="sum" id="sum"/>
</td>
</tr>
<tr>
<td width="100%">
<input type="button" value="平均成绩" onclick="calc(this)"
</td>
<td>
<input type="text" name="avg" id="avg"/>
</td>
</tr>
</table>
</center>
</body>
</html>

技术分享

(6)建议购物车-parseInt、parseFloat

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
  function sum(){
	  var num=parseInt(document.getElementById("num").value);
	  var price=parseInt(document.getElementById("price").value);
	  var trans=parseFloat(document.getElementById("trans").value);
	  var sum=num*price+trans*num;
	  document.getElementById("num").value=num;
	  document.getElementById("price").value=price;
	  document.getElementById("trans").value=trans;
	  document.getElementById("summary").value=sum;
	  }
</script>
</head>

<body>
<center>
<table position="absolute" align="center" bgcolor="#FF9999" width="556" top="40px" solid="1px" border="#FF0000" >
<tr>
<td colspan="5">简易购物车</td></tr>
<tr>
<td width="128">商品名称</td>
<td width="95">数量（件）</td>
<td width="99">单价（美元）</td>
<td width="98">运费（美元）</td>
<td width="114">
<input type="button" value="合计" onclick="sum()"/>
</td>
</tr>
<tr>
<td width="128">跑跑道具</td>
<td width="95">
<input type="text" width="80" id="num"/>
</td>
<td width="99">
<input type="text" width="80"id="price"/>
</td>
<td width="98">
<input type="text" width="80" id="trans"/>
</td>
<td width="114">
<input type="text" width="80"  readonly="readonly" id="summary"/>
</td>
</tr>
</table>
</center>
</body>
</html>

技术分享

(7)计算闰年-onclick

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
  function calc(){
	  var year=parseInt(document.getElementById("year").value);
	  if(year%4==0||year%100==0&&year%4==0){
		  document.getElementById("tex").value=year+"是闰年"
		  }else{
		        document.getElementById("tex").value=year+"不是闰年"
			  }
	  }
	  
</script>
</head>

<body>
请输入需要判断闰年的年份：<br/>
<input type="text" name="year" id="year"/>
<input type="button" value="计算" id="btn" onclick="calc()"/> 
<input type="text" id="tex"/>
</body>
</html>

技术分享

(8)

javascript基础-常见控件事件处理

标签：javascript   function   

原文地址：http://11302790.blog.51cto.com/11292790/1768182
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！