js筑基之基操

获取元素绑定事件

键盘

<script>
	document.KEYDOWN=function(event){
		console.log(event.keyCode);
	}
</script>

<script type="text/javascript">
	window.onload=function(){
		textarea=document.getElementById("textarea");
		count=document.getElementById("count");
		total=30;
		document.onkeyup=function(){
			len=textarea.value.length;
			count.innerHTML=total-len;
		}
	}
</script>
<body>
	<!-- 键盘按下一次,看输了几个字 -->
	<p>您还可以输入<em id="count">30</em>/30</p>
	<div class="div1">
		<textarea name="textarea" id="textarea" rows="4" cols="70"></textarea>
	</div>
</body>

鼠标

<style>
	.phonewarn{display: none;}
	.div1{float: left;}
</style>
<script type="text/javascript">
	window.onload=function(){
		phone=document.getElementById("phone");
		phonewarn=document.getElementById("phonewarn");
		phone.onfocus=function(){	
			if(isOk(phone.name))
			phonewarn.style.display="block";
		}
	}
</script>
<body>
	<!-- 鼠标点击文本框,提示请输入正确的电话号码 
		div盒子默认占一行,如果想让两个div在一行,float:left
	-->
	<div class="div1">
		<input type="text" name="phone" id="phone" placeholder="请输入电话号码">		
	</div>
	<div>
		<h6 class="phonewarn" id="phonewarn">请输入正确的电话号码 </h6>
	</div>
</body>

<script type="text/javascript">
	window.onload=function(){
		btn=document.getElementById("btn");
		btn.onclick=function(){
			res=window.confirm("您确定要删除吗?");
			if(res){
				btn.style.display="none";
			}
		}
	}
</script>
<body>
	<div class="div1">
		<input type="button" name="btn" id="btn" style="display: block;">
	</div>	
</body>

猜你喜欢