JavaScript事件处理应用小实例

1.计数器

 <h1>JavaScript语言实例--定时器</h1>    
 <h2  id="hid">计数器：0</h2>    
 <button onclick="doStop()">停止</button>

var m=0,mytime=null;    
function doRun(){        
	m++;        
	document.getElementById("hid").innerHTML = "计数器："+m;        
	mytime = setTimeout(doRun,1000);    
	}    
	doRun();    
	function doStop(){        
	clearTimeout(mytime);    
	}
/*    
m = 0;    
var mytime = setInterval(function(){        
	m++;        
	document.getElementById("hid").innerHTML = "计数器："+m;//修改hid标签里的文本内容    },1000);
function doStop(){        
	clearInterval(mytime);//清除计时    
}    
*/    
// //定时3秒后执行参数中的函数    
// setTimeout(function(){    
//     console.log("Hello JS!");    // },3000);
// //定时每隔1秒执行参数回调函数一次    
// var m = 0;    
// setInterval(function(){    
//     m++;    
//     console.log("定时:"+m);    
// },1000);

2. 计算器

<h1>JavaScript语言实例--简单计算器</h1>    
<form action="" name="myform" method="get">        
	数值1：<input type="text" name="num1" size="10"/><br/><br/>        
	数值2：<input type="text" name="num2" size="10"/><br/><br/>        
	结 果：<input type="text" name="res" readonly style="border:0px;" size="10"/><br/><br/>        
	<input type="button" onclick="doFun(1)" value="加"/>        
	<input type="button" onclick="doFun(2)" value="减"/>        
	<input type="button" onclick="doFun(3)" value="乘"/>        
	<input type="button" onclick="doFun(4)" value="除"/>    
</form>

function doFun(c){        
//将num1和num2的值获取(String)并转换为int型        
	var m1 = parseInt(document.myform.num1.value);        
	var m2 = parseInt(document.myform.num2.value);        
	//console.log(m1,m2);        
	switch(c){            
	case 1: var res = m1+"+"+m2+"="+(m1+m2); break;            
	case 2: var res = m1+"-"+m2+"="+(m1-m2); break;            
	case 3: var res = m1+"*"+m2+"="+(m1*m2); break;            
	case 4: var res = m1+"/"+m2+"="+(m1/m2); break;        
	}        
	//将结果放置到第三个输入框中        
        document.myform.res.value = res;    
}

3.放大和缩小

<h1>JavaScript语言实例--js操作元素标签属性（放大和缩小）</h1>   
<button onclick="dofun(1)">放大</button>    
<button onclick="dofun(2)">缩小</button>    
<button onclick="dofun(3)">隐藏</button>    
<br/><br/>    
<div style="width:200px;height:200px;background-color:#ddd;" id="did"></div>

var width=200,height=200;   
var did = document.getElementById("did");    
function dofun(m){        
switch(m){            
	case 1:                
	width += 10;                
	height += 10;                
	did.style.width = width+"px";                
	did.style.height = height+"px";                
	break;            
	case 2:                
	width -= 10;                
	height -= 10;                
	did.style.width = width+"px";                
	did.style.height = height+"px";              
	break;            
	case 3:                
	did.style.display = "none";                
	break;        
	}    
	}
	```