——杨中科老师.Net视频笔记
在vs中新建一个名为Dom的解决方案，并在解决方案中添加一个web项目，选择ASP.NET WEB 应用程序，取名：WebApplicationDom2，然后在项目中添加文件即可。
文件结构：
01HTMLPageBubbleEvent.htm
<!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" >
<!--
事件冒泡：如果元素 A 嵌套在元素 B 中，那么 A 被点击不仅 A 的
onclick 事件会被触发， B 的 onclick 也会被触发。触发的顺序是 " 由
内而外 " 。验证：在页面上添加一个 table 、 table 里有 tr 、 tr 里有 td
， td 里放一个
-->
<head>
<title></title>
</head>
<body onclick="alert('body onclick')">
<table onclick="alert('table onclick')">
<tr onclick="alert('tr onclick')">
<td onclick="alert('td onclick')">
<p onclick="alert('p onclick')">
这里是p:事件冒泡演示
</p>
</td>
</tr>
</table>
</body>
</html>
02HTMLPageEventThis.htm
<!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" >
<!--
事件中的 this 。除了可以使用 event.srcElement 在事件响应函数中， this 表示发生
事件的控件 。只有在事件响应函数才能使用 this 获得发生事件的控件，在事件响
应函数调用的函数中不能使用，如果要使用则要将 this 传递给函数或者使用
event.srcElement 。 ( * )this 和 event.srcElement 的语义是不一样的， this 就是表示
当前监听事件的这个对象， event.srcElement 是引发事件的对象 ： 事件冒泡。
? 易错：修改元素的样式不是设置 class 属性，而是 className 属性。案例：网页开
关灯的效果。
? 修改元素的样式不能 this. style="background-color:Red" 。
? 易错：单独修改样式的属性使用 " style. 属性名 " 。注意在 css 中属性名在 JavaScript
中操作的时候属性名可能不一样，主要集中在那些属性名中含有 - 的属性，因为
JavaScript 中 - 是不能做属性、类名的。所以 CSS 中背景颜色是 background-color
，而 JavaScript 则是 style.background ；元素样式名是 class ，在 JavaScript 中是
className 属性； font-size → style.fontSize ； margin-top → style.marginTop
? 单独修改控件的样式 <input type="button" value="AAA"
οnclick="this.style.color='red'" /> 。技巧，没有文档的情况下的值属性名，随便给
一个元素设定 id ，然后在 js 中就能 id.style. 出来能用的属性。
-->
<head>
<title>事件中的this</title>
<script type="text/javascript">
function btnClick3() {
alert(this.value);//在事件响应函数调用的函数里就不能通过this来获得事件对象了
}
function btnClick4(btn) {
alert(btn.value);//在事件响应函数中将this传过来就可以
}
function btnClick5() {
alert(event.srcElement.value); //this和event.srcElement的语义是不一样的，this就是表示监听事件的这个对象，
//event.srcElement是引发事件的对象。事件冒泡。
}
</script>
</head>
<body>
<input type="button" value="click" onclick="alert(event.srcElement.value)" />
<input type="button" value="click2" onclick="alert(this.value)" />
<input type="button" value="click3" onclick="btnClick3()" />
<input type="button" value="click4" onclick="btnClick4(this)" />
<input type="button" value="click5" onclick="btnClick5()" />
</body>
</html>
03HTMLPageStyle1.htm
<!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" >
<!--
修改元素的样式不能 this. style="background-color:Red" 。
-->
<head>
<title>修改样式</title>
<style type="text/css">
.day
{
background-color:Yellow;
}
.night
{
background-color:Black;
}
</style>
</head>
<body>
<div id="divTest" class="day">
<font color="red">
修改样式演示案例！！！维唯为为
</font>
</div>
<input type="button" value="黑夜" onclick="document.getElementById('divTest').className='night';" />
</body>
</html>
04HTMLPageLaDeng.htm
<!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" >
<!--
易错：修改元素的样式不是设置 class 属性，而是 className 属性。案例：网页开
关灯的效果。
-->
<head>
<title>开/关灯效果</title>
<style type="text/css">
.day
{
background-color:White;
}
.night
{
background-color:Black;
}
</style>
<script type="text/javascript">
function switchLight() {
var btnSwitch = document.getElementById("btnSwitch");
if (document.body.className == "day") {
document.body.className = "night";
btnSwitch.value = "开灯";
}
else {
document.body.className = "day";
btnSwitch.value = "关灯";
}
}
</script>
</head>
<body>
<input type="button" id="btnSwitch" value="开/关灯" onclick="switchLight()" />
</body>
</html>
05HTMLPageStyle2.htm
<!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" >
<!--
修改元素的样式不能 this. style="background-color:Red" 。
-->
<head>
<title>修改背景颜色</title>
<script type="text/javascript">
</script>
</head>
<body>
<input type="button" value="修改本身颜色" onclick="this.style.background='Red'" />
</body>
</html>
06HTMLPageBlurFocus.htm
<!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" >
<!--
案例 1 ：创建三个输入文本框，当光标离开文本框的时候如果文本框为空，则将
文本框背景色设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是
onfocus ，焦点离开控件的事件是 onblur 。
-->
<head>
<title>焦点进入/离开控件的事件</title>
</head>
<body>
<input type="text" onblur="alert('第一个失去了焦点')" />
<input type="text" onfocus="alert('第二个得到了焦点')" />
</body>
</html>
07HTMLPageValidEmpty.htm
<!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" >
<!--
案例 1 ：创建三个输入文本框，当光标离开文本框的时候如果文本框为空，则将
文本框背景色设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是
onfocus ，焦点离开控件的事件是 onblur 。
-->
<head>
<title>验证控件是否空</title>
<script type="text/javascript">
function initEvent() { //当页面加载完毕后，获得所有的input控件
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onblur = inputOnBlur;//设置inputOnBlur函数为input元素的onblur事件响应函数
}
}
function inputOnBlur() { //onblur的响应函数，焦点失去的时候进行数据的检查
//inputOnBlur是onblur的响应函数，而不是被响应函数调用的函数，所以可以用this来取得发生事件控件的对象
if (this.value.length <= 0) { //检查文本框中文字的长度，如果<=0就说明是空的
this.style.background = "red";
}
else {
this.style.background = "white";
}
}
</script>
</head>
<body onload="initEvent()">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</body>
</html>
08WebFormRating.htm
<!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" >
<!--
案例 2 ：评分控件 V1 ，用一个单行 5 列的 Table 做评分控件，监听 td 的 click 事件，
点击一个 td 的时候，将这个 td 及之前的 td 背景变为红色，之后的 td 背景变为白色
。鼠标在评分控件上的时候显示超链接形式的鼠标图标。演示 JQuery 版。
-->
<head>
<title>星星评分控件</title>
<script type="text/javascript">
function indexOf(arr, element) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == element) {
return i;
}
}
return -1;
}
function initEvent() {
//给所有td增加onclick事件
var tableRating = document.getElementById("tableRating");
var tds = tableRating.getElementsByTagName("td"); //取得tableRating下的所有td,不处理其他table
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.onclick = TdOnClick;
td.style.cursor = "pointer";//让鼠标放到td上显示手形状的光标
}
}
function TdOnClick() {
//this.style.color = "Yellow";
//document.getElementById("rate").value = index;
var tableRating = document.getElementById("tableRating");
var tds = tableRating.getElementsByTagName("td"); //取得tableRating下的所有td,不处理其他table
var index = indexOf(tds, this);
for (var i = 0; i <= index; i++) {
var td = tds[i];
td.style.color = "Red";
}
for (var i = index + 1; i < tds.length; i++) {
var td = tds[i];
td.style.color = "black";
}
}
function TdOnMouseOver() {
}
function TdOnMouseOut() {
//var index = document.getElementById("rate").value;
//TdOnMouseOver();
}
</script>
</head>
<body onload="initEvent()">
<table id="tableRating">
<tr>
<td onmouseover="TdOnMouseOver()" onmouseout="TdOnMouseOut()">★</td>
<td onmouseover="TdOnMouseOver()" onmouseout="TdOnMouseOut()">★</td>
<td onmouseover="TdOnMouseOver()" onmouseout="TdOnMouseOut()">★</td>
<td onmouseover="TdOnMouseOver()" onmouseout="TdOnMouseOut()">★</td>
<td onmouseover="TdOnMouseOver()" onmouseout="TdOnMouseOut()">★</td>
</tr>
</table>
<input id="rate" type="hidden" value="-1" />
</body>
</html>
09HTMLPage1.htm
<!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" >
<!--
练习 1 ：超链接的单选效果。页面上若干个超链接，点击一个超链接的时候被点
击的超链接变为红色背景，其他超链接背景还原为白色。参考：点击变 " 呜呜 " ，
没有点击变 " 哈哈 " 。 window.event.returnValue=false; 。难点 " this
-->
<head>
<title>超链接单选效果</title>
<script type="text/javascript">
function initEvent() {
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.onclick = LinkOnClick;
}
}
function LinkOnClick() {
var links = document.getElementsByTagName("a");
//不要把links放到全局变量中，尽量不要用全局变量，如果重复性代码太多，将代码放到一个公共函数中
for (var i = 0; i < links.length; i++) {
var link = links[i];
if (link == this) {
link.style.background = "Red";
}
else {
link.style.background = "white";
}
}
window.event.returnValue = false;//阻止打开超链接
}
</script>
</head>
<body onload="initEvent()">
<a href="http://www.sina,com">新浪</a><br />
<a href="http://www.baidu,com">百度</a><br />
<a href="http://www.google,com">谷歌</a><br />
<a href="http://www.xinghua,com">新华</a><br />
<a href="http://www.tianya,com">天涯</a><br />
<input type="button" id="btn1" value="click1" />
<input type="button" id="btn2" value="click2" onclick="btnClick1()"/>
<script type="text/javascript">
var btn1 = document.getElementById("btn1");
btn1.onclick = btnClick1;
function btnClick1() {
alert(this.value);
}
//οnclick="btnClick1()" 相当于btn2.οnclick=function(){btnClick1();}
//也就是onclick的响应函数是一个匿名函数，匿名函数的实现就是调用btnClick1()。
</script>
</body>
</html>
10HTMLPage2.htm
<!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" >
<!--
练习 2 ：点击按钮，表格隔行变色：偶数行为黄色背景，奇数行为默认颜色。通
过 table 的 getElementsByTagName 取得所有的 tr ，依次遍历，如果是偶数就
………… 。为什么？防止看串了行。
-->
<head>
<title>点击按钮，表格隔行变色</title>
<script type="text/javascript">
function ShowIt() {
var tableMain = document.getElementById("tableMain");
var trs = tableMain.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
if (i % 2 == 0) {
var tr = trs[i];
tr.style.background = "yellow";
}
}
}
</script>
</head>
<body>
<table id="tableMain">
<tr><td>喜洋洋</td><td>100</td></tr>
<tr><td>懒洋洋</td><td>10</td></tr>
<tr><td>美洋洋</td><td>60</td></tr>
<tr><td>慢洋洋</td><td>100</td></tr>
<tr><td>沸洋洋</td><td>80</td></tr>
</table>
<input type="button" value="click" onclick="ShowIt()" />
</body>
</html>
11HTMLPage3.htm
<!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" >
<!--
练习 3 ：放若干文本框，获得焦点的文本框黄色背景，其他控件背景颜色是白色
? 思路 1 ：监听所有 input 的 onfocus 事件 → 将背景设置为黄色，监听所有 input 的 onblur 事
件 → 将背景设置为白色。思路 2 ：只监听 onfocus 和练习 1 一样。
-->
<head>
<title>文本框背景色的变化</title>
<script type="text/javascript">
function initEvent() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type == "text") { //如果是input 输入框
//方法一
//input.onfocus = inputOnFocus;
//input.onblur = inputOnBlur;
//方法二
input.onfocus = function() { this.style.background = "Yellow"; } //用匿名函数做事件响应
input.onblur = function() { this.style.background = "White"; }
}
}
}
function inputOnFocus() {
this.style.background = "Yellow";
}
function inputOnBlur() {
this.style.background = "White";
}
</script>
</head>
<body onload="initEvent()">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" /><br />
<input type="button" / value="click">
</body>
</html>
12HTMLPage4.htm
<!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" >
<!--
练习 4 ：点击表格行，被点击的行高亮显示（背景是黄色），其他行白色背景。
监听每个 tr 的 onclick 事件，将点击的背景设置为黄色，其他的设置为白色背景。
->
<head>
<title>点击的行高亮显示</title>
<script type="text/javascript">
function initEvent() {
var tableMain = document.getElementById("tableMain");
var trs = tableMain.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
var tr = trs[i];
tr.onclick = TrOnClick;
}
}
function TrOnClick() {
var tableMain = document.getElementById("tableMain");
var trs = tableMain.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
var tr = trs[i];
if (tr == this) {
tr.style.background = "Yellow";
}
else {
tr.style.background="white"
}
}
}
</script>
</head>
<body οnlοad="initEvent()">
<table id="tableMain">
<tr><td>喜洋洋</td><td>100</td></tr>
<tr><td>懒洋洋</td><td>10</td></tr>
<tr><td>美洋洋</td><td>60</td></tr>
<tr><td>慢洋洋</td><td>100</td></tr>
<tr><td>沸洋洋</td><td>80</td></tr>
</table>
</body>
</html>
13HTMLPageDiv.htm
<!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>
<title>控制层的显示(高级选项的功能)</title>
<script type="text/javascript">
function toggleDiv(cb) {
var div1 = document.getElementById("div1");
if (cb.checked) {
div1.style.display = ''; //display没有值就是不显示
}
else {
div1.style.display = 'none';//显示
}
}
</script>
</head>
<body>
<!--
<input type="checkbox" id="cbShow" οnchange="toggleDiv(this)" />
onchange表示当焦点(光标)离开当前控件时，发生事件响应
-->
<input type="checkbox" id="cbShow" onclick="toggleDiv(this)" />
<label for="cbShow">显示高级选项</label>
<div id="div1" style="display:none">这里是一些高级选项值</div>
</body>
</html>
14HTMLPageHoverMouse.htm
<!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>
<title>移到超链接时，显示详细信息</title>
</head>
<body>
<a href="http://www.baidu.com" onmouseout="document.getElementById('baiduDiv').style.display='none'"
onmouseover="document.getElementById('baiduDiv').style.display=''">百度</a>
<div id="baiduDiv" style="display:none;border-color:Green;border-style:dotted;border-width:1px;">
百度网是<font color="Red">李彦宏</font>创建的一个网站，网址是<a href="http://www.baidu.com">baidu.com</a></div>
</body>
</html>
15Body事件范围.htm
<!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" >
<!--
IE 中 body 的事件范围
-->
<head>
<title>IE 中 body 的事件响应</title>
<script language="javascript">
function bodyClick() {
alert("body 的事件响应");
}
document.onclick = bodyClick;
</script>
</head>
<body>
IE 中 body 的事件范围
</body>
</html>
16单位问题.htm
<!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" >
<!--
通过 dom 读取元素的 top 、 left 、 width 、 height 等取到的值不是数
字，而是 " 10px " 这样的字符串；为这些属性设值的时候 IE 可以是
80 、 90 这样的数字， FF 必须是 " 80px " 、 " 90% " 等这样的字符串形
式，为了兼容统一用字符串形式。
? 易错：不要写成 div1.style.width=80px ，而是
div1.style.width='80px'
? 如果要修改元素的大小（宽度加 10 ），则首先要取出元素的宽度
，然后用 parseInt 将宽度转换为数字（ parseInt 可以将 "20px" 这样
数字开头的包含其他内容的字符串解析为 20 ，
parseInt('22px',10) ，也就是解析尽可能多的部分）；然后加上一
个值，再加上 px 赋值回去。
-->
<head>
<title>元素的单位</title>
<script type="text/javascript">
function incWidth() {
var oldwidth = document.getElementById('div1').style.width;
oldwidth = parseInt(oldwidth, 10);
oldwidth += 50;
oldwidth=oldwidth + "px";
//oldwidth=oldwidth+50;//因为oldwidth是一个字符串，这样的结果是50px50
document.getElementById('div1').style.width=oldwidth;
}
</script>
</head>
<body>
<input type="button" value="单位1" style="width:50%" />
<div id="div1" style="width:50px;height:50px;border-style:dotted;border-width:1px;border-color='Red'">
dddddddddddddddddddddddddddddddd
</div>
<input type="button" onclick="alert(document.getElementById('div1').style.width)" value="取值" />
<input type="button" onclick="document.getElementById('div1').style.width='100px'" value="设值" />
<input type="button" onclick="incWidth()" value="自动加宽" />
<input type="button" onclick="alert(parseInt('50aaab301bbcccddd',10))" value="parseInt" />
</body>
</html>
17DivPosition.htm
<!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" >
<!--
元素的 position 样式值： static （无定位，显示在默认位置）、 absolute
（绝对定位）、 fixed （相对于窗口的固定定位，位置不会随着浏览器的
滚动而变化， IE6 不支持）、 relative （相对元素默认位置的定位）。如
果要通过代码修改元素的坐标则一般使用 absolute ，然后修改元素的 top
（上边缘距离）、 left （左边缘距离）两个样式值。 left 、 top 都是指的
层的左上角的坐标
? 案例：跟着鼠标飞的图片。提示：鼠标移动的事件是 onmousemove （
一边移动事件一边触发，而不是移动开始或者移动完成才触发），通过
window.event 的 clientX 、 client Y 属性获得鼠标的位置。
? 案例：鼠标放到一个超链接的时候，在鼠标的位置显示一个黄色背景，
带图片的悬浮提示，鼠标离开就消失。提示：鼠标进入控件的事件是
onmouseover ，离开的事件是 onmouseout 。
? 案例：点击按钮层动态变大。提示： 英文字母连续单词不会在中间自动
换行 的陷阱
-->
<head>
<title>元素的位置</title>
<script type="text/javascript">
document.onmousemove = function() {
var x = window.event.clientX;
var y = window.event.clientY;
var divFly = document.getElementById("divFly");
if (!divFly) {
return;
}
divFly.style.left = x; //left、top都是指的层的左上角的坐标为鼠标点的横坐标
divFly.style.top = y;
};
</script>
</head>
<body>
<input type="button" value="按钮" style="position:absolute;top:200px;left:200px" />
<div id="divFly" style="position:absolute">
<img src="look.png" /><br />
我的博客名字是维唯为为
</div>
</body>
</html>
18超链接自定义.htm
d<!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>
<title>超链接自定义</title>
<style type="text/css">
.tooltip
{
background-color: Yellow;
border-style: solid;
border-width: 1px;
border-color: Red;
}
</style>
<script type="text/javascript">
function initEvent() {
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.onmouseover = linkMouseOver;
link.onmouseout = linkMouseOut;
}
}
function linkMouseOver() {
var div = document.createElement("div"); //动态创建层
div.className = "tooltip"; //设定样式
//div.id = "divtooltip";
div.style.position = "absolute";
div.style.top = window.event.clientY; //指定坐标
div.style.left = window.event.clientX;
div.innerHTML = "adksafd<font color='ref'>红红</font>";
document.body.appendChild(div);
//createElement只是内存模型，只有appendChile到一个可视元素中才会被显示出来
}
function linkMouseOut() {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
if (div.className == "tooltip") {
div.style.display = "none";
}
}
//document.body.appendChild(div);
//createElement只是内存模型，只有appendChild到一个可视元素中才会被显示出来
}
</script>
</head>
<body onload="initEvent()">
<a href="http://www.sina.com" title="最大的华人社区">新浪网</a><br />
<br />
<br />
<a href="http://www.baidu.com" title="兑价排名专用网点">百度</a><br />
<br />
<br />
<a href="http://www.sohu.com" title="搜狗搜狐什么都搜">搜狐网</a><br />
<br />
<br />
</body>
</html>
19动态放大.htm
<!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>
<title>动态放大层</title>
<script type="text/javascript">
var showIntervalId;
function showDiv() {
showIntervalId = setInterval("inc()", 100);
}
function inc() {
var div1 = document.getElementById("div1");
var oldwidth = div1.style.width;
oldwidth = parseInt(oldwidth, 10);
var oldheight = div1.style.height;
oldheight = parseInt(oldheight, 10);
if (oldwidth >= 200) {
clearInterval(showIntervalId);
//停止计时器
}
oldwidth += 10;
oldheight += 10;
div1.style.width = oldwidth + "px";
div1.style.height = oldheight + "px";
}
</script>
</head>
<body>
<div id="div1" style="width: 10px; height: 100px; border-style: solid; border-color: Red;
border-width: 1px;">
案例：点击按钮层动态变大。提示： 英文字母连续单词不会在中间自动换行的陷阱 案例：点击按钮层动态变大。提示： 英文字母连续单词不会在中间自动换行的陷阱 案例：点击按钮层动态变大。提示：
英文字母连续单词不会在中间自动换行的陷阱
</div>
<input type="button" value="放大" onclick="var div1=document.getElementById('div1');div1.style.width='200px';div1.style.height='200px'" />
<input type="button" value="动态放大" onclick="showDiv()" />
</body>
</html>
20常见错误.htm
<!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">
<!--
易错：不要写成 div1.style.width=80px ，而是
div1.style.width='80px'
? 修改元素的样式不能 this.style="background-color:Red" ，哪怕可
以的话也是把以前所有样式都冲掉了。单独修改控件的样式
this.style. background='red' ，只修改要修改的样式。技巧，没有
文档的情况下的值属性名，随便给一个元素设定 id ，然后在 js 中
就能 id.style. 出来能用的属性。
? createElement 的两种用法，注意 innerText 的问题
? var input = document.createElement("<input type='button'
value='hello'/>") 快速创建元素，并且赋值，但是注意设置的 inner 部
分不会被设置 var link = document.createElement("<a
href='http://www.baidu.com'> 百度 </a>")
? label.setAttribute("for", "username"); // 设定一些 Dom 元素属性名
特殊的属性 ,label.for = "username" 会有问题 。
label.setAttribute("xuehao","33333")
-->
<head>
<title>常见错误</title>
<script type="text/javascript">
function btnClick() {
var div = document.createElement("input");
div.type = "button";
div.value = "动态按钮";
div.onclick = function() { alert("hello"); };
document.body.appendChild(div);
var input = document.createElement("<input type='button' value='hello'/>");
//根据HTML代码段创建元素，省得一个属性一个属性的复制
document.body.appendChild(input);
var link = document.createElement("<a href='http://www.baidu.com'>百度</a>");
link.innerHTML = "百毒";
document.body.appendChild(link);
var label = document.createElement("label");
//label.for="username";
label.setAttribute("for", "username");
//设定一些Dom元素属性名特殊的属性label.for="username"会有问题
label.setAttribute("xuehao", "33333"); //给元素添加HTML标准没有的自定义属性
label.innerText = "用户名：";
document.body.appendChild(label);
}
</script>
</head>
<body>
<input type="button" onclick="btnClick()" value="ok" />
<input type="text" id="username" />
</body>
</html>
21点击显示登录窗口.htm
<!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>
<title>点击显示登录窗口</title>
<script type="text/javascript">
function showLogin() {
var loginDiv = document.getElementById("loginDiv");
loginDiv.style.display = ''; //显示loginDiv这个层
}
function hideLogin() {
var loginDiv = document.getElementById("loginDiv");
loginDiv.style.display = "none";
}
</script>
</head>
<body>
<a href="javascript:showLogin()">登录</a>
<div style="position:absolute;top:200px;left:200px;border-style:solid;border-color:Blue;
border-width:thin;display:none;" id="loginDiv">
<img src="images/close.jpg" onclick="hideLogin()" style="float:right" />
<table>
<tr>
<td><label for="username">用户名：</label></td>
<td><input type="text" id="username" style="width:100px;" />
</tr>
<tr>
<td><label for="password">密码：</label></td>
<td><input type="password" id="password" style="width:100px;" /></td>
</tr>
</table>
</div>
</body>
</html>
22点击图片显示详细1.htm
<!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>
<title>点击图片显示详细</title>
<script type="text/javascript">
function showDetails() {
var details = document.getElementById("details");
details.style.display = '';
details.style.left = window.event.clientX;
details.style.top = window.event.clientY;
}
function hideDetails() {
var details = document.getElementById("details");
details.style.display = 'none';
}
</script>
</head>
<body>
<img src="images/small.JPG" onmouseover="showDetails()" />
<div style="display:none;position:absolute;" id="details">
<img src="images/Detial.jpg" />
<p>身高：170</p>
<p>姓名：维唯为为</p>
<p><input type="button" value="关闭" onclick="hideDetails()" /></p>
</div>
</body>
</html>
23点击图片显示详细2.htm
<!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>
<title>点击图片显示详细</title>
<script type="text/javascript">
var data = { "images/0001.png": ["images/01.png", "金黄CD", "150"],
"images/0002.png": ["images/02.png", "绿光CD", "200"],
"images/0003.png": ["images/03.png", "蓝光CD", "180"]};
function loadImg() {
for (var smallimgpath in data) {
var smallImg = document.createElement("img");
smallImg.src = smallimgpath;
smallImg.setAttribute("a1", data[smallimgpath][0]);
smallImg.setAttribute("a2", data[smallimgpath][1]);
smallImg.setAttribute("a3", data[smallimgpath][2]);
smallImg.onmouseover = function() {
document.getElementById("detailImg").src = this.getAttribute("a1");
document.getElementById("detailName").innerHTML = this.getAttribute("a2");
document.getElementById("detailPrice").innerHTML = this.getAttribute("a3");
var details = document.getElementById("details");
details.style.top = window.event.clientY;
details.style.left = window.event.clientX;
details.style.display = '';
}
document.body.appendChild(smallImg);
}
}
function hideDetails() {
var details = document.getElementById("details");
details.style.display = 'none';
}
</script>
</head>
<body onload="loadImg()">
<div style="display:none;position:absolute;" id="details">
<img id="detailImg" src=""/>
<p id="detailName"></p>
<p id="detailPrice"></p>
<p><input type="button" value="关闭" onclick="hideDetails()" /></p>
</div>
</body>
</html>
24评分控件V2.htm
<!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" >
<!--
评分控件 V2 。用一个单行 5 列的 Table ， td 中默认都是
starEmpty.jpg 这个图片。监听 td 的 mouseover 事件，鼠标在一个
td 的时候将这个 td 及之前的 td 的内容换成 starFill.jpg 这个图片。鼠
标在评分控件上的时候显示超链接形式的鼠标图标。案例：注册
页面，点击 " 高级 " CheckBox ，则显示高级选项，否则隐藏
-->
<head>
<title>评分控件 V2</title>
<script language="javascript">
function indexOf(arr, element) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == element) {
return i;
}
}
return -1;
}
function initEvent() {
var rating = document.getElementById("rating");
var tds = rating.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.style.cursor = "pointer";
td.onmouseover = function() {
var rating = document.getElementById("rating");
//不用担心和initEvent中的rating、tds冲突，因为他们是两个函数只是写在一起而已
var tds = rating.getElementsByTagName("td");
var index = indexOf(tds, this);
for (var i = 0; i <= index; i++) {
tds[i].innerText = '★';
//tds[i].style.color = "Yellow";
}
for (var i = index + 1; i < tds.length; i++) {
tds[i].innerText = '☆';
//tds[i].style.color = "Yellow";
}
};
}
}
</script>
</head>
<body onload="initEvent()">
<table id="rating">
<tr style="font-size:xx-large;color:Red;"><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
</table>
</body>
</html>
25球队选择.htm
<!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" >
<!--
练习：界面上有几个球队名字的列表，将鼠标放到球队名字上就
变为红色背景，其他球队背景颜色为白色，点击一个球队的时候
就将点击的球队变为 fontSize=30 字体。
-->
<head>
<title>球队选择</title>
<script type="text/javascript">
function initEvent() {
var football = document.getElementById("football");
var lis = football.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
var li = lis[i];
li.style.cursor = "pointer";
li.onmouseover = function() {
var football = document.getElementById("football");
var lis = football.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
var li = lis[i];
if (li == this) {
li.style.background = "red";
}
else {
li.style.background = "white";
}
}
};
li.onclick = function() {
this.style.fontSize = 30;//设置字体大小
}
}
}
</script>
</head>
<body onload="initEvent()">
<ul id="football">
<li>曼联</li>
<li>国足</li>
<li>朝鲜队</li>
<li>美国队</li>
<li>伊朗队</li>
</ul>
</body>
</html>
26搜索框效果.htm
<!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" >
<!--
练习：有一个搜索文本框，焦点不在文本框中的时候，如果文本框没有
值，则文本框中显示灰色文本（ Gray ）的 " 输入搜索关键词 " ，否则显
示用户输入的值；焦点在文本框中时如果之前显示 " 输入搜索关键词 "
则清空文本框的值，并且将文本修改为黑色。 onfocus 的时候如果文本
框中的值为 " 输入搜索关键词 " ，则清空文本框，并且恢复文本框的颜
色为 Black ； onblur 的时候如果文本框中没有值，则将文本框的值设置为
" 输入搜索关键词 " 并且文本框中显示灰色文本（ Gray ）
style.color='Gray' 。（五分钟）
-->
<head>
<title>搜索框效果</title>
<script type="text/javascript">
function inputBlur(keyword) {
if (keyword.value.length <= 0) {
keyword.value = "输入搜索关键词";
keyword.style.color = "Gray";
}
}
function inputFocus(keyword) {
if (keyword.value == '输入搜索关键词') {
keyword.value = '';
keyword.style.color = 'Black';
}
}
</script>
</head>
<body>
<input onblur="inputBlur(this)" onfocus="inputFocus(this)" id="keywordid" value="输入搜索关键词" style="color:Gray" />
<input type="button" value="搜索一下" /><br /><br />
<input id="Text1" />
<input id="Text2" />
</body>
</html>
WebOS.htm
<!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>
<title>WebOS</title>
<style type="text/css">
.desktopitem
{
}
#start
{
position:fixed;
bottom:0px;
left:0px;
}
</style>
<script type="text/javascript">
function loadDiv() {
var data = { "我的电脑": "images/mycomputer.png", "回收站": "images/rubish.png",
"我的文档": "images/mydocument.png", "日历": "images/calendar.png",
"记事本":"images/notepad.png","播放器":"images/player.png"};
for (var caption in data) {
var icopath = data[caption];
var divItem = document.createElement("div");
divItem.className = "desktopitem";
divItem.onclick = function() {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
if (div == this) {
div.style.background = 'Silver';
}
else {
div.style.background = 'Transparent';
}
}
};
divItem.style.styleFloat = 'left';
var icoImg = document.createElement("img");
icoImg.src = icopath;
divItem.appendChild(icoImg);
var captionP = document.createElement("p");
captionP.innerText = caption;
divItem.appendChild(captionP);
document.body.appendChild(divItem);
}
}
function toggle(element) {
if (element.style.display == '') {
element.style.display = 'none';
}
else {
element.style.display = '';
}
}
function desktopClick(e) {
var menu = document.getElementById("contextMenu");
menu.style.left = window.event.clientX;
menu.style.top = window.event.clientY;
menu.style.display = '';
window.event.returnValue = false;
}
document.oncontextmenu = desktopClick;
</script>
</head>
<body onload="loadDiv()" style="background-image:url(images/wallpager.jpg);">
<div id="start" onclick="toggle(document.getElementById('startmenu'))">
<img src="images/start.png" width="50" height="50" />
</div>
<div id="startmenu" style="display:none;position:fixed;bottom:50px;left:0px;">
<ul style="list-style:none;background-color:Silver;">
<li>我的文档</li>
<li>图片收藏</li>
<li>控件面板</li>
<li>搜索</li>
<li>运行</li>
</ul>
</div>
<div id="contextMenu" style="display:none;position:absolute;">
<ul style="list-style:none;background-color:Silver;">
<li>刷新</li>
<li>排列图标</li>
<li>属性</li>
<li>我的电脑</li>
<li>墙纸设置</li>
</ul>
</div>
</body>
</html>
27form对象.htm
<!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" >
<!--
?document.getElementById('btn1').click()
? form 对象是表单的 Dom 对象。
? 方法： submit() 提交表单，但是不会触发 onsubmit 事件。
? 实现 autopost ，也就是焦点离开控件以后页面立即提交，而不是
只有提交 submit 按钮以后才提交，当光标离开的时候触发 onblur
事件，在 onblur 中调用 form 的 submit 方法。代码见备注。
? 在点击 submit 后 form 的 onsubmit 事件被触发 ，在 onsubmit 中可以
进行数据校验，数据数据有问题， 返回 false 即可取消提交
? <form name="form1" action="a.aspx" method="get"
οnsubmit="if(document.getElementById('txtname').value.length
<=0){alert(' 姓名必填 ');return false;}">
-->
<head>
<title>form对象</title>
</head>
<body>
<form id="form1" action="OK.aspx"
onsubmit="if(document.getElementById('name').value.length<=0){alert('姓名不能为空！');return false;}">
<input type="text" id="name" onblur="document.getElementById('form1').submit()"/><br />
<input type="button" id="btn1" onclick="alert('我被点击了，只有点击我自己才能出现')" value="一个按钮" /><br />
<input type="button" value="我也能拿到你的点击事件" onclick="document.getElementById('btn1').click()" /><br />
<input type="button" value="俺也提交" onclick="document.getElementById('form1').submit()" /><br />
<input type="submit" /><br /><br /><br />
<input type="text" id="Text1" onblur="document.getElementById('form1').submit()"
value="当光标离开的时候触发提交"/><br />
</form>
</body>
</html>
28AutoPost.htm
<!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>
<title>AutoPost事件案例</title>
</head>
<body>
<form id="form1" action="OK.aspx">
<select onchange="document.getElementById('form1').submit()">
<option>北京</option>
<option>南京</option>
<option>西安</option>
</select>
<input type="submit" />
</form>
</body>
</html>
29正则表达式.htm
<!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" >
<!--
复习 C# 正则表达式
? JavaScript 中创建正则表达式类的方法：
? var regex = new RegExp("\\d{5}") 或者 var regex = /\d{5}/
? / 表达式 / 是 JavaScript 中专门为简化正则表达式编写而提供的语法，
写在 // 中的正则表达式就不用管转义符了。
? RegExp 对象的方法：
? （ 1 ） test(str) 判断字符串 str 是否匹配正则表达式，相当于 IsMatch
? var regex = /.+@.+/;
? alert(regex.test("a@b.com"));
? alert(regex.test("ab.com"));
? （ 2 ） exec(str) 进行搜索匹配，返回值为匹配结果 ( * )
? （ 3 ） compile 编译表达式，提高运行速度。 ( * )
String 对象中提供了一些与正则表达式相关的方法，相当于对于
RegExp 类的包装，简化调用：
match(regexp) ，相当于调用 exec
var s = "aaa@163.com";
var regex = /(.+)@(.+)/;
var match = s.match(regex);
alert(RegExp.$1 + " ，服务器： " + RegExp.$2);
-->
<head>
<title>正则表达式</title>
<script type="text/javascript">
var regex=/.+@.+/;
alert(regex.test("aaa@bb.com"));
alert(regex.test("aaa.bb.com"));
var s = "abc@qq.com";
var regex = /(.+)@(.+)/;
s.match(regex);
alert(RegExp.$1); //取得第1组
alert(RegExp.$2); //取得第二组
</script>
</head>
<body>
</body>
</html>
30回车替换键盘_金额框案例.htm
<!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" >
<!--
案例 1 ：回车实现 Tab 跳转。响应文本框的 onKeyDown 事件，
window.event.keyCode 获得用户点击的 keyCode 。（ * ）
keyCode 和 ASCII 不是完全一致，主键盘的 1 和小键盘的 1 的
ASCII 一样，但是 keyCode 不一样。详见备注。回车的 keyCode
为 13 ， Tab 的 keyCode 为 9 。 if(window.event.keyCode ==
13){window.event.keyCode = 9;}
? <body
οnkeydοwn="if(window.event.keyCode==13){window.event.key
Code=9;}">
? 只有少数的键才能被替换，大部分是不行的，有权限问题。
--------------------------------------------------------------
案例：金额文本框
? 财务相关系统中涉及到金额的文本框有如下要求：
? 进入金额文本文本框不使用中文输入法
? 不能输入非数字
? 焦点在文本框中时文本框左对齐；焦点离开文本框时文本框右对齐，显示千
分位
? 禁用输入法： style="ime-mode:disabled"
? 禁止键入非法值，只有这些才能被键入 (k == 9) || (k == 13) ||
(k==46)||(k==8)||(k==189)||(k==109)||(k==190)||(k==110)|| (k>=48 &&
k<=57)||(k>=96 && k<=105)||(k>=37 && k<=40) 。 οnkeydοwn="return
numonKeyDown()" 不要写成 οnkeydοwn="numonKeyDown()" 区分事件响应函数
和事件响应函数调用的函数。
? 禁止粘贴 ( 伟大的 Tester) ， <input οnpaste="return false;" ，太暴力，应该只是禁
止粘贴非法值。在 onpaste 中通过 clipboardData.getData('Text') 取到粘贴板中的
值，然后遍历每个字符，看是否是合法的值，如果全部是合法值才允许粘贴，只
要有一个非法值就禁止粘贴。 charAt 、 charCodeAt
? 添加千分位的方法，见备注
? 焦点在的时候左对齐没有千分位，焦点不在时右对齐千分位。
this.style.textAlign='right'
-->
<head>
<title>回车替换键盘</title>
<script language="javascript">
function numonKeyDown() {
var k = window.event.keyCode;
//判断k是否为合法的Ascii
return isValidNum(k);
}
function isValidNum(k) {
return((k == 9) || (k == 13) ||(k == 46) || (k == 8) || (k == 189) || (k == 109) || (k == 190) || (k == 110) || (k >= 48 && k <= 57) || (k >= 96 && k <= 105) || (k >= 37 && k <= 40));
}
function commafy(n) { //添加千分位
//var re = /\d{1,3}(?=(\d{3})+$)/g;
//var n1 = n.replace(/^(\d+)/((\.\d+)?)$/,function(s,s1,s2){return s1.replace(re,"$,")+s2;});
re=/(\d{1,3})(?=(\d{3})+(?:$|\D))/g ;
n1 = n.replace(re, "$1,")
return n1;
}
function numPaste() { //处理粘贴板数据
var text = window.clipboardData.getData("Text");
for (var i = 0; i < text.length; i++) {
var asc = text.charCodeAt(i); //charAt→"3",charCodeAt()取到的是ASCII码
if (!isValidNum(asc)) { //遇到一个非法值就认为要粘贴的内容是非法的return false
return false;
}
}
}
</script>
</head>
<body onkeydown="if(window.event.keyCode==13){window.event.keyCode=9;}">
不能输入非数字:
<input type="text" style="text-align:right" onkeydown="var k=window.event.keyCode;if((k == 9) || (k == 13) ||
(k==46)||(k==8)||(k==189)||(k==109)||(k==190)||(k==110)|| (k>=48 && k<=57)||(k>=96 && k<=105)||(k>=37 && k<=40)){}else{return false;}"/>
<br />
禁用输入法:
<input type="text" style="text-align:right;ime-mode:disabled;"/>
<br />
不能输入和粘贴非数字:
<input type="text" style="text-align:right;" onpaste="return numPaste()" onkeydown="return numonKeyDown()"/>
<br />
添加去掉千分位:
<input id="t" type="text" value="92349832984.89"
onblur="this.value=commafy(this.value);this.style.textAlign='right';"
onfocus="this.style.textAlign='left';this.value=this.value.replace(/,/g,'')"/>
<br />
</body>
</html>
31摭挡层.htm
<!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>
<title>摭挡层_模态对话框</title>
<script type="text/javascript" language="javascript">
function sAlert(str) {
var msgw, msgh, bordercolor;
msgw = 300; //提示窗口的宽度
msgh = 200; //提示窗口的高度
titleheight = 25; //提示窗口标题高度
bordercolor = "#FF3C00"; //提示窗口的边框颜色
titlecolor = "#D2CECE"; //提示窗口的标题颜色
var sWidth, sHeight;
//sWidth=document.body.offsetWidth;//得出当前屏幕的宽
sWidth = document.body.clientWidth; //Body对象宽度
sHeight=screen.height;//得到当前屏幕的高
//sHeight=document.body.clientHeight;//body对象高度
/*
if (window.innerHeight && window.scrollMaxY) {
sHeight = window.innerHeight + window.scrollMaxY;
}
else if (document.body.scrollHeight > document.body.offsetHeight) {
sHeight = document.body.scrollHeight;
}
else {
sHeight = document.body.offsetHeight;
} //以上得到整个屏幕的高
*/
var bgObj = document.createElement("div"); //创建一个div对象
bgObj.setAttribute('id', 'bgDiv'); //可以用bgObj.id="bgDiv"的方法，是为div指定属性
bgObj.style.position = "absolute"; //把bgDiv这个div绝对定位
bgObj.style.top = "0"; //顶部为0
bgObj.style.background = "#777"; //背景颜色
bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)"; //ie浏览器透明度设置
bgObj.style.opacity = "0.6"; //透明度(火狐浏览器中)
bgObj.style.left = "0"; //左边为0
bgObj.style.width = sWidth + "px"; //宽(上面得到的屏幕宽度)
bgObj.style.height = sHeight + "px"; //高(上面得到的屏幕高度)
bgObj.style.zIndex = "100"; //层的z轴位置
document.body.appendChild(bgObj);
var msgObj = document.createElement("div"); //创建一个div对象
msgObj.setAttribute("id", "msgDiv"); //可以用bgObj.id="msgDiv"的方法，是为div指定属性值
msgObj.setAttribute("align", "center"); //为div的align赋值
msgObj.style.background = "white"; //背景颜色为白色
msgObj.style.border = "1px solid " + bordercolor; //边框属性，颜色在上面已经赋值
msgObj.style.position = "absolute"; //绝对定位
msgObj.style.left = "35%"; //从左侧开始位置
msgObj.style.top = "30%"; //从上部开始位置
msgObj.style.font = "12px/1.6em Verdana,Geneva,Arial,Helvetica,sans-serif"; //字体属性
//msbObj.style.marginLeft="-225px"; //左外边距
//msgObj.style.marginTop=-75+document.documentElement.scrollTop+"px";//上外边距
msgObj.style.width = msgw + "px"; //提示框的宽(上面定义过)
msgObj.style.height = msgh + "px"; //提示框的高(上面定义过)
msgObj.style.textAlign = "center"; //文本位置属性，居中。
msgObj.style.lineHeight = "25px"; //行间距
msgObj.style.zIndex = "101";//层的z轴位置
var title = document.createElement("h4"); //创建一个h4对象
title.setAttribute("id", "msgTitle"); //为h4对象添加标题
title.setAttribute("align", "right"); //文字对齐方式
title.style.margin = "0"; //浮动
title.style.padding = "3px"; //浮动
title.style.background=titlecolor; //背景颜色
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20,startY=20,finishX=100,finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.75"; //透明
//title.style.border="1px solid"+bordercolor; //边框
title.style.height="25px"; //高度
title.style.font="12px Verdana,Geneva,Arial,Helvetica,sans-serif"; //字体属性
title.style.color="white"; //文字颜色
title.style.cursor="pointer"; //鼠标样式
title.innerHTML="<a href=\"#\">关闭</a>"; //显示的文字
title.οnclick=function(){
document.body.removeChild(bgObj); //移除遮罩层
document.getElementById("msgDiv").removeChild(title); //在提示框中移除标题
document.body.removeChild(msgObj); //移除提示框
}
document.body.appendChild(msgObj); //在body中画出提示框层
document.getElementById("msgDiv").appendChild(title); //在提示框中增加标题
var txt = document.createElement("p");
txt.style.margin = "1em 0"; //文本浮动
txt.setAttribute("id", "msgTxt"); //为p属性增加id属性
txt.innerHTML = str; //把传进来的值赋给p属性
document.getElementById("msgDiv").appendChild(txt); //把p属性增加到提示框里
}
</script>
</head>
<body>
<a href="#" onclick="sAlert('<a href=http://www.it300.net>测试效果</a>');">点击测试</a>
<input type="text" />
</body>
</html>
32省市选择.htm
<!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>
<title>省市选择</title>
<script type="text/javascript">
var data = { "山东": ["济南", "青岛", "潍坊"], "河南": ["郑州", "洛阳", "三门峡"], "辽宁": ["沈阳", "鞍山", "大连"] };
function loadProv() {
var prov = document.getElementById("prov");
for (var key in data) {
var option = document.createElement("option");
option.value = key;
option.innerText = key;
prov.appendChild(option);
}
}
function provChange() {
var prov = document.getElementById("prov");
var city = document.getElementById("city");
//先清除旧的市列表
//city.option.length=0; //方式一
/*
for (var i = 0; i < city.childNodes.length; i++) {
//遍历select的所有子节点，如果从前往后删，每次都会有漏网之鱼，因为有重新排号的问题
var option = city.childNodes[i];
city.removeChild(option);
}
*/
for (var i = city.childNodes.length - 1; i >= 0; i--) { //从后向前删就没顺序问题了
var option = city.childNodes[i];
city.removeChild(option);
}
var provName = prov.value;
var cities = data[provName]; //取出的内容["济南", "青岛", "潍坊"]
for (var i = 0; i < cities.length; i++) {
var option = document.createElement("option");
option.value = cities[i];
option.innerText = cities[i];
city.appendChild(option);
}
}
</script>
</head>
<body onload="loadProv()">
<select id="prov" onchange="provChange()">
<option value="请选择省">--请选择省--</option>
</select>
<select id="city"></select>
</body>
</html>
33歌曲选择.htm
<!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" >
<!--
练习：歌曲列表 （ CheckBox+Label ）全选、全不选、反选，只
针对一个层中， div.getElementsByTagName("input") ，再判断
type=' checkbox ' 的项， checked="checked" 。
? if(cb.checked=="checked"){// 用调试，期望的和实际的。
-->
<head>
<title>歌曲列表选择</title>
<script type="text/javascript" language="javascript">
function selAll() {
var playlist = document.getElementById("playlist");
var inputs = playlist.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type == "checkbox") {
input.checked = "checked";
}
}
}
function deSelAll() {
var playlist = document.getElementById("playlist");
var inputs = playlist.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type == "checkbox") {
input.checked = "";
}
}
}
function reverseSel() {
var playlist = document.getElementById("playlist");
var inputs = playlist.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type == "checkbox") {
if (input.checked == true) {
input.checked = '';
//input.checked = false;
}
else {
input.checked = 'checked';
//input.checked = true;
}
}
}
}
</script>
</head>
<body>
<div id="playlist">
<input type="checkbox" id="p1" /><label for="p1">whitout you</label><br />
<input type="checkbox" id="p2" /><label for="p1">listen to your heart</label><br />
<input type="checkbox" id="p3" /><label for="p1">big big girl</label><br />
<input type="checkbox" id="p4" /><label for="p1">love story</label><br />
<p>
<input type="button" onclick="selAll()" value="全选" />
<input type="button" onclick="deSelAll()" value="全不选" />
<input type="button" onclick="reverseSel()" value="反选" />
</p>
</div>
</body>
</html>
34权限选择.htm
<!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>
<title>权限选择</title>
<script type="text/javascript">
function moveSelected(selectSrc, selectDest) {//selectSrc是源select,selectDest是目标select
for(var i=selectSrc.childNodes.length-1;i>=0;i--){
var option=selectSrc.childNodes[i];
if(option.selected==true){
selectSrc.removeChild(option);
option.selected=false;
selectDest.appendChild(option);
}
}
}
function moveAll(selectSrc, selectDest) {//selectSrc是源select,selectDest是目标select
for (var i = selectSrc.childNodes.length - 1; i >= 0; i--) {
var option = selectSrc.childNodes[i];
selectSrc.removeChild(option);
selectDest.appendChild(option);
}
}
</script>
</head>
<body>
<select style="float:left;width:15%;height:100px;" id="select1" multiple="multiple">
<option>添加</option>
<option>删除</option>
<option>修改</option>
<option>打印</option>
</select>
<div style="float:left">
<input style="float:left;width:100%;" type="button" value=">" onclick="moveSelected(document.getElementById('select1'),document.getElementById('select2'))" />
<input style="float:left;width:100%;" type="button" value="<" onclick="moveSelected(document.getElementById('select2'),document.getElementById('select1'))" />
<input style="float:left;width:100%;" type="button" value=">>" onclick="moveAll(document.getElementById('select1'),document.getElementById('select2'))" />
<input style="float:left;width:100%;" type="button" value="<<" onclick="moveAll(document.getElementById('select2'),document.getElementById('select1'))" />
</div>
<select style="float:left;width:15%;height:100px;" id="select2" multiple="multiple"></select>
</body>
</html>
648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
