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

wKiom1cgPwORA9GvAAApuorwRF0298.png

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

wKioL1cgQLih9Ig9AAAfIjpQ2y8915.png

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

wKiom1cgQHGA-SJ-AAAfVY_kJyc927.png

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

wKioL1cgQbvCtCTsAAAdfYktqd8000.png

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

wKiom1cgQYeQGqN1AAAkW9MR1UY577.png

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

wKiom1cgQ6Xho9F5AAAq29WOhIk911.png

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

wKioL1cgROHTCyVIAAAi1hA5ZLU951.png