2010.4.28 javascript 学习文本隐藏
2010-04-28 13:49
295 查看
<!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=gb2312" />
<title>文本隐藏</title>
<script>
function myLoad(){
alert('页面加载');
}
function myUnload(){
//alert('页面卸载');
}
function myFocus(){
alert('获得焦点');
}
function myBlur(){
alert('失去焦点');
}
function myChange(){
alert('文本改变');
}
function myDblclick(){
alert("双击事件");
}
function myMouseover(){
document.getElementById("myLayer").style.display="block";
}
function myMouseout(){
document.getElementById("myLayer").style.display="none";
}
function myMouseover2(){
document.getElementById("btn").className="btn2";
}
function myMouseout2(){
document.getElementById("btn").className="btn1";
}
</script>
<style>
.btn1{
/*color:red;*/
background-image:url(images/back.jpg);
width:82px;
height:23px;
margin:0;
padding:0;
border:0;
font-size: 14px;
font-weight: bold;
}
.btn2 {
background-image: url(images/Out.gif);
height: 37px;
width: 80px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
</style>
</head>
<body onload="myLoad()" onunload="myUnload()">
<h1 ondblclick="myDblclick()" style="cursor:pointer">页面加载完成!</h1>
<form id="form1" name="form1" method="post" action="">
<input type="text" name="textfield" onfocus="myFocus()" onblur="myBlur()"/>
<input type="text" name="textfield2" onchange="myChange()"/>
</form>
<img src="images/wangyou.jpg" onmouseover="myMouseover()" onmouseout="myMouseout()"/>
<!--div层 容器块-->
<div id="myLayer" style="display:none"><h2>这是网游的说明信息</h2></div>
<input name="btn" id="btn" value="登 陆" type="button" class="btn1"
onmouseover="myMouseover2()" onmouseout="myMouseout2()"/>
</body>
</html>
"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=gb2312" />
<title>文本隐藏</title>
<script>
function myLoad(){
alert('页面加载');
}
function myUnload(){
//alert('页面卸载');
}
function myFocus(){
alert('获得焦点');
}
function myBlur(){
alert('失去焦点');
}
function myChange(){
alert('文本改变');
}
function myDblclick(){
alert("双击事件");
}
function myMouseover(){
document.getElementById("myLayer").style.display="block";
}
function myMouseout(){
document.getElementById("myLayer").style.display="none";
}
function myMouseover2(){
document.getElementById("btn").className="btn2";
}
function myMouseout2(){
document.getElementById("btn").className="btn1";
}
</script>
<style>
.btn1{
/*color:red;*/
background-image:url(images/back.jpg);
width:82px;
height:23px;
margin:0;
padding:0;
border:0;
font-size: 14px;
font-weight: bold;
}
.btn2 {
background-image: url(images/Out.gif);
height: 37px;
width: 80px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
</style>
</head>
<body onload="myLoad()" onunload="myUnload()">
<h1 ondblclick="myDblclick()" style="cursor:pointer">页面加载完成!</h1>
<form id="form1" name="form1" method="post" action="">
<input type="text" name="textfield" onfocus="myFocus()" onblur="myBlur()"/>
<input type="text" name="textfield2" onchange="myChange()"/>
</form>
<img src="images/wangyou.jpg" onmouseover="myMouseover()" onmouseout="myMouseout()"/>
<!--div层 容器块-->
<div id="myLayer" style="display:none"><h2>这是网游的说明信息</h2></div>
<input name="btn" id="btn" value="登 陆" type="button" class="btn1"
onmouseover="myMouseover2()" onmouseout="myMouseout2()"/>
</body>
</html>
相关文章推荐
- javascript的主页文本控件的隐藏与显示
- 【翻译作品】JavaScript DOM学习第二章:编辑文本
- JavaScript DOM 学习第二章 编辑文本
- Labview学习笔记——如何用按钮来控制某控件(例如文本控件)的显示与隐藏
- JavaScript DOM学习(4) 操作文本结点
- JavaScript学习笔记:1、调试和隐藏元素
- JavaScript基础学习之-JavaScript权威指南--3.2文本
- 【JAVASCRIPT】React入门学习-文本渲染
- javascript学习笔记(十九) 节点的操作实现代码
- JavaScript 学习笔记八 继承与引用
- 利用http的referer头和Servlet隐藏JavaScript代码
- JavaScript高级程序设计(第3版)学习笔记14——浏览器对象模型BOM
- Javascript基础学习(3)_对象和数组
- JavaScript学习笔记之事件冒泡和事件捕获
- JavaScript 学习笔记 汇总
- Javascript学习4 - 对象和数组
- 学习JavaScript你必须掌握的8大知识点!
- JavaScript 学习笔记(一)
- JavaScript 学习笔记九 new和apply,call
- Javascript的学习心得