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

来源：互联网发布：淘宝店铺金额在哪编辑：程序博客网时间：2024/05/09 11:48

（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>

2 0