08.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.title{
				text-align: center;
				line-height: 50px;
				width: 300px;
				height: 50px;
				border:3px solid #fff;
                background-color: rgba(0,0,0,0.4);
                color: #FFFFFF;				
				margin: 0 auto;
			}
			.k{
				width: 1200px;
				margin: 100px auto;
			}
			input[type="button"]{
				margin: 10px;
				width: 200px;
				height: 100px;
				background:rgba(0,0,0,0.4);
				color: #fff;
				font-size: 2em;
				cursor: pointer;
			}
			input[type="button"]:hover{
				background-color: blue;
				color: red;
			}
		</style>

	</head>
	<body>
		<div class="k">
			<input type="button" value="A" />
			<input type="button" value="B" />
			<input type="button" value="C" />
			<input type="button" value="D" />
			
		</div>
		<script type="text/javascript">
			var oBtnList=document.querySelectorAll(".k input");
			for ( var i = 0; i < oBtnList.length; i++ ) {
				oBtnList[ i ].addEventListener("click",(function(index){
					return function(e){
						console.log( '你单击了第' + index +"个按钮" )
						alert('你单击了第' + index +"个按钮");
					};
				}(i+1)));
			}
		</script>
</body>
</html>