BlogJava-szhswl-文章分类-JAVASCRIPT

JS屏蔽功能类

宋针还 — Mon, 17 Aug 2009 10:00:00 GMT

1.屏蔽功能类

1.1 屏蔽键盘所有键

1.2 屏蔽鼠标右键

在body标签里加上on_contextmenu=self.event.returnvalue=false

或者

function nocontextmenu()
{
if(document.all) {
event.cancelBubble=true;
event.returnvalue=false;
return false;
}
}

或者

1.3 屏蔽 Ctrl+N、Shift+F10、F5刷新、退格键

1.4屏蔽浏览器右上角“最小化”“最大化”“关闭”键

或者使用全屏打开页面

注：在body标签里加上on_beforeunload="javascript:return false"（使不能关闭窗口）

1.5屏蔽F5键

1.6屏蔽IE后退按钮

在你链接的时候用

1.7屏蔽主窗口滚动条

在body标签里加上 style="overflow-y:hidden"

1.8 屏蔽拷屏,不断地清空剪贴板

在body标签里加上onload="setInterval('clipboardData.setData(\'Text\',\'\')',100)"

1.9 屏蔽网站的打印功能

1.10 屏蔽IE6.0 图片上自动出现的保存图标

方法一：

方法二：

1.11 屏蔽页中所有的script

2.表单提交验证类

2.1 表单项不能为空

2.2 比较两个表单项的值是否相同

2.3 表单项只能为数字和"_",用于电话/银行帐号验证上,可扩展到域名注册等

2.4 表单项输入数值/长度限定

2.5 中文/英文/数字/邮件地址合法性判断

2.6 限定表单项不能输入的字符

宋针还 2009-08-17 18:00 发表评论

javascript table delete row

宋针还 — Thu, 20 Dec 2007 11:28:00 GMT

如何实现运行代码框功能

<html>
<head>
<script type="text/javascript">
function deleteRow(i){
    document.getElementById('myTable').deleteRow(i)
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
  <td>Row 1</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
</tr>
<tr>
  <td>Row 2</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
</tr>
<tr>
  <td>Row 3</td>
  <td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)" /></td>
</tr>
</table>
</body></html>

[提示：你可先修改部分代码，再按运行]

宋针还 2007-12-20 19:28 发表评论

javascript insert table row

宋针还 — Wed, 19 Dec 2007 12:05:00 GMT

如何实现运行代码框功能

<html>
<head>
<script type="text/javascript">
function insRow(){
    var x=document.getElementById('myTable').insertRow(2)
    var y=x.insertCell(0)
    var z=x.insertCell(1)
    y.innerHTML="NEW CELL1"
    z.innerHTML="NEW CELL2"
}
</script>
</head>
<body>
<table id="myTable" border="1">
    <tr>
        <td>d</td>
        <td>d</td>
    </tr>
    <tr>
        <td>d</td>
        <td>d</td>
    </tr>
    <tr>
        <td>Row3 cell1</td>
        <td>Row3 cell2</td>
    </tr>
    <tr>
        <td>Row4 cell1</td>
        <td>Row4 cell2</td>
    </tr>
    <tr>
        <td>Row5 cell1</td>
        <td>Row5 cell2</td>
    </tr>
</table>
<form>
<input type="button" onclick="insRow()" value="Insert row" />
</form>
</body>
</html> 
Inserting/Removing Row Elements 
<HTML>
<HEAD>
<TITLE>Modifying Table Cell Content</TITLE>
<STYLE TYPE="text/css">
THEAD {background-color:lightyellow; font-weight:bold}
TFOOT {background-color:lightgreen; font-weight:bold}
#myTABLE {background-color:bisque}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
var theTable, theTableBody
function init() {
    theTable = (document.all) ? document.all.myTABLE : 
        document.getElementById("myTABLE")
    theTableBody = theTable.tBodies[0]
}
function appendRow(form) {
    insertTableRow(form, -1)
}
function addRow(form) {
    insertTableRow(form, form.insertIndex.value)
}
function insertTableRow(form, where) {
    var now = new Date()
    var nowData = [now.getHours(), now.getMinutes(), now.getSeconds(), 
        now.getMilliseconds()]
    clearBGColors()
    var newCell
    var newRow = theTableBody.insertRow(where)
    for (var i = 0; i < nowData.length; i++) {
        newCell = newRow.insertCell(i)
        newCell.innerHTML = nowData[i]
        newCell.style.backgroundColor = "salmon"
    }
    updateRowCounters(form)
}
function removeRow(form) {
    theTableBody.deleteRow(form.deleteIndex.value)
    updateRowCounters(form)
}
function insertTHEAD(form) {
    var THEADData = ["Hours","Minutes","Seconds","Milliseconds"]
    var newCell
    var newTHEAD = theTable.createTHead()
    newTHEAD.id = "myTHEAD"
    var newRow = newTHEAD.insertRow(-1)
    for (var i = 0; i < THEADData.length; i++) {
        newCell = newRow.insertCell(i)
        newCell.innerHTML = THEADData[i]
    }
    updateRowCounters(form)
    form.addTHEAD.disabled = true
    form.deleteTHEAD.disabled = false
}
function removeTHEAD(form) {
    theTable.deleteTHead()    
    updateRowCounters(form)
    form.addTHEAD.disabled = false
    form.deleteTHEAD.disabled = true
}
function insertTFOOT(form) {
    var TFOOTData = ["Hours","Minutes","Seconds","Milliseconds"]
    var newCell
    var newTFOOT = theTable.createTFoot()
    newTFOOT.id = "myTFOOT"
    var newRow = newTFOOT.insertRow(-1)
    for (var i = 0; i < TFOOTData.length; i++) {
        newCell = newRow.insertCell(i)
        newCell.innerHTML = TFOOTData[i]
    }
    updateRowCounters(form)
    form.addTFOOT.disabled = true
    form.deleteTFOOT.disabled = false
}
function removeTFOOT(form) {
    theTable.deleteTFoot()    
    updateRowCounters(form)
    form.addTFOOT.disabled = false
    form.deleteTFOOT.disabled = true
}
function insertCaption(form) {
    var captionData = form.captionText.value
    var newCaption = theTable.createCaption()
    newCaption.innerHTML = captionData
    form.addCaption.disabled = true
    form.deleteCaption.disabled = false
}
function removeCaption(form) {
    theTable.deleteCaption()    
    form.addCaption.disabled = false
    form.deleteCaption.disabled = true
}
// housekeeping functions
function updateRowCounters(form) {
    var sel1 = form.insertIndex
    var sel2 = form.deleteIndex
    sel1.options.length = 0
    sel2.options.length = 0
    for (var i = 0; i < theTableBody.rows.length; i++) {
        sel1.options[i] = new Option(i, i)
        sel2.options[i] = new Option(i, i)
    }
    form.removeRowBtn.disabled = (i==0)
}
function clearBGColors() {
    for (var i = 0; i < theTableBody.rows.length; i++) {
        for (var j = 0; j < theTableBody.rows[i].cells.length; j++) {
            theTableBody.rows[i].cells[j].style.backgroundColor = ""        
        }
    }
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H1>Modifying Tables</H1>
<HR>
<FORM NAME="controls">
<FIELDSET>
<LEGEND>Add/Remove Rows</LEGEND>
<TABLE WIDTH="100%" CELLSPACING=20><TR>
<TD><INPUT TYPE="button" VALUE="Append 1 Row" 
    onClick="appendRow(this.form)"></TD>
<TD><INPUT TYPE="button" VALUE="Insert 1 Row" onClick="addRow(this.form)"> at index: 
    <SELECT NAME="insertIndex">
        <OPTION VALUE="0">0
    </SELECT></TD>
<TD><INPUT TYPE="button" NAME="removeRowBtn" VALUE="Delete 1 Row" DISABLED 
    onClick="removeRow(this.form)"> at index: 
    <SELECT NAME="deleteIndex">
        <OPTION VALUE="0">0
    </SELECT></TD>
</TR>
</TABLE>
</FIELDSET>
<FIELDSET>
<LEGEND>Add/Remove THEAD and TFOOT</LEGEND>
<TABLE WIDTH="100%" CELLSPACING=20><TR>
<TD><INPUT TYPE="button" NAME="addTHEAD" VALUE="Insert THEAD" 
    onClick="insertTHEAD(this.form)"><BR>
    <INPUT TYPE="button" NAME="deleteTHEAD" VALUE="Remove THEAD" DISABLED 
        onClick="removeTHEAD(this.form)">
</TD>
<TD><INPUT TYPE="button" NAME="addTFOOT" VALUE="Insert TFOOT" 
    onClick="insertTFOOT(this.form)"><BR>
    <INPUT TYPE="button" NAME="deleteTFOOT" VALUE="Remove TFOOT" DISABLED 
        onClick="removeTFOOT(this.form)">
</TD>
</TR>
</TABLE>
</FIELDSET>
<FIELDSET>
<LEGEND>Add/Remove Caption</LEGEND>
<TABLE WIDTH="100%" CELLSPACING=20><TR>
<TD><INPUT TYPE="button" NAME="addCaption" VALUE="Add Caption" 
    onClick="insertCaption(this.form)"></TD>
<TD>Text: <INPUT TYPE="text" NAME="captionText" SIZE=40 VALUE="Sample Caption">
<TD><INPUT TYPE="button" NAME="deleteCaption" VALUE="Delete Caption" DISABLED 
    onClick="removeCaption(this.form)"></TD>
</TR>
</TABLE>
</FIELDSET>
</FORM>
<HR>
<TABLE ID="myTABLE" CELLPADDING=10 BORDER=1>
<TBODY>
</TABLE>
</BODY>
</HTML>

[提示：你可先修改部分代码，再按运行]

宋针还 2007-12-19 20:05 发表评论

JQuery技巧总结(转载)

宋针还 — Tue, 11 Dec 2007 12:36:00 GMT

一、简介

1.1、概述
随着WEB2.0及 ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的有Prototype、YUI、jQuery、mootools、 Bindows以及国内的JSVM框架等，通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。
jQuery是继prototype 之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006 年初创建的，它有助于简化 JavaScript™ 以及Ajax 编程。有人使用这样的一比喻来比较prototype和jQuery：prototype就像Java，而jQuery就像ruby. 它是一个简洁快速灵活的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。

它具有如下一些特点：
1、代码简练、语义易懂、学习快速、文档丰富。
2、jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。
3、jQuery支持CSS1-CSS3,以及基本的xPath。
4、jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
5、可以很容易的为jQuery扩展其他功能。
6、能将JS代码和HTML代码完全分离，便于代码和维护和修改。
7、插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。

jQuery的设计会改变你写JavaScript代码的方式，降低你学习使用JS操作网页的复杂度，提高网页JS开发效率，无论对于js初学者还是资深专家，jQuery都将是您的首选。
jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不同的Web应用程序中。
官方站点：http://jquery.com/ 中文站点：http://jquery.org.cn/

1.2、目的
通过学习本文档，能够对jQuery有一个简单的认识了解，清楚JQuery与其他JS框架的不同，掌握jQuery的常用语法、使用技巧及注意事项。

二、使用方法
在需要使用JQuery的页面中引入JQuery的js文件即可。
例如：
引入之后便可在页面的任意地方使用jQuery提供的语法。

三、学习教程及参考资料
请参照《jQuery中文API手册》和http://jquery.org.cn/visual/cn/index.xml
推荐两篇不错的jquery教程：《jQuery的起点教程》和《使用 jQuery 简化 Ajax 开发》
(说明：以上文档都放在了【附件】中)

四、语法总结和注意事项

1、关于页面元素的引用
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

3、如何获取jQuery集合的某一项
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个

元素的内容。有如下两种方法：
$("div").eq(2).html(); //调用jquery对象的方法
$("div").get(2).innerHTML; //调用dom的方法属性

4、同一函数实现set和get
Jquery中的很多方法都是如此，主要包括如下几个：
$("#msg").html(); //返回id为msg的元素节点的html内容。
$("#msg").html("new content");
//将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

$("#msg").text(); //返回id为msg的元素节点的文本内容。
$("#msg").text("new content");
//将“new content” 作为普通文本串写入id为msg的元素节点内容中,页面显示new content

$("#msg").height(); //返回id为msg的元素的高度
$("#msg").height("300"); //将id为msg的元素的高度设为300
$("#msg").width(); //返回id为msg的元素的宽度
$("#msg").width("300"); //将id为msg的元素的宽度设为300

$("input").val("); //返回表单输入框的value值
$("input").val("test"); //将表单输入框的value值设为test

$("#msg").click(); //触发id为msg的元素的单击事件
$("#msg").click(fn); //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式：
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//为索引分别为0，1，2的p元素分别设定不同的字体颜色。

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果

$("p").click(function(){alert($(this).html())})
//为每个p元素增加了click事件，单击某个p元素则弹出其内容

6、扩展我们需要的功能
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); //为jquery扩展了min,max两个方法
使用扩展的方法（通过“$.方法名”调用）：
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

7、支持方法的连写
所谓连写，即可以对一个jquery对象连续调用各种不同的方法。
例如：
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});

8、操作元素的样式
主要包括以下几种方式：
$("#msg").css("background"); //返回元素的背景颜色
$("#msg").css("background","#ccc") //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200"); //设定宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("#msg").addClass("select"); //为元素增加名称为select的class
$("#msg").removeClass("select"); //删除元素名称为select的class
$("#msg").toggleClass("select"); //如果存在（不存在）就删除（添加）名称为select的class

9、完善的事件处理功能
Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。
如：
$("#msg").click(function(){alert("good")}) //为元素添加了单击事件
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//为三个不同的p元素单击事件分别设定不同的处理
jQuery中几个自定义的事件：
（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over，离开时置为out。
$("tr").hover(function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
});
（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){alert("Load Success")})
//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价
（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
//每次点击时轮换添加和删除名为selected的class。
$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});
（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如：
$("p").trigger("click"); //触发所有p元素的click事件
（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中（添加）删除绑定的事件。
例如：
$("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击事件
$("p").unbind(); //删除所有p元素上的所有事件
$("p").unbind("click") //删除所有p元素上的单击事件

10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。

11、几个有用的jQuery方法
$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。
$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。
如
$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
等价于：
var tempArr=[0,1,2];
for(var i=0;i alert("Item #"+i+": "+tempArr[i]);
}
也可以处理json数据，如
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
结果为：
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。
如：
$.extend(settings, options);
//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。
var settings = $.extend({}, defaults, options);
//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数（合并多项并返回）
$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。
如：
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr内容为：[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr内容为：[2,3]
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
如：$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
$.trim(str)：删除字符串两端的空白字符。
如：$.trim(" hello, how are you? "); //返回"hello,how are you? "

12、解决自定义方法或其他类库与jQuery的冲突
很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$("#msg")改为jQuery("#msg")。
如：
jQuery.noConflict();
// 开始使用jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';

本文转自:http://hi.baidu.com/ismayday/blog/item/960954fb7ec38b156d22ebc5.html

宋针还 2007-12-11 20:36 发表评论

JS实现table里单元格排序

宋针还 — Mon, 10 Dec 2007 11:32:00 GMT

如何实现运行代码框功能

<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>001</title>
<script language=javascript type=text/javascript>
function paixu(){
var obj=document.getElementsByTagName("table")[0],obj2=obj.cloneNode(true).rows,a=new Array();
while(obj.rows.length!=1)
obj.rows[1].removeNode(true);
for(var i=1;i<obj2.length;i++)
a[a.length]=obj2[i];
a.sort(function(a,b){
return b.cells[1].innerText-a.cells[1].innerText;}
);
for(var i=0;i<a.length;i++)
obj.firstChild.appendChild(a[i]);
}
</script>
</head>
<body>
<table border="1" width="100%" id="table1" cellspacing="1">
    <tr>
        <td width="172">代 码</td>
        <td>名 称</td>
    </tr>
    <tr>
        <td width="172">001</td>
        <td>11111</td>
    </tr>
    <tr>
        <td width="172">002</td>
        <td>3333</td>
    </tr>
    <tr>
        <td width="172">00101</td>
        <td>22222</td>
    </tr>
    <tr>
        <td width="172">00201</td>
        <td>4444</td>
    </tr>
</table>
    <p><button name="B3" onclick='paixu();'>排 序</button></p>
</body>
</html>

[提示：你可先修改部分代码，再按运行]

宋针还 2007-12-10 19:32 发表评论

模拟QQ菜单效果

宋针还 — Mon, 10 Dec 2007 10:01:00 GMT

如何实现运行代码框功能

<html>
<head>
<title>模拟QQ菜单效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<STYLE type="text/css">
A:link { COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: none}
A:visited { COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: none}
A:hover { COLOR: #006CD9; FONT-SIZE: 12px; TEXT-DECORATION: none}
BODY { FONT-SIZE: 12px;}
TD { FONT-SIZE: 12px; line-height: 150%}
</style>
<script language="JavaScript">
<!--
function showitem(id,name)
{
 return ("<span><a href='"+id+"' target=_blank>"+name+"</a></span><br />")
}
function switchoutlookBar(number)
{
 var i = outlookbar.opentitle;
 outlookbar.opentitle=number;
 var id1,id2,id1b,id2b
 if (number!=i && outlooksmoothstat==0){
  if (number!=-1)
  {
   if (i==-1){
    id2="blankdiv";
    id2b="blankdiv";
   }
   else{
    id2="outlookdiv"+i;
    id2b="outlookdivin"+i;
    document.all("outlooktitle"+i).style.border="1px none navy";
    document.all("outlooktitle"+i).style.background=outlookbar.maincolor;
    document.all("outlooktitle"+i).style.color="#ffffff";
    document.all("outlooktitle"+i).style.textalign="center";
   }
   id1="outlookdiv"+number
   id1b="outlookdivin"+number
   document.all("outlooktitle"+number).style.border="1px none white";
   document.all("outlooktitle"+number).style.background=outlookbar.maincolor; //title
   document.all("outlooktitle"+number).style.color="#ffffff";
   document.all("outlooktitle"+number).style.textalign="center";
   smoothout(id1,id2,id1b,id2b,0);
  }
  else
  {
   document.all("blankdiv").style.display="";
   document.all("blankdiv").sryle.height="100%";
   document.all("outlookdiv"+i).style.display="none";
   document.all("outlookdiv"+i).style.height="0%";
   document.all("outlooktitle"+i).style.border="1px none navy";
   document.all("outlooktitle"+i).style.background=outlookbar.maincolor;
   document.all("outlooktitle"+i).style.color="#ffffff";
   document.all("outlooktitle"+i).style.textalign="center";
  }
 }
}
function smoothout(id1,id2,id1b,id2b,stat)
{
 if(stat==0){
  tempinnertext1=document.all(id1b).innerHTML;
  tempinnertext2=document.all(id2b).innerHTML;
  document.all(id1b).innerHTML="";
  document.all(id2b).innerHTML="";
  outlooksmoothstat=1;
  document.all(id1b).style.overflow="hidden";
  document.all(id2b).style.overflow="hidden";
  document.all(id1).style.height="0%";
  document.all(id1).style.display="";
  setTimeout("smoothout('"+id1+"','"+id2+"','"+id1b+"','"+id2b+"',"+outlookbar.inc+")",outlookbar.timedalay);
 }
 else
 {
  stat+=outlookbar.inc;
  if (stat>100)
   stat=100;
  document.all(id1).style.height=stat+"%";
  document.all(id2).style.height=(100-stat)+"%";
  if (stat<100) 
   setTimeout("smoothout('"+id1+"','"+id2+"','"+id1b+"','"+id2b+"',"+stat+")",outlookbar.timedalay);
  else
  {
   document.all(id1b).innerHTML=tempinnertext1;
   document.all(id2b).innerHTML=tempinnertext2;
   outlooksmoothstat=0;
   document.all(id1b).style.overflow="auto";
   document.all(id2).style.display="none";
  }
 }
}
function getOutLine()
{
 outline="<table "+outlookbar.otherclass+">";
 for (i=0;i<(outlookbar.titlelist.length);i++)
 {
  outline+="<tr><td name=outlooktitle"+i+" id=outlooktitle"+i+" "; 
  if (i!=outlookbar.opentitle) 
   outline+=" nowrap align=center style='cursor:hand;background-color:"+outlookbar.maincolor+";color:#ffffff;height:20;border:1 none navy' ";
  else
   outline+=" nowrap align=center style='cursor:hand;background-color:"+outlookbar.maincolor+";color:white;height:20;border:1 none white' ";
  outline+=outlookbar.titlelist[i].otherclass
  outline+=" onclick='switchoutlookBar("+i+")'><span class=smallFont>";
  outline+=outlookbar.titlelist[i].title+"</span></td></tr>";
  outline+="<tr><td name=outlookdiv"+i+" valign=top align=center id=outlookdiv"+i+" style='width:100%"
  if (i!=outlookbar.opentitle) 
   outline+=";display:none;height:0%;";
  else
   outline+=";display:;height:100%;";
  outline+="'><div name=outlookdivin"+i+" id=outlookdivin"+i+" style='overflow:auto;width:100%;height:100%'>";
  for (j=0;j<outlookbar.itemlist[i].length;j++)
   outline+=showitem(outlookbar.itemlist[i][j].key,outlookbar.itemlist[i][j].title);
  outline+="</div></td></tr>"
 }
 outline+="</table>"
 return outline
}
function show()
{
 var outline;
 outline="<div id=outLookBarDiv name=outLookBarDiv style='width=100%;height:100%'>"
 outline+=outlookbar.getOutLine();
 outline+="</div>"
 document.write(outline);
}
function theitem(intitle,instate,inkey)
{
 this.state=instate;
 this.otherclass=" nowrap ";
 this.key=inkey;
 this.title=intitle;
}
function addtitle(intitle)
{
 outlookbar.itemlist[outlookbar.titlelist.length]=new Array();
 outlookbar.titlelist[outlookbar.titlelist.length]=new theitem(intitle,1,0);
 return(outlookbar.titlelist.length-1);
}
function additem(intitle,parentid,inkey)
{
 if (parentid>=0 && parentid<=outlookbar.titlelist.length)
 {
  outlookbar.itemlist[parentid][outlookbar.itemlist[parentid].length]=new theitem(intitle,2,inkey);
  outlookbar.itemlist[parentid][outlookbar.itemlist[parentid].length-1].otherclass=" nowrap align=left style='height:5' ";
  return(outlookbar.itemlist[parentid].length-1);
 }
 else
  additem=-1;
}
function outlook()
{
 this.titlelist=new Array();
 this.itemlist=new Array();
 this.divstyle="style='height:100%;width:100%;overflow:auto' align=center";
 this.otherclass="border=0 cellspacing='0' cellpadding='0' style='height:100%;width:100%'valign=middle align=center ";
 this.addtitle=addtitle;
 this.additem=additem;
 this.starttitle=-1;
 this.show=show;
 this.getOutLine=getOutLine;
 this.opentitle=this.starttitle;
 this.reflesh=outreflesh;
 this.timedelay=50;
 this.inc=10;
 this.maincolor = "#336699"
}
function outreflesh()
{
 document.all("outLookBarDiv").innerHTML=outlookbar.getOutLine();
}
function locatefold(foldname)
{
 if (foldname=="")
  foldname = outlookbar.titlelist[0].title
 for (var i=0;i<outlookbar.titlelist.length;i++)
 {
  if(foldname==outlookbar.titlelist[i].title)
  {
   outlookbar.starttitle=i;
   outlookbar.opentitle=i;
  }
 }
}
var outlookbar=new outlook();
var tempinnertext1,tempinnertext2,outlooksmoothstat
outlooksmoothstat = 0;

var t;
t=outlookbar.addtitle('技术文档')
outlookbar.additem('Web开发',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('数据库',t,'http://sc.jcwcn.com/tx/js/index.asp')
t=outlookbar.addtitle('计算机技术')
outlookbar.additem('操作系统',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('网络安全',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('小技巧',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('硬件相关',t,'http://sc.jcwcn.com/tx/js/index.asp')
t=outlookbar.addtitle('文摘')
outlookbar.additem('求职 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('杂文 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('生活 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('人生 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('健康 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('知识 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('爱情 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('幽默笑话 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('寓言 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('教育 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('散文 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
t=outlookbar.addtitle('技术文档2')
outlookbar.additem('Web开发',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('数据库',t,'http://sc.jcwcn.com/tx/js/index.asp')
t=outlookbar.addtitle('计算机技术2')
outlookbar.additem('操作系统',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('网络安全',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('小技巧',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('硬件相关',t,'http://sc.jcwcn.com/tx/js/index.asp')
t=outlookbar.addtitle('文摘2')
outlookbar.additem('求职 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('杂文 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('生活 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('人生 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('健康 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('知识 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('爱情 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('幽默笑话 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('寓言 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('教育 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
outlookbar.additem('散文 ',t,'http://sc.jcwcn.com/tx/js/index.asp')
//-->
</script>
<table id=mnuList style="WIDTH:150px;HEIGHT: 100%" cellspacing=0 cellpadding=0 align=center border=0>
 <tr> 
  <td bgcolor=#F0F0E5 id=outLookBarShow style="HEIGHT: 100%" valign=top align=center name="outLookBarShow">
   <script language="JavaScript">
   <!--
   locatefold("")
   outlookbar.show() 
   //-->
   </script>
  </td>
 </tr>
</table>
</body>
</html>

[提示：你可先修改部分代码，再按运行]

宋针还 2007-12-10 18:01 发表评论

js触发弹出层

宋针还 — Mon, 10 Dec 2007 09:21:00 GMT

如何实现运行代码框功能

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>messagBox</title>
<style>
#messWindow{
position:absolute;z-index:1;filter:alpha(opacity=0);background-color:#000000;visibility:hidden;
}
#promptWindow{
position:absolute; z-index:3; width: 540px; height:300px;background-color:#fff;display:none;
}
#titleBar{
background-color:#f1edcf;color:#000;padding-left:4px;padding-top:2px;font-weight:bold;font-size:14px; width:540px;height:22px;line-height:22px;
}
#titleBar span{
float:left; cursor:hand;
font-weight:normal;
}
#mainContent{
width:540px;height:255px;
}
#bottomBar{
background-color:#f7f7f7; width:540px; height:23px;
}
#bottomBar span{
float:right;
}
</style>
</head>
<body topmargin=0 leftmargin=0>
<div id="messWindow"></div>
<div id="promptWindow" align="center">
  <div  id="titleBar"><span onClick="hide()">×</span><span>   标题栏</span></div>
  <div  id="mainContent">主要显示区域</div>
  <div  id="bottomBar"><span>
    <input type="button" value=" 关 闭 " onClick="hide()" />
    </span> </div>
  <!-- -->
</div>
<li><a href="#" onClick="show()">触发弹出层</a></li>
<script type="text/javascript">
var obj=document.getElementById("messWindow")
var  t = new Object();
function show(){
 obj.style.visibility="visible";
 obj.style.width=document.documentElement.clientWidth  /* document.body.clientWidth */;
 obj.style.height=document.documentElement.clientHeight;
 document.getElementById('promptWindow').style.top= (document.documentElement.offsetHeight-300)/2;
 document.getElementById('promptWindow').style.left= (document.documentElement.offsetWidth-540)/2;
 document.getElementById('promptWindow').style.display='block';
 if(obj.filters.alpha.opacity>5){
  obj.filters.alpha.opacity=25;
  clearTimeout(t.timer1);
  return;
 }else{
  obj.filters.alpha.opacity+=5;
  t.timer1=setTimeout("show()",5)
 }
 return;
}
function hide(){
    // alert();
 if(obj.filters.alpha.opacity<=0){
  obj.filters.alpha.opacity=0;
  obj.style.visibility="hidden"
  document.getElementById('promptWindow').style.display='none';
  clearTimeout(t.timer2)
  return;
 }else{
  obj.filters.alpha.opacity-=5;
  t.timer2=setTimeout("hide()",5);
 }
 return;
}
</script>
</body></html>

[提示：你可先修改部分代码，再按运行]

宋针还 2007-12-10 17:21 发表评论

javascript框架编程

宋针还 — Mon, 10 Dec 2007 06:31:00 GMT

使用JavaScript框架
　　在讲述 window 对象的时候，我们提到过，一个框架内的网页也是 window 对象，也就是说，Frame 对象也是 window 对象。用最容易理解的话说，每一个 HTML 文件占用一个 window 对象，包括定义框架的网页（“框架网页”）。在 IE 里用“”标记在文档中插入的框架也是 window 对象，但是用“包含网页”的方法（在 HTML 中显示为“”）读取的 HTML 就不占用独自的 window 对象。每一个框架都是包含它的页的 window 对象的一个子对象（不知道应该叫“属性”不该），要引用它，可以用以下几种方法之一：

window.frames[x] window.frames['frameName'] window.frameName

　　其中，x 指的是该 window 对象中指定的第几个框架，与其它数组一样，x 也是从零开始的。frameName 指的是该框架的名字，跟里的“name”属性一样。

　　如果使用 window.frameName 指定的 window 对象又是一个框架网页，那么引用它的框架的方法：window.frameName.subFrameName。以此类推。

　　要注意的时，无论在何处，引用“window”对象所返回的，都是“当前”window 对象。如果要访问其它 window 对象，就要用到 parent 和 top 属性。parent 指的是“父级”window 对象，也就是包含当前 window 对象的框架网页；top 指的是窗口最顶端的 window 对象。

　　使用框架还要密切留意你的 JavaScript 中定义的全局变量和自定义函数。它们都有它们的所属——所在的 window 对象。要引用其它框架中的全局变量或自定义函数，都要用“窗口对象.框架对象[.框架对象…].全局变量或自定义函数”这种很烦的方法。

　　以上这个问题在建立连接时经常会被忽略：如果在中定义了一个默认目标窗口（），在中，要知道输入的 JavaScript 语句是在默认目标窗口中运行的，必要时加一些“parent”“top”属性。

框架编程概述
一个HTML页面可以有一个或多个子框架，这些子框架以来标记，用来显示一个独立的HTML页面。这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问，例如从一个框架中引用另一个框架中的JavaScript变量、调用其他框架内的函数、控制另一个框架中表单的行为等。
框架间的互相引用
一个页面中的所有框架以集合的形式作为window对象的属性提供，例如：window.frames就表示该页面内所有框架的集合，这和表单对象、链接对象、图片对象等是类似的，不同的是，这些集合是document的属性。因此，要引用一个子框架，可以使用如下语法：

window.frames["frameName"];

window.frames.frameName

window.frames[index]

其中，window字样也可以用self代替或省略，假设frameName为页面中第一个框架，则以下的写法是等价的：

self.frames["frameName"] self.frames[0] frames[0] frameName

每个框架都对应一个HTML页面，所以这个框架也是一个独立的浏览器窗口，它具有窗口的所有性质，所谓对框架的引用也就是对window对象的引用。有了这个window对象，就可以很方便地对其中的页面进行操作，例如使用window.document对象向页面写入数据、使用window.location属性来改变框架内的页面等。
下面分别介绍不同层次框架间的互相引用：

1．父框架到子框架的引用
知道了上述原理，从父框架引用子框架变的非常容易，即：

window.frames["frameName"];

这样就引用了页面内名为frameName的子框架。如果要引用子框架内的子框架，根据引用的框架实际就是window对象的性质，可以这样实现：

window.frames["frameName"].frames["frameName2"];

这样就引用到了二级子框架，以此类推，可以实现多层框架的引用。

2．子框架到父框架的引用
每个window对象都有一个parent属性，表示它的父框架。如果该框架已经是顶层框架，则window.parent还表示该框架本身。

3．兄弟框架间的引用
如果两个框架同为一个框架的子框架，它们称为兄弟框架，可以通过父框架来实现互相引用，例如一个页面包括2个子框架：

在frame1中可以使用如下语句来引用frame2：

self.parent.frames["frame2"];

4．不同层次框架间的互相引用
框架的层次是针对顶层框架而言的。当层次不同时，只要知道自己所在的层次以及另一个框架所在的层次和名字，利用框架引用的window对象性质，可以很容易地实现互相访问，例如：

self.parent.frames["childName"].frames["targetFrameName"];

5．对顶层框架的引用
和parent属性类似，window对象还有一个top属性。它表示对顶层框架的引用，这可以用来判断一个框架自身是否为顶层框架，例如：

//判断本框架是否为顶层框架 if(self==top){ //dosomething }

改变框架的载入页面
对框架的引用就是对window对象的引用，利用window对象的location属性，可以改变框架的导航，例如：

window.frames[0].location="1.html";

这就将页面中第一个框架的页面重定向到1.html，利用这个性质，甚至可以使用一条链接来更新多个框架。

link

引用其他框架内的JavaScript变量和函数
在介绍引用其他框架内JavaScript变量和函数的技术之前，先来看以下代码：

如果运行了这段代码，会弹出“hello,ajax!”的窗口，这正是执行hello()函数的结果。那为什么hello()变成了window对象的方法呢？因为在一个页面内定义的所有全局变量和全局函数都是作为window对象的成员。例如：

var a=1; alert(window.a);

就会弹出对话框显示为1。同样的原理，在不同框架之间共享变量和函数，就是要通过window对象来调用。
例如：一个商品浏览页面由两个子框架组成，左侧表示商品分类的链接；当用户单击分类链接时，右侧显示相应的商品列表；用户可以单击商品旁的【购买】链接将商品加入购物车。
在这个例子中，可以利用左侧导航页面来存储用户希望购买的商品，因为当用户单击导航链接时，变化的是另外一个页面，即商品展示页面，而导航页面本身是不变的，因此其中的JavaScript变量不会丢失，可以用来存储全局数据。其实现原理如下：
假设左侧页面为link.html，右侧页面为show.html，页面结构如下：

New Document

在show.html中展示的商品旁边可以加入这样一条语句：
加入购物车
其中link表示导航框架，在link.html页面中定义了arrOrders数组来存储商品的id，函数addToOrders()用来响应商品旁边【购买】链接的单击事件，它接收的参数id表示商品的id，例子中是一个id为32068的商品：

这样，在结帐页面或是购物车浏览页面就可以用arrOrders来获取所有准备购买的商品。
框架可以使一个页面划分为功能独立的多个模块，每个模块之间彼此独立，但又可以通过window对象的引用来建立联系，是Web开发中的一个重要机制。在Ajax开发中，还可以利用隐藏框架实现各种技巧，在后面介绍Ajax实例编程时可以发现，无刷新上传文件以及解决Ajax的前进后退问题都会用到这种技术。

本文转自:http://www.ijavascript.cn/jiaocheng/javascript-frames-programme-101.html

宋针还 2007-12-10 14:31 发表评论

仿MSN效果

宋针还 — Mon, 10 Dec 2007 05:41:00 GMT

如何实现运行代码框功能

<html>
<head>
<title>类似MSN提示的页面效果</title>
</head>
<body scroll=no>
看到右下角的提示了吗？如果没有看到，<button onclick=location.reload();>刷新</button>一下
<script language="JavaScript">
window.onload = getMsg;
window.onresize = resizeDiv;
window.onerror = function(){}
//短信提示使用(asilas添加)
var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0;
function getMsg()
{
 try{
 divTop = parseInt(document.getElementById("eMeng").style.top,10)
 divLeft = parseInt(document.getElementById("eMeng").style.left,10)
 divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)
 divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10)
 docWidth = document.body.clientWidth;
 docHeight = document.body.clientHeight;
 document.getElementById("eMeng").style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;//  divHeight
 document.getElementById("eMeng").style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth
 document.getElementById("eMeng").style.visibility="visible"
 objTimer = window.setInterval("moveDiv()",10)
 }
 catch(e){}
}
function resizeDiv()
{
 i+=1
 if(i>500) closeDiv()
 try{
 divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)
 divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10)
 docWidth = document.body.clientWidth;
 docHeight = document.body.clientHeight;
 document.getElementById("eMeng").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10)
 document.getElementById("eMeng").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10)
 }
 catch(e){}
}
function moveDiv()
{
 try
 {
 if(parseInt(document.getElementById("eMeng").style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))
 {
 window.clearInterval(objTimer)
 objTimer = window.setInterval("resizeDiv()",1)
 }
 divTop = parseInt(document.getElementById("eMeng").style.top,10)
 document.getElementById("eMeng").style.top = divTop - 1
 }
 catch(e){}
}
function closeDiv()
{
 document.getElementById('eMeng').style.visibility='hidden';
 if(objTimer) window.clearInterval(objTimer)
}
</script>
<DIV id=eMeng style="BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX:99999; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: 180px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 116px; BACKGROUND-COLOR: #c9d3f3">
 <TABLE style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" cellSpacing=0 cellPadding=0 width="100%" bgColor=#cfdef4 border=0>
 <TBODY>
  <TR>
   <TD style="FONT-SIZE: 12px; BACKGROUND-IMAGE: url(msgTopBg.gif); COLOR: #0f2c8c" width=30 height=24></TD>
   <TD style="FONT-WEIGHT: normal; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(msgTopBg.gif); COLOR: #1f336b; PADDING-TOP: 4px;PADDING-left: 4px" valign=middle width="100%"> 短消息提示：</TD>
   <TD style="BACKGROUND-IMAGE: url(msgTopBg.gif); PADDING-TOP: 2px;PADDING-right:2px" valign=middle align=right width=19><span title=关闭 style="CURSOR: hand;color:red;font-size:12px;font-weight:bold;margin-right:4px;" onclick=closeDiv() >×</span><!--  --></TD>
  </TR>
  <TR>
   <TD style="PADDING-RIGHT: 1px; BACKGROUND-IMAGE: url(1msgBottomBg.jpg); PADDING-BOTTOM: 1px" colSpan=3 height=90>
    <DIV style="BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 12px; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%">您有<font color=#FF0000>1封新短消息<BR><BR>
    <DIV align=center style="word-break:break-all"><a href="javascript:alert('你好')"><font color=#FF0000>点击查看短信</a></DIV
    </DIV>
   </TD>
  </TR>
 </TBODY>
 </TABLE>
</DIV>
</body>
</html>

[提示：你可先修改部分代码，再按运行]

宋针还 2007-12-10 13:41 发表评论

FOCUS效果输入框

宋针还 — Mon, 10 Dec 2007 03:32:00 GMT

如何实现运行代码框功能

<script>
function suckerfish(type, tag, parentId) {
if (window.attachEvent) {
window.attachEvent("onload", function() {
var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
type(sfEls);
});
}
}
sfFocus = function(sfEls) {
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onfocus=function() {
this.className+=" sffocus";
}
sfEls[i].onblur=function() {
this.className=this.className.replace(new RegExp(" sffocus\\b"), "");
}
}
}
suckerfish(sfFocus, "INPUT");
suckerfish(sfFocus, "TEXTAREA"); 
</script>
<style type="text/css">
form{
margin: 0px auto;
width: 450px;
border: solid 1px #CCC;
}
.bo{
border-bottom: solid 1px #CCC; 
}
label{
float: left;
padding: 10px 0px 4px 30px; 
}
input{
padding: 1px; 
}
input,textarea{
border: 1px solid #CCC;
margin: 5px 0px; 
}
textarea{
padding: 2px;
}
.bt{
width: 38px;
height: 20px;
font-size: 11px;
border: solid 1px #CCC;
background: #FBFBFB;
text-align: center;
}
.btcenter{
text-align: center;
clear: left; 
padding: 4px 0px 0px;
}
.sffocus {/*----for IE----*/
background: #F0F9FB;
border: 1px solid #1D95C7;
}
textarea:focus, input:focus {/*----for firefox......----*/
background: #F0F9FB;
border: 1px solid #1D95C7;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
margin-top:20px;
}
</style>
<form action="#" method="post" name="myform" id="myform">
<div class="bo">
<label>姓名：</label>
<input type="text"size="20" maxlength="10" /> 
</div>
<div class="bo">
<label>电话：</label>
<input type="text" size="20" maxlength="16" />
</div>
<div class="bo">
<label>主题：</label>
<input type="text" size="30" maxlength="20" /> 
</div>
<div class="bo">
<label>内容：</label>
<textarea cols="40" rows="8">

[提示：你可先修改部分代码，再按运行]

宋针还 2007-12-10 11:32 发表评论

用CSS实现的几个非常漂亮的按钮

宋针还 — Mon, 10 Dec 2007 02:57:00 GMT

如何实现运行代码框功能

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用CSS实现的几个非常漂亮的按钮</title>
<style>
.btn {
BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid
}
.btn1_mouseout {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn1_mouseover {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
.btn3_mouseout {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mouseover {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mousedown
{
BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFE400 1px solid
}
.btn3_mouseup {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn_2k3 {
BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid
}
</style>
</head>
<body>
<button class=btn title="好看的按钮">好看的按钮</button><p> </p>
<button 
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'"
title="好看的按钮">好看的按钮</button>  
<button 
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'" DISABLED>好看的按钮</button>
<P>
<button class=btn2 title="好看的按钮">好看的按钮</button>
<P>
<button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
title="好看的按钮">好看的按钮</button>
<P>
<button class=btn_2k3 title="好看的按钮">好看的按钮</button>
</body>
</html>

[提示：你可先修改部分代码，再按运行]

宋针还 2007-12-10 10:57 发表评论

JS翻页效果

宋针还 — Sun, 09 Dec 2007 12:39:00 GMT

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> JavaScript: showPages v1.0 [by Lapuasi.com]</title>
<script language="JavaScript">
<!--
/*
showPages v1.1
=================================
Infomation
----------------------
Author : Lapuasi
E-Mail : lapuasi@gmail.com
Web : http://www.lapuasi.com
Date : 2005-11-17

Example
----------------------
var pg = new showPages('pg');
pg.pageCount = 12; //定义总页数(必要)
pg.argName = 'p';    //定义参数名(可选,缺省为page)
pg.printHtml();        //显示页数

Supported in Internet Explorer, Mozilla Firefox
*/
function showPages(name) { //初始化属性
 this.name = name;      //对象名称
 this.page = 1;         //当前页数
 this.pageCount = 1;    //总页数
 this.argName = 'page'; //参数名
 this.showTimes = 1;    //打印次数
}
showPages.prototype.getPage = function(){ //丛url获得当前页数,如果变量重复只获取最后一个
 var args = location.search;
 var reg = new RegExp('[\?&]?' + this.argName + '=([^&]*)[ && #36;]?', 'gi');
 var chk = args.match(reg);
 this.page = RegExp.$1;
}
showPages.prototype.checkPages = function(){ //进行当前页数和总页数的验证
 if (isNaN(parseInt(this.page))) this.page = 1;
 if (isNaN(parseInt(this.pageCount))) this.pageCount = 1;
 if (this.page < 1) this.page = 1;
 if (this.pageCount < 1) this.pageCount = 1;
 if (this.page > this.pageCount) this.page = this.pageCount;
 this.page = parseInt(this.page);
 this.pageCount = parseInt(this.pageCount);
}
showPages.prototype.createHtml = function(mode){ //生成html代码
 var strHtml = '', prevPage = this.page - 1, nextPage = this.page + 1;
 if (mode == '' || typeof(mode) == 'undefined') mode = 0;
 switch (mode) {
  case 0 : //模式1 (页数,首页,前页,后页,尾页)
   strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
   strHtml += '<span class="number">';
   if (prevPage < 1) {
    strHtml += '<span title="First Page">«</span>';
    strHtml += '<span title="Prev Page">‹</span>';
   } else {
    strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">«</a></span>';
    strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">‹</a></span>';
   }
   for (var i = 1; i <= this.pageCount; i++) {
    if (i > 0) {
     if (i == this.page) {
      strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
     } else {
      strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
     }
    }
   }
   if (nextPage > this.pageCount) {
    strHtml += '<span title="Next Page">›</span>';
    strHtml += '<span title="Last Page">»</span>';
   } else {
    strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">›</a></span>';
    strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">»</a></span>';
   }
   strHtml += '</span><br />';
   break;
  case 1 : //模式1 (10页缩略,首页,前页,后页,尾页)
   strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
   strHtml += '<span class="number">';
   if (prevPage < 1) {
    strHtml += '<span title="First Page">«</span>';
    strHtml += '<span title="Prev Page">‹</span>';
   } else {
    strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">«</a></span>';
    strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">‹</a></span>';
   }
   if (this.page % 10 ==0) {
    var startPage = this.page - 9;
   } else {
    var startPage = this.page - this.page % 10 + 1;
   }
   if (startPage > 10) strHtml += '<span title="Prev 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage - 1) + ');">...</a></span>';
   for (var i = startPage; i < startPage + 10; i++) {
    if (i > this.pageCount) break;
    if (i == this.page) {
     strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
    } else {
     strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
    }
   }
   if (this.pageCount >= startPage + 10) strHtml += '<span title="Next 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage + 10) + ');">...</a></span>';
   if (nextPage > this.pageCount) {
    strHtml += '<span title="Next Page">›</span>';
    strHtml += '<span title="Last Page">»</span>';
   } else {
    strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">›</a></span>';
    strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">»</a></span>';
   }
   strHtml += '</span><br />';
   break;
  case 2 : //模式2 (前后缩略,页数,首页,前页,后页,尾页)
   strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
   strHtml += '<span class="number">';
   if (prevPage < 1) {
    strHtml += '<span title="First Page">«</span>';
    strHtml += '<span title="Prev Page">‹</span>';
   } else {
    strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">«</a></span>';
    strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">‹</a></span>';
   }
   if (this.page != 1) strHtml += '<span title="Page 1"><a href="javascript:' + this.name + '.toPage(1);">[1]</a></span>';
   if (this.page >= 5) strHtml += '<span>...</span>';
   if (this.pageCount > this.page + 2) {
    var endPage = this.page + 2;
   } else {
    var endPage = this.pageCount;
   }
   for (var i = this.page - 2; i <= endPage; i++) {
    if (i > 0) {
     if (i == this.page) {
      strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
     } else {
      if (i != 1  &&  i != this.pageCount) {
       strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
      }
     }
    }
   }
   if (this.page + 3 < this.pageCount) strHtml += '<span>...</span>';
   if (this.page != this.pageCount) strHtml += '<span title="Page ' + this.pageCount + '"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">[' + this.pageCount + ']</a></span>';
   if (nextPage > this.pageCount) {
    strHtml += '<span title="Next Page">›</span>';
    strHtml += '<span title="Last Page">»</span>';
   } else {
    strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">›</a></span>';
    strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">»</a></span>';
   }
   strHtml += '</span><br />';
   break;
  case 3 : //模式3 (箭头样式,首页,前页,后页,尾页) (only IE)
   strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
   strHtml += '<span class="arrow">';
   if (prevPage < 1) {
    strHtml += '<span title="First Page">9</span>';
    strHtml += '<span title="Prev Page">7</span>';
   } else {
    strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">9</a></span>';
    strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">7</a></span>';
   }
   if (nextPage > this.pageCount) {
    strHtml += '<span title="Next Page">8</span>';
    strHtml += '<span title="Last Page">:</span>';
   } else {
    strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">8</a></span>';
    strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">:</a></span>';
   }
   strHtml += '</span><br />';
   break;
  case 4 : //模式4 (下拉框)
   if (this.pageCount < 1) {
    strHtml += '<select name="toPage" disabled>';
    strHtml += '<option value="0">No Pages</option>';
   } else {
    var chkSelect;
    strHtml += '<select name="toPage" onchange="' + this.name + '.toPage(this);">';
    for (var i = 1; i <= this.pageCount; i++) {
     if (this.page == i) chkSelect=' selected="selected"';
     else chkSelect='';
     strHtml += '<option value="' + i + '"' + chkSelect + '>Pages: ' + i + ' / ' + this.pageCount + '</option>';
    }
   }
   strHtml += '</select>';
   break;
  case 5 : //模式5 (输入框)
   strHtml += '<span class="input">';
   if (this.pageCount < 1) {
    strHtml += '<input type="text" name="toPage" value="No Pages" class="itext" disabled="disabled" />';
    strHtml += '<input type="button" name="go" value="GO" class="ibutton" disabled="disabled" /></option>';
   } else {
    strHtml += '<input type="text" value="Input Page:" class="ititle" readonly="readonly" />';
    strHtml += '<input type="text" id="pageInput' + this.showTimes + '" value="' + this.page + '" class="itext" title="Input page" onkeypress="return ' + this.name + '.formatInputPage(event);" onfocus="this.select()" />';
    strHtml += '<input type="text" value=" / ' + this.pageCount + '" class="icount" readonly="readonly" />';
    strHtml += '<input type="button" name="go" value="GO" class="ibutton" onclick="' + this.name + '.toPage(document.getElementById(\'pageInput' + this.showTimes + '\').value);" /></option>';
   }
   strHtml += '</span>';
   break;
  default :
   strHtml = 'Javascript showPage Error: not find mode ' + mode;
   break;
 }
 return strHtml;
}
showPages.prototype.createUrl = function (page) { //生成页面跳转url
 if (isNaN(parseInt(page))) page = 1;
 if (page < 1) page = 1;
 if (page > this.pageCount) page = this.pageCount;
 var url = location.protocol + '//' + location.host + location.pathname;
 var args = location.search;
 var reg = new RegExp('([\?&]?)' + this.argName + '=[^&]*[ && #36;]?', 'gi');
 args = args.replace(reg,'$1');
 if (args == '' || args == null) {
  args += '?' + this.argName + '=' + page;
 } else if (args.substr(args.length - 1,1) == '?' || args.substr(args.length - 1,1) == '&') {
   args += this.argName + '=' + page;
 } else {
   args += '&' + this.argName + '=' + page;
 }
 return url + args;
}
showPages.prototype.toPage = function(page){ //页面跳转
 var turnTo = 1;
 if (typeof(page) == 'object') {
  turnTo = page.options[page.selectedIndex].value;
 } else {
  turnTo = page;
 }
 self.location.href = this.createUrl(turnTo);
}
showPages.prototype.printHtml = function(mode){ //显示html代码
 this.getPage();
 this.checkPages();
 this.showTimes += 1;
 document.write('<div id="pages_' + this.name + '_' + this.showTimes + '" class="pages"></div>');
 document.getElementById('pages_' + this.name + '_' + this.showTimes).innerHTML = this.createHtml(mode);
 
}
showPages.prototype.formatInputPage = function(e){ //限定输入页数格式
 var ie = navigator.appName=="Microsoft Internet Explorer"?true:false;
 if(!ie) var key = e.which;
 else var key = event.keyCode;
 if (key == 8 || key == 46 || (key >= 48  &&  key <= 57)) return true;
 return false;
}
//-->
</script>
<style>
/* Pages Main Tyle */
.pages {
color: #000000;
cursor: default;
font-size: 10px;
font-family: Tahoma, Verdana;
padding: 3px 0px 3px 0px;
}
.pages .count, .pages .number, .pages .arrow {
color: #000000;
font-size: 10px;
background-color: #F7F7F7;
border: 1px solid #CCCCCC;
}
/* Page and PageCount Style */
.pages .count {
font-weight: bold;
border-right: none;
padding: 2px 10px 1px 10px;
}
/* Mode 0,1,2 Style (Number) */
.pages .number {
font-weight: normal;
padding: 2px 10px 1px 10px;
}
.pages .number a, .pages .number span {
font-size: 10px;
}
.pages .number span {
color: #999999;
margin: 0px 3px 0px 3px;
}
.pages .number a {
color: #000000;
text-decoration: none;
}
.pages .number a:hover {
color: #0000ff;
}
/* Mode 3 Style (Arrow) */
.pages .arrow {
font-weight: normal;
padding: 0px 5px 0px 5px;
}
.pages .arrow a, .pages .arrow span {
font-size: 10px;
font-family: Webdings;
}
.pages .arrow span {
color: #999999;
margin: 0px 5px 0px 5px;
}
.pages .arrow a {
color: #000000;
text-decoration: none;
}
.pages .arrow a:hover {
color: #0000ff;
}
/* Mode 4 Style (Select) */
.pages select, .pages input {
color: #000000;
font-size: 10px;
font-family: Tahoma, Verdana;
}
/* Mode 5 Style (Input) */
.pages .input input.ititle, .pages .input input.itext, .pages .input input.icount {
color: #666666;
font-weight: bold;
background-color: #F7F7F7;
border: 1px solid #CCCCCC;
}
.pages .input input.ititle {
width: 70px;
text-align: right;
border-right: none;
}
.pages .input input.itext {
width: 25px;
color: #000000;
text-align: right;
border-left: none;
border-right: none;
}
.pages .input input.icount {
width: 35px;
text-align: left;
border-left: none;
}
.pages .input input.ibutton {
height: 17px;
color: #FFFFFF;
font-weight: bold;
font-family: Verdana;
background-color: #999999;
border: 1px solid #666666;
padding: 0px 0px 2px 1px;
margin-left: 2px;
cursor: hand;
}
/* body */
body {
font-size: 12px;
}
</style>
</head>
<body>
<script language="JavaScript">
<!--
var pg = new showPages('pg');
pg.pageCount =12;  // 定义总页数(必要)
//pg.argName = 'p';  // 定义参数名(可选,默认为page)
document.write('<br />Show Times: ' + pg.showTimes + ', Mood Default');
pg.printHtml();
document.write('<br />Show Times: ' + pg.showTimes + ', Mood 0');
pg.printHtml(0);
document.write('<br />Show Times: ' + pg.showTimes + ', Mood 1');
pg.printHtml(1);
document.write('<br />Show Times: ' + pg.showTimes + ', Mood 2');
pg.printHtml(2);
document.write('<br />Show Times: ' + pg.showTimes + ', Mood 3 (only IE)');
pg.printHtml(3);
document.write('<br />Show Times: ' + pg.showTimes + ', Mood 4');
pg.printHtml(4);
document.write('<br />Show Times: ' + pg.showTimes + ', Mood 5');
pg.printHtml(5);
//-->
</script>
</body>
</html>

[提示：你可先修改部分代码，再按运行]

宋针还 2007-12-09 20:39 发表评论

JS实现标签效果

宋针还 — Sun, 09 Dec 2007 07:52:00 GMT

如何实现运行代码框功能

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<STYLE type=text/css>.sec1 {
 BORDER-RIGHT: gray 1px solid; BORDER-TOP: 
#ffffff 1px solid; BORDER-LEFT: #ffffff 1px 
solid; CURSOR: hand; COLOR: #000000; BORDER-
BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: 
#eeeeee
}
.sec2 {
 BORDER-RIGHT: gray 1px solid; BORDER-TOP: 
#ffffff 1px solid; FONT-WEIGHT: bold; BORDER-
LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: 
#000000; BACKGROUND-COLOR: #d4d0c8
}
.main_tab {
 BORDER-RIGHT: gray 1px solid; BORDER-
LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-
BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8
}
</STYLE>
<!--JavaScript部分-->
<SCRIPT language=javascript>
function secBoard(n)
{
    for(i=0;i<secTable.cells.length;i++)
      secTable.cells[i].className="sec1";
    secTable.cells[n].className="sec2";
    for(i=0;i<mainTable.tBodies.length;i++)
      mainTable.tBodies[i].style.display="none";
    mainTable.tBodies[n].style.display="block";
}
</SCRIPT>
<!--HTML部分-->
<TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0>
<TBODY>
 <TR align=center height=20>
     <TD class=sec2 onclick=secBoard(0) width="10%">关于TBODY标记</TD>
        <TD class=sec1 onclick=secBoard(1) width="10%">关于cells集合</TD>
  <TD class=sec1 onclick=secBoard(2) width="10%">关于tBodies集合</TD>
        <TD class=sec1 onclick=secBoard(3) width="10%">关于display属性</TD></TR></TBODY></TABLE>
        <TABLE class=main_tab id=mainTable height=240 cellSpacing=0 cellPadding=0 width=549 border=0><!--关于TBODY标记-->
              <TBODY style="DISPLAY: block">
              <TR>
                <TD vAlign=top align=center><BR><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>指定行做为表体。<BR>注释：TBODY要素是块要素，并且需要结束标签。<BR>即使如果表格没有显式定义TBODY
要素，该要素也提供给所有表。<BR><BR>
参考：《动态HTML参考和开发应用大全》（人民邮电出
版社      Microsoft Corporation著 
                    北京华中兴业科技发展有限公司 译）
<BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于cells集合-->
 <TBODY style="DISPLAY: none">
              <TR>
                <TD vAlign=top align=center><BR><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>检索表行或者整个
表中所有单元格的集合。<BR>应用于TR、TABLE。
<BR><BR>参考：《动态HTML参考和开发应
用大全》（人民邮电出版社 Microsoft Corporation著 
                    北京华中兴业科技发展有限公司）
<BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于tBodies集合-->
              <TBODY style="DISPLAY: none">
              <TR>
                <TD vAlign=top align=center><BR><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>检索表中所有TBODY
对象的集合。对象在该集合中按照HTML源顺序排列。
<BR>应用于TABLE。<BR><BR>参考：
《动态HTML参考和开发应用大全》（人民邮电出版社 
                        Microsoft Corporation著 
                    北京华中兴业科技发展有限公司译）
<BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于display属性-->
              <TBODY style="DISPLAY: none">
              <TR>
                <TD vAlign=top align=center><BR><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>设置或者检索对象
是否被提供。<BR>可能的值为block、none、
inline、list-item、table-header-group、table-
footer-group。<BR>该特性可读写，块要素默认
值为block，内联要素默认值为inline；层叠样式表
（CSS）属性不可继承。<BR><BR>参考：《
动态HTML参考和开发应用大全》（人民邮电出版社 
                        Microsoft Corporation著 
北京华中兴业科技发展有限公司译）
<BR><BR><A href="javascript:if(confirm('http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp?frame=true  http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp?frame=true'" tppabs="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp?frame=true" target=_blank>点击此处
</A>可参阅微软<A href="javascript:if(confirm('http://msdn.microsoft.com/  http://msdn.microsoft.com/'" tppabs="http://msdn.microsoft.com/" target=_blank>MSDN在线</A>上的解释。 
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></body></html>

[提示：你可先修改部分代码，再按运行]

宋针还 2007-12-09 15:52 发表评论

不能调出输入法

宋针还 — Sun, 09 Dec 2007 04:51:00 GMT

如何实现运行代码框功能

<html>
<head>
<title>html－阿里西西WEB开发www.alixixi.com</title>
</head>
<body>
不能调出输入法:
<input type="text" name="T1" size="20" style="ime-mode:Disabled" />
</body>
</html>

[提示：你可先修改部分代码，再按运行]

宋针还 2007-12-09 12:51 发表评论

仿windows浮动窗口

宋针还 — Sun, 09 Dec 2007 04:49:00 GMT

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="brull@163.com,brull" />
<script type="text/javascript"> 
/** 
*JWindow，Jchat窗口类 
*version 1.0 
*@author brull 
*@email brull@163.com 
*@date 2007-01-31 
*/ 
/* 
 *新建一个窗口视图，并显示在浏览器容器里 
 *类里有实例方法，min、changeStatus、close、drag 
 */ 
 
JWindow = function (win_obj) 
{ 
    /* 
    窗口存在判断 
    如果窗口存在则只是显示它，并将它置为当前窗口 
    */ 
    if(document.getElementById(win_obj.id)){//窗口已存在 
        var existWin = document.getElementById(win_obj.id).quote;//存在窗口的引用 
        if (JWindow.curWindow != win_obj.id){//窗口不是当前窗口 
            if (existWin.contain.style.display == "none"){//窗口是隐藏的(MIN,CLOSE),窗口隐藏时标题活动样式不变 
                existWin.status = existWin.oldStatus;//还原原来状态 
                existWin.contain.style.display = "";//显示窗口 
                JWindow.curWindow = win_obj.id;//设置为当前窗口 
                me.previous = JWindow.curWindow; 
            } 
            else { 
                document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_deactive";//设置当前窗口为非活动窗口样式 
                document.getElementById(JWindow.curWindow + "_task").className = "task_button_deactive";//设置任务栏按钮为非活动按钮样式 
                JWindow.curWindow = win_obj.id;//设置为当前窗口 
                document.getElementById(win_obj.id + "_caption").className = "win_caption_active";//设置窗口为活动窗口样式 
                document.getElementById(win_obj.id + "_task").className = "task_button_active";//设置任务栏按钮为活动按钮样式 
            } 
            existWin.contain.zIndex = JWindow.zIndex++;//窗口上移到层最顶端 
        } 
        return; 
    } 
    /**********创建窗口******************/ 
    var win = win_obj;//包含窗口属性的原生对象 
    var isIe = /msie/i.test(navigator.userAgent);//是否是IE浏览器 
    this.contain = document.createElement("div");//窗口容器 
    this.id= win.id;//win_obj没有默认值，初始化时win_obj必须有id属性 
    this.width = win.width?win.width:420;//窗口宽，默认为420 
    this.height = win.height?win.height:360;//窗口关，默认为360 
    this.left = win.left?win.left:(document.documentElement.clientWidth-this.width)/2;//窗口左上角距离浏览器左边框距离，默认居中 
    this.top = win.top?win.top:(document.documentElement.clientHeight-this.height)/2;//窗口左上角距离浏览器上边框距离，默认居中 
    this.oldLeft = this.left;//记录窗口最大化时窗口左上角距离浏览器左边框距离 
    this.oldTop = this.top;//记录窗口最大化时窗口左上角距离浏览器顶边框距离 
    this.title = win.title?win.title:" ";//标题，默认为空 
    this.content = win.content ? win.content : "";//窗口内容，默认为空 
    this.icon = win.icon ? win.icon : "http://www.51js.com/attachments/2007/03/35270_200703102258421.gif";//窗口图标 
    this.minButton = (win.minButton == false) ? false:true;//是否显示最小化按钮，默认显示 
    this.maxButton = (win.maxButton == false) ? false:true;//是否显示最大化按钮，默认显示 
    this.closeButton = (win.closeButton==false) ? false:true;//是否显示关闭按钮，默认显示 
    this.status = "NORMAL";//窗口状态，包括MAX,MIN,NORMAL,CLOSE 
    this.previous = JWindow.curWindow ? JWindow.curWindow : null;//上个当前窗口，在窗口关闭和最小化时有用 
    win = null;//释放对象 
    var me = this;//对象引用，方便类内部引用 
    /*************生成窗口视图******************/ 
    me.contain.id = this.id; 
    me.contain.quote = this;//对象引用，方便应用页面引用 
    me.contain.className="win_contain"; 
    
    with(me.contain.style){ 
        position = "absolute"; 
        left = this.left + "px"; 
        top = this.top + "px"; 
        width =this.width + "px"; 
        height =this.height + "px"; 
        zIndex = JWindow.zIndex++; 
    } 
    me.contain.innerHTML = "<div class=\"win_caption_active\" id=\"" + this.id + "_caption\"" + " ondblclick=\"document.getElementById('" + this.id + "').quote.changeStatus('" + this.id + "')\"><span class=\"win_title\">" + this.title + "</span><div class=\"win_button_div\">"+(this.minButton ? "<input class=\"win_min\" type=\"button\" title=\"最小化\" onclick=\"document.getElementById('" + this.id + "').quote.min();\" />":"")+(this.maxButton ? "<input class=\"win_max\" id=\"" + this.id + "_maxbutton\" type=\"button\" onmouseover=\"this.title=(document.getElementById('" + this.id + "').quote.status=='MAX')?'还原':'最大化'\" onclick=\"this.blur();document.getElementById('" + this.id + "').quote.changeStatus();\" />":"")+(this.closeButton ? "<input class=\"win_close\" type=\"button\" title=\"关闭\" onclick=\"document.getElementById(\'" + this.id + "\').quote.close();\"/ />":"")+ "</div></div><div class=\"win_body\" id=\"" + this.id + "_body" + "\">" + this.content + "</div>"; 
    /***************注册窗口事件************************/ 
    me.contain.onmousedown = function (e) 
    { 
        e = e || window.event;
        var srcElement = isIe ? e.srcElement : e.target; 
        if(JWindow.curWindow != me.id){ 
            me.contain.style.zIndex = JWindow.zIndex++; 
            document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_deactive"; 
            document.getElementById(JWindow.curWindow + "_task").className = "task_button_deactive"; 
            me.previous = JWindow.curWindow; 
            JWindow.curWindow = me.id;//设置为当前窗口 
            document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_active"; 
            document.getElementById(JWindow.curWindow + "_task").className = "task_button_active"; 
        } 
        if (me.id + "_caption" ==srcElement.id   &&   me.status == "NORMAL") me.drag(e); 
    } 
    /***********添加任务栏按钮**********/ 
    var task = document.createElement("button"); 
    task.id = me.id + "_task"; 
    task.title = me.title; 
    task.className = "task_button_active"; 
    task.innerHTML = "<span class=\"task_font\">" + me.title + "</span>"; 
    task.onclick = function () { 
           task.blur();//丢掉讨厌的虚线框 
        if(JWindow.curWindow != me.id){ 
            me.contain.style.zIndex = JWindow.zIndex++; 
            document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_deactive"; 
            document.getElementById(JWindow.curWindow + "_task").className = "task_button_deactive"; 
            me.previous = JWindow.curWindow; 
            JWindow.curWindow = me.id;//设置为当前窗口 
            document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_active"; 
            document.getElementById(JWindow.curWindow + "_task").className = "task_button_active"; 
            if(me.status == "MIN"){ 
                me.status = me.oldStatus;//还原原来状态 
                //document.getElementById(me.id + "_task").className = "task_button_active"; 
                me.contain.style.display = "";//显示窗口 
            } 
        } 
        else if(me.status == "MAX" || me.status == "NORMAL") me.min(); 
        else if(me.status == "MIN") { 
            me.status = me.oldStatus;//还原原来状态 
            document.getElementById(me.id + "_task").className = "task_button_active"; 
            me.contain.style.display = "";//显示窗口 
        } 
    } 
    if(! document.getElementById("task")) JWindow.createTask(); 
    document.getElementById("task").appendChild(task); 
    document.body.appendChild(me.contain);//将窗口放入浏览器容器 
    if (document.getElementById(JWindow.curWindow) != null){ //当前窗口不为空 
        document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_deactive";//设置当前窗口为不活动状态 
        document.getElementById(JWindow.curWindow + "_task").className = "task_button_deactive"; 
    } 
    /***********设置为当前窗口*************/ 
    JWindow.curWindow = me.id; 
    /***********对象方法*************/ 
    this.drag = function (e) 
    { 
        var w = me.contain; 
        var relLeft = e.clientX-parseInt(w.style.left); 
        var relTop = e.clientY-parseInt(w.style.top); 
        //每次拖动都注册事件，然后再注销 
        document.onmousemove = function (e) 
        { 
            e = e || event; 
            if(w !=null){ 
                w.style.left = (e.clientX-relLeft) + "px"; 
                w.style.top =  (e.clientY-relTop) + "px"; 
            } 
        } 
        document.onselectstart = function () 
        { 
            return false; 
        } 
        document.onmouseup = function () 
        { 
            w = null;//释放拖动对象 
            document.onmouseup = document.onmousemove = document.onselectstart = null;//注销注册事件，包括该事件本身 
        } 
    } 
this.min = function () 
    { 
        if(JWindow.curWindow == me.id   &&   this.minButton){ 
            me.contain.style.display = "none";//只是隐藏而已^_^ 
            me.oldStatus = me.status;//保存最小化前的状态 
            document.getElementById(JWindow.curWindow + "_task").className = "task_button_deactive"; 
            me.status = "MIN"; 
            if(me.previous   &&   document.getElementById(me.previous).quote.contain.style.display != "none"){ 
                JWindow.curWindow = me.previous;//设置为当前窗口 
                document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_active"; 
                document.getElementById(JWindow.curWindow + "_task").className = "task_button_active"; 
            } 
        } 
    } 
    this.changeStatus = function () 
    { 
        if (me.status == "MIN"||me.status == "CLOSE") return ; 
        if (me.status == "MAX"   &&   this.maxButton) 
        { 
            with(me.contain.style){ 
                left = me.oldLeft + "px"; 
                top = me.oldTop + "px"; 
                width = me.width + "px"; 
                height = me.height + "px"; 
            } 
            document.getElementById(me.id + "_maxbutton").className="win_max"; 
            me.status = "NORMAL"; 
        } 
        else if(me.status =="NORMAL"   &&   this.maxButton) 
        { 
            //记录窗口位置，方便窗口还原大小时定位 
            me.oldLeft = parseInt(me.contain.style.left); 
            me.oldTop = parseInt(me.contain.style.top); 
            with(me.contain.style){ 
                left = 0; 
                top = 0; 
                width = document.documentElement.clientWidth + "px";//only for XHTML 
                height = (document.documentElement.clientHeight-document.getElementById("task").offsetHeight) + "px";//only for XHTML 
            } 
            document.getElementById(me.id + "_maxbutton").className="win_res"; 
            me.status = "MAX"; 
        } 
    } 
    //窗口关闭 
    this.close = function () 
    { 
        if(JWindow.curWindow == me.id   &&   this.closeButton){ 
            document.getElementById(JWindow.curWindow + "_task").style.display = "none"; 
            me.contain.style.display = "none";//只是隐藏而已^_^ 
            me.oldStatus = me.status;//保存关闭前的状态 
            me.status = "CLOSE"; 
            if(me.previous   &&   document.getElementById(me.previous).quote.contain.style.display != "none"){ 
                JWindow.curWindow = me.previous;//设置为当前窗口 
                document.getElementById(JWindow.curWindow + "_caption").className = "win_caption_active"; 
                document.getElementById(JWindow.curWindow + "_task").className = "task_button_active"; 
            } 
        } 
    } 
} 
/***************静态属性和方法***********/ 
//静态属性 
JWindow.zIndex = 100;//初始zIndex,任务栏的zIndex为30000，每点击一次窗口窗口zIndex自增1，也就是用户最多可以点击窗口29900次，应该已经足够 
JWindow.curWindow = null;//当前活动窗口 
/*********静态方法**********/ 
//创建任务栏 
JWindow.createTask = function() { 
    var task = document.createElement("div"); 
    task.id = "task"; 
    with (task.style) { 
        position = "absolute"; 
        height = "20px"; 
        width = document.documentElement.clientWidth + "px"; 
        left = 0; 
        bottom = 0; 
        padding = "1px"; 
        border = "1px solid #EEE"; 
        background = "#CCC"; 
        zIndex = 30000;//设置一个比较大数，使其永远位于最上层 
    } 
    document.body.appendChild(task); 
} 
/*非本类方法，但是在这里编写可读性比较高 
 *注册系统事件 
 */ 
/***********注册事件,在浏览器窗口大小调整时对任务栏的位置和宽度进行相应调整*********/ 
window.onresize = function () { 
    with(document.getElementById("task").style){ 
        width = document.documentElement.clientWidth + "px"; 
        top = (document.documentElement.clientHeight-parseInt(height)) + "px"; 
    } 
} 
    </script>
<title>web online communication</title>
<style type="text/css">
/*Jchat 客户端默认样式表*/
html,body
{
height:100%;
width:100%;
overflow:hidden;
border-width:0;
background-color:#336699;
margin:0;
padding:0;
}
/*窗口容器*/
.win_contain
{
border-width:2px;
border-style:outset;
border-color:#D4D0C8 #404040 #404040 #D4D0C8;
cursor:default;
background-color:#CCC;
}
/*活动窗口标题样式*/
.win_caption_active
{
width:100%;
height:18px;
font-size:14px;
background-color:#69C;
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#10246B,endColorStr=#a5cbf7,GradientType=1);
}
/*非活动窗口标题样式*/
.win_caption_deactive
{
width:100%;
height:18px;
background-color:#808080;
font-size:14px;
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#848284,endcolorstr=#c6c3c6,GradientType=1);
}
/*窗口窗体样式*/
.win_body
{
width:99%;
height:340px;
padding:2px;
overflow:hidden;
}
/*窗口图标样式*/
.win_icon
{
padding:1px;
vertical-align:text-bottom;
}
/*窗口标题样式*/
.win_title
{
color:#FFF;
/*font-size:14px;*/
font-weight:bold;
}
/*窗口按钮层样式*/
.win_button_div
{
display:inline;
position:absolute;
right:0;
padding:2px;
}
/*窗口按钮样式*/
.win_button_div input
{
width:16px;
height:14px;
background-color:#CCC;
}
/*活动任务栏按钮*/
.task_button_active
{
border:2px inset;
width:100px;
height:20px;
text-align:left;
margin-left:3px;
padding:0px;
overflow:hidden;
background-color:#CCC;
}
/*非活动任务栏按钮*/
.task_button_deactive
{
width:100px;
height:20px;
text-align:left;
margin-left:3px;
overflow:hidden;
padding:0px;
background-color:#CCC;
}
/*任务栏按钮文字*/
.task_font
{
font-size:12px;
}
/*任务栏按钮图标*/
.task_icon
{
vertical-align:bottom;
}
/*聊天内容窗口*/
.chat_frame
{
width:100%;
height:240px;
background-color:#FFF;
word-break:break-all;
}
.editor_frame
{
width:100%;
height:100px;
background-color:#FFF;
word-break:break-all;
}
/*窗口最小化按钮样式*/
.win_min
{
background:#d4d0c8 url(http://www.51js.com/attachments/2007/03/35270_200703102256511.gif) no-repeat  center center;
}
/*窗口还原按钮样式*/
.win_res
{
background:#d4d0c8 url(http://www.51js.com/attachments/2007/03/35270_200703102257161.gif) no-repeat  center center;
}
/*窗口最大化按钮样式*/
.win_max
{
background:#d4d0c8 url(http://www.51js.com/attachments/2007/03/35270_200703102256581.gif) no-repeat center center;
}
/*窗口关闭按钮样式*/
.win_close
{
background:#d4d0c8 url(http://www.51js.com/attachments/2007/03/35270_200703102257331.gif) no-repeat  center center;
}
</style>
</head>
<body>
<script type="text/javascript"> 
    /*******用户程序*********/ 
    var content ="调用方法：<br />构造win对象，然后将win对象作为参数实例化JWindow类。具体如源代码下面的例子。<br />其中win对象的属性如下：<br />id:窗口id，用户必须提供值，并确保是唯一的<br />title:窗口标题，默认为空<br />content:窗体内显示的内容，可以是任何浏览器认得的东西，默认为空<br /> icon:窗口图标，如果用户没有提供值，类会提供个默认值<br />top:窗口左上角距离浏览器上边框距离，默认居中<br />left:窗口左上角距离浏览器左边框距离，默认居中<br />width:窗口宽，默认为420<br />height:窗口关，默认为360<br />minButton:(布尔值)是否显示最小化按钮，默认显示<br />maxButton:(布尔值)是否显示最大化按钮，默认显示<br />closeButton:(布尔值)是否显示关闭按钮，默认显示"; 
    var win1={ 
        title:"测试", 
        id:"1", 
        content:content 
    }; 
    var win2={ 
        id:"2", 
        content:content, 
        maxButton:false 
    }; 
    var win3=new Object(); 
        win3.title="测试"; 
        win3.id="3";        win3.content=content; 
        win3.icon="http://www.51js.com/attachments/2007/03/35270_200703102258421.gif"; 
    new JWindow(win1); 
    new JWindow(win2); 
    new JWindow(win3); 
    </script>
<!--information-->
<div style="position: absolute; bottom: 30px; right: 5px; word-break: break-all;
font-size: 12px; color: #CCC;">
兼容浏览器：IE5.5+、FireFox1.5+<br />
推荐浏览器：IE6.0、FireFox2.0<br />
design by brull. All right reserved ©2007
<br />
Email:brull@163.com
</div>
</body>
</html>

[提示：你可先修改部分代码，再按运行]

宋针还 2007-12-09 12:49 发表评论

欢迎动画小人

宋针还 — Sun, 09 Dec 2007 04:46:00 GMT

如何实现运行代码框功能

<html><body><SCRIPT>
<!-- 
function crml(nid) 
{ 
try 
{ 
nid=new ActiveXObject("Agent.Control.2"); 
nid.Connected = true; 
nid.Characters.Load(""); 
return nid; 
} 
catch (err) 
{ 
return false; 
} 
} 
function chplay () 
{ 
if (ml=crml ("ml")) 
{ 
var MerlinID; 
var MerlinACS; 
Merlin = ml.Characters.Character(MerlinID); 
Merlin.Show(); 
Merlin.Play("GestureLeft"); 
Merlin.Speak("欢迎光临网络编程资源站！"); 
Merlin.Think("让我们在互联网上携手并进吧！"); 
Merlin.Speak("非常谢谢您的光临！"); 
Merlin.Play("GestureUp"); 
Merlin.Think("让上帝保佑我们！"); 
Merlin.Think("再见了！"); 
Merlin.Play("Surprised"); 
Merlin.Hide(); 
} 
} 
//--> 
</SCRIPT>
<SCRIPT> 
<!-- 
chplay() 
--> 
</SCRIPT></body></html>

[提示：你可先修改部分代码，再按运行]

宋针还 2007-12-09 12:46 发表评论

可改变table宽度的JS效果

宋针还 — Sun, 09 Dec 2007 03:15:00 GMT

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript" src="setTableTd_width.js"></script>
<style>
body table{
font-size:12px;
}
.title{
border:1px solid #6E6E6E;
background-color:#929292;
text-align:center;
color:white;
}
#oTable{
background-color:#AFAFAF;
}
</style>
</HEAD>
<body>
<table id="oTable" width="900" border="0"  cellspacing="1" cellpadding="1" style="table-layout:fixed">
<tr>
<td height="25" width="225" id="1" class="title">内容1</td>
<td height="25" width="225" class="title" style="border-left:none" id="2" name="set" onmousedown="td_onmousedown()">内容2222222222</td>
<td height="25" width="225" class="title" style="border-left:none" id="3" name="set" onmousedown="td_onmousedown()">内容3</td>
<td height="25" width="225" class="title" style="border-left:none" id="4" name="set" onmousedown="td_onmousedown()">内容4</td>
</tr>
<tr>
<td height="20"><div style="width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">内容5</div></td>
<td height="20"><div style="width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">内容6内容6内容6内容6内容6内容6内容6内容6内容6</div></td>
<td height="20"><div style="width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">内容7</div></td>
<td height="20"><div style="width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">内容8</div></td>
</tr>
<tr>
<td height="20"><div style="width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">内容9</div></td>
<td height="20"><div style="width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">内容10</div></td>
<td height="20"><div style="width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">内容11</div></td>
<td height="20"><div style="width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">内容12</div></td>
</tr>
</table>
<br/ />
<div style="border:1px solid black;width:500px;height:200px" id="inner"></div>
</body>
</HTML>

[提示：你可先修改部分代码，再按运行]

宋针还 2007-12-09 11:15 发表评论

通用的透明效果

宋针还 — Sun, 09 Dec 2007 03:08:00 GMT

<html>
<head>
<TITLE>通用透明</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
*{
margin:0 auto;
}
body {
font-size:12px;
font-family:"宋体";
background:#DFEAF4;
text-align:center;
}
a {color:000000; text-decoration:none;}
a:hover {color:993333;}
#top10 {
border:1px solid #336699;
width:300px;
height:202px;
background:#fff;
text-align:left;
opacity:.6; filter:alpha(opacity=60);
}
#top10 ul {
padding:5px;
}
#top10 ul li {
height:15px;
list-style:none;
padding-left:35px;
line-height:18px;
border-bottom:1px solid #fff;
}
.li_01 { background:#AFCAE4 url(jsfile/imagesa35/01.gif) no-repeat; }
.li_02 { background:#BFD5EA url(jsfile/imagesa35/02.gif) no-repeat; }
.li_03 { background:#CFDFEF url(jsfile/imagesa35/03.gif) no-repeat; }
.li_04 { background:#DFEAF4 url(jsfile/imagesa35/04.gif) no-repeat; }
.li_05 { background:#EFF4FA url(jsfile/imagesa35/05.gif) no-repeat; }
.li_06 { background:#EFF4FA url(jsfile/imagesa35/06.gif) no-repeat; }
.li_07 { background:#EFF4FA url(jsfile/imagesa35/07.gif) no-repeat; }
.li_08 { background:#EFF4FA url(jsfile/imagesa35/08.gif) no-repeat; }
.li_09 { background:#EFF4FA url(jsfile/imagesa35/09.gif) no-repeat; }
.li_10 { background:#EFF4FA url(jsfile/imagesa35/10.gif) no-repeat; }
</style>
</HEAD>
<BODY>
<div id="top10">
<ul>
<li class="li_01"><a href="#">WordPress 运行代码插件</a></li>
<li class="li_02"><a href="#">谷歌奥运倒计时366天推出新Logo</a></li>
<li class="li_03"><a href="#">SearchStatus:同时显示Alexa排名和PR值</a></li>
<li class="li_04"><a href="#">关注 CSS Zen Garden 禅意花园</a></li>
<li class="li_05"><a href="#">Google AdSense 推介改版并推出众多新产品</a></li>
<li class="li_06"><a href="#">标准与习惯：在解决ul居中问题时想到的</a></li>
<li class="li_07"><a href="#">玩转 WordPress 附赠插件 Hello Dolly</a></li>
<li class="li_08"><a href="#">Hello Dolly 励志修改版插件提供下载</a></li>
<li class="li_09"><a href="#">说说最近读的书：无懈可击的Web设计</a></li>
<li class="li_10"><a href="#">网络写手的利器：体验 Google 文件</a></li>
</ul>
</div>
</BODY>
</HTML>

[提示：你可先修改部分代码，再按运行]

宋针还 2007-12-09 11:08 发表评论

拖拽例子(二)

宋针还 — Fri, 07 Dec 2007 08:37:00 GMT

<html>
<head>
<title>DRAG the DIV</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
*{font-size:12px}
.dragTable{
font-size:12px;
border-top:1px solid #3366cc;
margin-bottom: 10px;
width:100%;
background-color:#FFFFFF;
}
td{vertical-align:top;}
.dragTR{
cursor:move;
color:#7787cc;
background-color:#e5eef9;
height:20px;
padding-left:5px;
font-weight:bold;
}
#parentTable{
border-collapse:collapse;
letter-spacing:25px;
}
</style>
<script defer>
/****JoeLee************E-MAIL:hktx@163.com****QQ:48293707*****11:09 2006-2-9******/
 var Drag={dragged:false,
  ao:null,
  tdiv:null,
dragStart:function(){
 Drag.ao=event.srcElement;
 if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){
  Drag.ao=Drag.ao.offsetParent;
  Drag.ao.style.zIndex=100;
 }else
  return;
 Drag.dragged=true;
 Drag.tdiv=document.createElement("div");
 Drag.tdiv.innerHTML=Drag.ao.outerHTML;
 Drag.ao.style.border="1px dashed red";
 Drag.tdiv.style.display="block";
 Drag.tdiv.style.position="absolute";
 Drag.tdiv.style.filter="alpha(opacity=70)";
 Drag.tdiv.style.cursor="move";
 Drag.tdiv.style.border="1px solid #000000";
 Drag.tdiv.style.width=Drag.ao.offsetWidth;
 Drag.tdiv.style.height=Drag.ao.offsetHeight;
 Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;
 Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;
 document.body.appendChild(Drag.tdiv);
 Drag.lastX=event.clientX;
 Drag.lastY=event.clientY;
 Drag.lastLeft=Drag.tdiv.style.left;
 Drag.lastTop=Drag.tdiv.style.top;
},
 draging:function(){//重要:判断MOUSE的位置
 if(!Drag.dragged||Drag.ao==null)return;
 var tX=event.clientX;
 var tY=event.clientY;
 Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
 Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
 for(var i=0;i<parentTable.cells.length;i++){
  var parentCell=Drag.getInfo(parentTable.cells[i]);
  if(tX>=parentCell.left && tX<=parentCell.right && tY>=parentCell.top && tY<=parentCell.bottom){
   var subTables=parentTable.cells[i].getElementsByTagName("table");
   if(subTables.length==0){
    if(tX>=parentCell.left && tX<=parentCell.right && tY>=parentCell.top && tY<=parentCell.bottom){
     parentTable.cells[i].appendChild(Drag.ao);
    }
    break;
   }
   for(var j=0;j<subTables.length;j++){
    var subTable=Drag.getInfo(subTables[j]);
    if(tX>=subTable.left && tX<=subTable.right && tY>=subTable.top && tY<=subTable.bottom){
     parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
     break;
    }else{
     parentTable.cells[i].appendChild(Drag.ao);
    } 
   }
  }
 }
}
,
 dragEnd:function(){
 if(!Drag.dragged)return;
 Drag.dragged=false;
 Drag.mm=Drag.repos(150,15);
 Drag.ao.style.borderWidth="0px";
 Drag.ao.style.borderTop="1px solid #3366cc";
 Drag.tdiv.style.borderWidth="0px";
 Drag.ao.style.zIndex=1;
},
getInfo:function(o){//取得坐标
 var to=new Object();
 to.left=to.right=to.top=to.bottom=0;
 var twidth=o.offsetWidth;
 var theight=o.offsetHeight;
 while(o!=document.body){
  to.left+=o.offsetLeft;
  to.top+=o.offsetTop;
  o=o.offsetParent;
 }
  to.right=to.left+twidth;
  to.bottom=to.top+theight;
 return to;
},
repos:function(aa,ab){
 var f=Drag.tdiv.filters.alpha.opacity;
 var tl=parseInt(Drag.getInfo(Drag.tdiv).left);
 var tt=parseInt(Drag.getInfo(Drag.tdiv).top);
 var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;
 var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;
 var kf=f/ab;
 return setInterval(function(){if(ab<1){
       clearInterval(Drag.mm);
       Drag.tdiv.removeNode(true);
       Drag.ao=null;
       return;
      }
     ab--;
     tl-=kl;
     tt-=kt;
     f-=kf;
     Drag.tdiv.style.left=parseInt(tl)+"px";
     Drag.tdiv.style.top=parseInt(tt)+"px";
     Drag.tdiv.filters.alpha.opacity=f;
    }
,aa/ab)
},
 inint:function(){//初始化
 for(var i=0;i<parentTable.cells.length;i++){
  var subTables=parentTable.cells[i].getElementsByTagName("table");
  for(var j=0;j<subTables.length;j++){
   if(subTables[j].className!="dragTable")break;
   subTables[j].rows[0].className="dragTR";
   subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);
  }
 }
 document.onmousemove=Drag.draging;
 document.onmouseup=Drag.dragEnd;
}
//end of Object Drag
}
Drag.inint();
function _show(str){
 var w=window.open('','');
 var d=w.document;
 d.open();
 str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=\"$1\"$2");
 str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />");
 str=str.replace(/\r/g,"<br />\n");
 d.write(str);
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable">
<tr >
<td width="25%" valgin="top">
<table border=0 class="dragTable" cellspacing="0">
<tr>
<td><strong>GMAIL</strong></td>
</tr>
<tr>
<td>暂时无法显示GMAIL内容</td>
<tr>
</table><table border=0 class="dragTable" cellspacing="0">
<tr>
<td>新浪体育</td>
</tr>
<tr>
<td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步<br/ /> 印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角 美加施冷箭</td>
<tr>
</table>
<table border=0 class="dragTable" cellspacing="0">
<tr>
<td>焦点</td>
</tr>
<tr>
<td>京广线中断4小时20临客返汉晚点 中国新闻网-湖北分社 - 所有 235 相关报道 »哈马斯已有总理人选
解放日报报业集团 - 所有 489 相关报道 »陈水扁是两岸关系麻烦制造者 武汉晨报 - 所有 179 相关报道 »</td>
<tr>
</table>
</td>
<td width="25%">
<table border=0 class="dragTable" cellspacing="0">
<tr>
<td>中关村在线</td>
</tr>
<tr>
<td>新年行情速递 双敏板卡低价推荐 终于等到了，映泰6600GT一降降一百 罗技G15游戏键盘热力促销，代购价仅529元 </td>
<tr>
</table></td>
<td width="25%">
<table border=0 class="dragTable" cellspacing="0">
<tr>
<td>网易商业</td>
</tr>
<tr>
<td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>
<tr>
</table>  <table border=0 class="dragTable" cellspacing="0">
<tr>
<td>黑可天下</td>
</tr>
<tr>
<td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>
<tr>
</table>
</td>
</tr>
</table>
</body>
</html>

[提示：你可先修改部分代码，再按运行]

宋针还 2007-12-07 16:37 发表评论

漂亮的表格样式

宋针还 — Fri, 07 Dec 2007 07:45:00 GMT

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>CSS Tables</title> 
<link href="styles.css" rel="stylesheet" type="text/css" /> 
</head> 
<style type="text/css"> 
/* CSS Document */ 
body { 
    font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
    color: #4f6b72; 
    background: #E6EAE9; 
} 
a { 
    color: #c75f3e; 
} 
#mytable { 
    width: 700px; 
    padding: 0; 
    margin: 0; 
} 
caption { 
    padding: 0 0 5px 0; 
    width: 700px;      
    font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
    text-align: right; 
} 
th { 
    font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
    color: #4f6b72; 
    border-right: 1px solid #C1DAD7; 
    border-bottom: 1px solid #C1DAD7; 
    border-top: 1px solid #C1DAD7; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
    text-align: left; 
    padding: 6px 6px 6px 12px; 
    background: #CAE8EA url(images/bg_header.jpg) no-repeat; 
} 
th.nobg { 
    border-top: 0; 
    border-left: 0; 
    border-right: 1px solid #C1DAD7; 
    background: none; 
} 
td { 
    border-right: 1px solid #C1DAD7; 
    border-bottom: 1px solid #C1DAD7; 
    background: #fff; 
    font-size:11px; 
    padding: 6px 6px 6px 12px; 
    color: #4f6b72; 
} 

td.alt { 
    background: #F5FAFA; 
    color: #797268; 
} 
th.spec { 
    border-left: 1px solid #C1DAD7; 
    border-top: 0; 
    background: #fff url(images/bullet1.gif) no-repeat; 
    font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
} 
th.specalt { 
    border-left: 1px solid #C1DAD7; 
    border-top: 0; 
    background: #f5fafa url(images/bullet2.gif) no-repeat; 
    font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
    color: #797268; 
} 
/*---------for IE 5.x bug*/ 
html>body td{ font-size:11px;} 
</style> 
<body> 
<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series"> 
<caption> </caption> 
  <tr> 
    <th scope="col" abbr="Configurations" class="nobg">Configurations</th> 
    <th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th> 
    <th scope="col" abbr="Dual 2">Dual 2GHz</th> 
    <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th> 
  </tr> 
  <tr> 
    <th scope="row" abbr="Model" class="spec">lipeng</th> 
    <td>M9454LL/A</td> 
    <td>M9455LL/A</td> 
    <td>M9457LL/A</td> 
  </tr> 
  <tr> 
    <th scope="row" abbr="G5 Processor" class="specalt">mapabc</th> 
    <td class="alt">Dual 1.8GHz PowerPC G5</td> 
    <td class="alt">Dual 2GHz PowerPC G5</td> 
    <td class="alt">Dual 2.5GHz PowerPC G5</td> 
  </tr> 
  <tr> 
    <th scope="row" abbr="Frontside bus" class="spec">地图名片</th> 
    <td>900MHz per processor</td> 
    <td>1GHz per processor</td> 
    <td>1.25GHz per processor</td> 
  </tr> 
  <tr> 
    <th scope="row" abbr="L2 Cache" class="specalt">图秀卡</th> 
    <td class="alt">512K per processor</td> 
    <td class="alt">512K per processor</td> 
    <td class="alt">512K per processor</td> 
  </tr> 
</table> 
</body> 
</html>

[提示：你可先修改部分代码，再按运行]

宋针还 2007-12-07 15:45 发表评论

在博客中加入JS运行代码框

宋针还 — Fri, 07 Dec 2007 07:36:00 GMT

先看如下代码：

1 <html><head>
2 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
3 <title>如何实现运行代码框功能title>
4 <script language=javascript>
5 function runCode()  //定义一个运行代码的函数，
6 {
7  if(1 == arguments.length)
8   try{event = arguments[0];}catch(e){}
9   var code=(event.target || event.srcElement).parentNode.childNodes[0].value;//即要运行的代码。
10   var newwin=window.open('','','');  //打开一个窗口并赋给变量newwin。
11   newwin.opener = null // 防止代码对原页面修改
12   newwin.document.write(code);  //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
13   newwin.document.close();
14 }
15 function copycode(obj) {
16  var rng = document.body.createTextRange();
17  rng.moveToElementText(obj);
18  rng.scrollIntoView();
19  rng.select();
20  rng.execCommand("Copy");
21  rng.collapse(false);
22 }
23 script>
24 <style>
25 textarea {
26  font-size: 12px;FONT-FAMILY: "Tahoma", "MS Shell Dlg";
27 }
28 .codetextarea {
29  font-family: "宋体";
30  font-size: 12px;
31  height: 310px;
32  width: 515px;
33  word-wrap:normal;
34  word-break:keep-all;
35 }
36 style>
37 head><body>
38 <span><textarea class="codeTextarea" name="run_Code">
39 textarea><br><input onclick="runCode()" type="button" value="运行代码"> <input type="button" value="复制代码" onclick="copycode(run_Code)">[提示：你可先修改部分代码，再按运行]span>
40 body>html>
41

在上面代码中的textarea中加入你想加入的效果代码，把整个HTML替换要发布的HTML即可。。哇哈哈哈。就是界面不怎么地。----szh

宋针还 2007-12-07 15:36 发表评论

拖动交换单元格内容

宋针还 — Fri, 07 Dec 2007 06:38:00 GMT

<html>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>拖动</TITLE>
<STYLE>
td{width:20%;height:20px;border-bottom:1px solid black;border-right:1px solid black;cursor:default;}
div{font-size:13px;}
th{height:20px;font-size:12px;font-weight:normal;border-bottom:2px solid black;background-color:#CCCCCC}
table{border:1px solid black;font-size:13px;}
</STYLE>
<script language="javascript">
/************************************ dragedTableData.js *******************************/
/************************************ dragedTableData.js *******************************/
/*
* created by LxcJie 2004.4.12
* 可以实现表格内容的内部拖动
* 确保中间过度层的存在，id为指定
*/
/*--------全局变量-----------*/
var dragedTable_x0,dragedTable_y0,dragedTable_x1,dragedTable_y1;
var dragedTable_movable = false;
var dragedTable_preCell = null;
var dragedTable_normalColor = null;
//起始单元格的颜色
var dragedTable_preColor = "lavender";
//目标单元格的颜色
var dragedTable_endColor = "#FFCCFF";
var dragedTable_movedDiv = "dragedTable_movedDiv";
var dragedTable_tableId = "";
/*--------全局变量-----------*/
function DragedTable(tableId)
{
dragedTable_tableId = tableId;
var oTempDiv = document.createElement("div");
oTempDiv.id = dragedTable_movedDiv;
oTempDiv.onselectstart = function(){return false};
oTempDiv.style.cursor = "hand";
oTempDiv.style.position = "absolute";
oTempDiv.style.border = "1px solid black";
oTempDiv.style.backgroundColor = dragedTable_endColor;
oTempDiv.style.display = "none";
document.body.appendChild(oTempDiv);
document.all(tableId).onmousedown = showDiv;
}
//得到控件的绝对位置
function getPos(cell)
{
var pos = new Array();
var t=cell.offsetTop;
var l=cell.offsetLeft;
while(cell=cell.offsetParent)
{
t+=cell.offsetTop;
l+=cell.offsetLeft;
}
pos[0] = t;
pos[1] = l;
return pos;
}
//显示图层
function showDiv()
{
var obj = event.srcElement;
var pos = new Array();
//获取过度图层
var oDiv = document.all(dragedTable_movedDiv);
if(obj.tagName.toLowerCase() == "td")
{
obj.style.cursor = "hand";
pos = getPos(obj);
//计算中间过度层位置，赋值
oDiv.style.width = obj.offsetWidth;
oDiv.style.height = obj.offsetHeight;
oDiv.style.top = pos[0];
oDiv.style.left = pos[1];
oDiv.innerHTML = obj.innerHTML;
oDiv.style.display = "";
dragedTable_x0 = pos[1];
dragedTable_y0 = pos[0];
dragedTable_x1 = event.clientX;
dragedTable_y1 = event.clientY;
//记住原td
dragedTable_normalColor = obj.style.backgroundColor;
obj.style.backgroundColor = dragedTable_preColor;
dragedTable_preCell = obj;
dragedTable_movable = true;
}
}
function dragDiv()
{
if(dragedTable_movable)
{
var oDiv = document.all(dragedTable_movedDiv);
var pos = new Array();
oDiv.style.top = event.clientY - dragedTable_y1 + dragedTable_y0;
oDiv.style.left = event.clientX - dragedTable_x1 + dragedTable_x0;
var oTable = document.all(dragedTable_tableId);
for(var i=0; i<oTable.cells.length; i++)
{
if(oTable.cells[i].tagName.toLowerCase() == "td")
{
pos = getPos(oTable.cells[i]);
if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth
&& event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight)
{
if(oTable.cells[i] != dragedTable_preCell)
oTable.cells[i].style.backgroundColor = dragedTable_endColor;
}
else
{
if(oTable.cells[i] != dragedTable_preCell)
oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
}
}
}
}
}
function hideDiv()
{
if(dragedTable_movable)
{
var oTable = document.all(dragedTable_tableId);
var pos = new Array();
if(dragedTable_preCell != null)
{
for(var i=0; i<oTable.cells.length; i++)
{
pos = getPos(oTable.cells[i]);
//计算鼠标位置，是否在某个单元格的范围之内
if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth
&& event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight)
{
if(oTable.cells[i].tagName.toLowerCase() == "td")
{
//交换文本
dragedTable_preCell.innerHTML = oTable.cells[i].innerHTML;
oTable.cells[i].innerHTML = document.all(dragedTable_movedDiv).innerHTML;
//清除原单元格和目标单元格的样式
dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
oTable.cells[i].style.cursor = "";
dragedTable_preCell.style.cursor = "";
dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
}
}
}
}
dragedTable_movable = false;
//清除提示图层
document.all(dragedTable_movedDiv).style.display = "none";
}
}
document.onmouseup = function()
{
hideDiv();
var oTable = document.all(dragedTable_tableId);
for(var i=0; i<oTable.cells.length; i++)
oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
}
document.onmousemove = function()
{
dragDiv();
}
/************************************ dragedTableData.js 结束 *******************************/
/************************************ dragedTableData.js 结束 *******************************/
</script>
<script language="javascript">
function init()
{
//注册可拖拽表格
new DragedTable("tableId");
}
</script>
</HEAD>
<BODY oncontextmenu="return false;" onload="init()">
<TABLE id="tableId" width="70%" align="center" cellpadding="0" cellspacing="0">
<TR>
<TH colspan="4" style="">拖动交换单元格内容</TH>
</TR>
<TR>
<TD>Java</TD>
<TD>Java One </TD>
<TD>JBuilder</TD>
<TD>Stuts</TD>
</TR>
<TR>
<TD>C++</TD>
<TD>Visual Studio</TD>
<TD>Office</TD>
<TD>Windows</TD>
</TR>
<TR>
<TD>PhotoShop</TD>
<TD>Java</TD>
<TD>Illustrator</TD>
<TD>PageMaker</TD>
</TR>
<TR>
<TD>Cartoon</TD>
<TD>Telephone</TD>
<TD>China</TD>
<TD>USA</TD>
</TR>
<TR>
<TD>Java</TD>
<TD>Java One </TD>
<TD>JBuilder</TD>
<TD>Stuts</TD>
</TR>
<TR>
<TD>C++</TD>
<TD>Visual Studio</TD>
<TD>Office</TD>
<TD>Windows</TD>
</TR>
<TR>
<TD>PhotoShop</TD>
<TD>Flash</TD>
<TD>Illustrator</TD>
<TD>PageMaker</TD>
</TR>
<TR>
<TD>Cartoon</TD>
<TD>Telephone</TD>
<TD>China</TD>
<TD>USA</TD>
</TR>
</TABLE>
</BODY>
</HTML>

[提示：你可先修改部分代码，再按运行]

宋针还 2007-12-07 14:38 发表评论

拖拽例子(一)

宋针还 — Fri, 07 Dec 2007 06:23:00 GMT

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Freedom</title>
<style type="text/css">
body {
width:100%;
max-height:100%;
padding:0px;
margin:0px;
text-align:center;
}
.cell {
float:left;
clear:right;
}
.row {
clear:both;
}
.r_nbsp {
width:20px;
}
.root {
width:868px;
margin: 0 auto;
}
.root * {
/*次属性FF的说*/
-moz-user-select:none;
}
.line {
width:202px;
line-height:20px;
height:20px;
overflow:hidden;
font-size:12px;
}
.move {
border:#CCCCCC 1px solid;
width:200px;
height:aotu;
}
.title {
height:24px;
cursor:move;
background:#0080C0;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
line-height:24px;
text-align:center;
}
.content {
border-top:#CCCCCC 1px solid;
height:100px;
background-color:#F7F7F7;
}
.CDrag_temp_div {
border:#CCCCCC 1px dashed;
}
</style>
<script type="text/javascript">
var Class = {
//创建类
create: function () {
return function () {
this.initialize.apply(this, arguments);
};
}
};
var $A = function (a) {
//转换数组
return a ? Array.apply(null, a) : new Array;
};
var $ = function (id) {
//获取对象
return document.getElementById(id);
};
Object.extend = function (a, b) {
//追加方法
for (var i in b) a[i] = b[i];
return a;
};
Object.extend(Object, {
addEvent : function (a, b, c, d) {
//添加函数
if (a.attachEvent) a.attachEvent(b[0], c);
else a.addEventListener(b[1] || b[0].replace(/^on/, ""), c, d || false);
return c;
},
delEvent : function (a, b, c, d) {
if (a.detachEvent) a.detachEvent(b[0], c);
else a.removeEventListener(b[1] || b[0].replace(/^on/, ""), c, d || false);
return c;
},
reEvent : function () {
//获取Event
return window.event ? window.event : (function (o) {
do {
o = o.caller;
} while (o && !/^\[object[ A-Za-z]*Event\]$/.test(o.arguments[0]));
return o.arguments[0];
})(this.reEvent);
}
});
Function.prototype.bind = function () {
//绑定事件
var wc = this, a = $A(arguments), o = a.shift();
return function () {
wc.apply(o, a.concat($A(arguments)));
};
};

var Table = Class.create();
Table.prototype = {
initialize : function () {
//初始化
var wc = this;
wc.cols = new Array; //创建列
},
addCols : function (o) {
//添加列
var wc = this, cols = wc.cols, i = cols.length;
return cols[i] = {
id : i, div : o, rows : new Array, //创建行
addRow : wc.addRow, chRow : wc.chRow, inRow : wc.inRow, delRow : wc.delRow
};
},
addRow : function (o) {
//添加行
var wc = this, rows = wc.rows, i = rows.length;
return rows[i] = {
id : i, div : o, cols : wc
};
},
inRow : function (a, b) {
//插入行
var wc = b.cols = this, rows = wc.rows, i;
if (a < rows.length) {
for (i = a ; i < rows.length ; i ++) rows[i].id ++;
rows.splice(a, 0, b);
b.id = a;
return b;
} else {
b.id = rows.length;
return rows[b.id] = b;
}
},
delRow : function (a) {
//删除列
var wc = this, rows = wc.rows, i, r;
if (a >= rows.length) return;
r = rows[a];
rows.splice(a, 1);
for (i = a ; i < rows.length ; i ++) rows[i].id = i;
return r;
}
};
var CDrag = Class.create();
CDrag.IE = /MSIE/.test(window.navigator.userAgent);
CDrag.prototype = {
initialize : function () {
//初始化成员
var wc = this;
wc.table = new Table; //建立表格对象
wc.iFunc = wc.eFunc = null;
wc.obj = { on : { a : null, b : "" }, row : null, left : 0, top : 0 };
wc.temp = { row : null, div : document.createElement("div") };
wc.temp.div.setAttribute(CDrag.IE ? "className" : "class", "CDrag_temp_div");
wc.temp.div.innerHTML = " ";
},
reMouse : function (a) {
//获取鼠标位置
var e = Object.reEvent();
return {
x : document.documentElement.scrollLeft + e.clientX,
y : document.documentElement.scrollTop + e.clientY
};
},
rePosition : function (o) {
//获取元素绝对位置
var $x = $y = 0;
do {
$x += o.offsetLeft;
$y += o.offsetTop;
} while ((o = o.offsetParent) && o.tagName != "BODY");
return { x : $x, y : $y };
},
sMove : function (o) {
//当拖动开始时设置参数
var wc = this;
if (wc.iFunc || wc.eFinc) return;
var mouse = wc.reMouse(), obj = wc.obj, temp = wc.temp, div = o.div, position = wc.rePosition(div);
obj.row = o;
obj.on.b = "me";
obj.left = mouse.x - position.x;
obj.top = mouse.y - position.y;
temp.row = document.body.appendChild(div.cloneNode(true)); //复制预拖拽对象
with (temp.row.style) {
//设置复制对象
position = "absolute";
left = mouse.x - obj.left + "px";
top = mouse.y - obj.top + "px";
zIndex = 100;
opacity = "0.3";
filter = "alpha(opacity:30)";
}
with (temp.div.style) {
//设置站位对象
height = div.clientHeight + "px";
width = div.clientWidth + "px";
}

/*div.parentNode.insertBefore(temp.div, div);
div.style.display = "none"; //隐藏预拖拽对象*/
div.parentNode.replaceChild(temp.div, div);
wc.iFunc = Object.addEvent(document, ["onmousemove"], wc.iMove.bind(wc));
wc.eFunc = Object.addEvent(document, ["onmouseup"], wc.eMove.bind(wc));
document.onselectstart = new Function("return false");
},
iMove : function () {
//当鼠标移动时设置参数
var wc = this, cols = wc.table.cols, mouse = wc.reMouse(), obj = wc.obj, temp = wc.temp, row = obj.row, div = temp.row,
t_position, t_cols, t_rows, i, j;
with (div.style) {
left = mouse.x - obj.left + "px";
top = mouse.y - obj.top + "px";
}
for (i = 0 ; i < cols.length ; i ++) {
t_cols = cols[i];
t_position = wc.rePosition(t_cols.div);
if (t_position.x < mouse.x && t_position.x + t_cols.div.offsetWidth > mouse.x) {
if (t_cols.rows.length > 0) { //如果此列行数大于0
if (wc.rePosition(t_cols.rows[0].div).y + 20 > mouse.y) {
//如果鼠标位置大于第一行的位置即是最上。。
//向上
obj.on.a = t_cols.rows[0];
obj.on.b = "up";
obj.on.a.div.parentNode.insertBefore(temp.div, obj.on.a.div);
} else if (t_cols.rows.length > 1 && t_cols.rows[0] == row &&
wc.rePosition(t_cols.rows[1].div).y + 20 > mouse.y) {
//如果第一行是拖拽对象而第鼠标大于第二行位置则，没有动。。
//向上
obj.on.b = "me";
t_cols.rows[1].div.parentNode.insertBefore(temp.div, t_cols.rows[1].div);
} else {
for (j = t_cols.rows.length - 1 ; j > -1 ; j --) {
//重最下行向上查询
t_rows = t_cols.rows[j];
if (t_rows == obj.row) continue;
if (wc.rePosition(t_rows.div).y < mouse.y) {
//如果鼠标大于这行则在这行下面
if (t_rows.id + 1 < t_cols.rows.length && t_cols.rows[t_rows.id + 1] != obj.row) {
//如果这行有下一行则重这行下一行的上面插入
t_cols.rows[t_rows.id + 1].div.parentNode.
insertBefore(temp.div, t_cols.rows[t_rows.id + 1].div);
obj.on.a = t_rows;
obj.on.b = "down";
} else if (t_rows.id + 2 < t_cols.rows.length) {
//如果这行下一行是拖拽对象则插入到下两行，即拖拽对象返回原位
t_cols.rows[t_rows.id + 2].div.parentNode.
insertBefore(temp.div, t_cols.rows[t_rows.id + 2].div);
obj.on.b = "me";
} else {
//前面都没有满足则放在最低行
t_rows.div.parentNode.appendChild(temp.div);
obj.on.a = t_rows;
obj.on.b = "down";
}
return;
}
}
}
} else {
//此列无内容添加新行
t_cols.div.appendChild(temp.div);
obj.on.a = t_cols;
obj.on.b = "new";
}
}
}
},
eMove : function () {
//当鼠标释放时设置参数
var wc = this, obj = wc.obj, temp = wc.temp, row = obj.row, div = row.div, o_cols, n_cols;
if (obj.on.b == "up") {
//向最上添加
o_cols = obj.row.cols;
n_cols = obj.on.a.cols;
n_cols.inRow(0, o_cols.delRow(obj.row.id));
} else if (obj.on.b == "down") {
//相对向下添加
o_cols = obj.row.cols;
n_cols = obj.on.a.cols;
n_cols.inRow(obj.on.a.id + 1, o_cols.delRow(obj.row.id));
} else if (obj.on.b == "new") {
//向无内容列添加
o_cols = obj.row.cols;
n_cols = obj.on.a;
n_cols.inRow(0, o_cols.delRow(obj.row.id));
}
temp.div.parentNode.replaceChild(div, temp.div);
temp.row.parentNode.removeChild(temp.row);
delete temp.row;
Object.delEvent(document, ["onmousemove"], wc.iFunc);
Object.delEvent(document, ["onmouseup"], wc.eFunc);
document.onselectstart = wc.iFunc = wc.eFunc = null;
},
add : function (o) {
//添加对象
var wc = this;
Object.addEvent(o.div.childNodes[CDrag.IE ? 0 : 1], ["onmousedown"], wc.sMove.bind(wc, o));
},
parse : function (o) {
//初始化成员
var wc = this, table = wc.table, cols, i, j;
for (i = 0 ; i < o.length ; i ++) {
cols = table.addCols(o[i].cols);
for (j = 0 ; j < o[i].rows.length ; j ++)
wc.add(cols.addRow(o[i].rows[j]));
}
}
};
Object.addEvent(window, ["onload"], function () {
var wc = new CDrag;
wc.parse([
{
cols : $("m_1"), rows : [$("m_1_1"), $("m_1_2"), $("m_1_3"), $("m_1_4")]
},
{
cols : $("m_2"), rows : [$("m_2_1"), $("m_2_2"), $("m_2_3"), $("m_2_4")]
},
{
cols : $("m_3"), rows : [$("m_3_1"), $("m_3_2"), $("m_3_3"), $("m_3_4")]
},
{
cols : $("m_4"), rows : [$("m_4_1"), $("m_4_2"), $("m_4_3"), $("m_4_4")]
}
]);
});
</script>
</head><body><br />
<div class="root">
<div class="cell" id="m_1">
<div class="line">
第一列</div>
<div class="move" id="m_1_1">
<div class="title">
第一列的第一个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_1_2">
<div class="title">
第一列的第二个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_1_3">
<div class="title">
第一列的第三个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_1_4">
<div class="title">
第一列的第四个的说</div>
<div class="content">
</div>
</div>
</div>
<div class="cell r_nbsp">
</div>
<div class="cell" id="m_2">
<div class="line">
第二列</div>
<div class="move" id="m_2_1">
<div class="title">
第二列的第一个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_2_2">
<div class="title">
第二列的第二个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_2_3">
<div class="title">
第二列的第三个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_2_4">
<div class="title">
第二列的第四个的说</div>
<div class="content">
</div>
</div>
</div>
<div class="cell r_nbsp">
</div>
<div class="cell" id="m_3">
<div class="line">
第三列</div>
<div class="move" id="m_3_1">
<div class="title">
第三列的第一个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_3_2">
<div class="title">
第三列的第二个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_3_3">
<div class="title">
第三列的第三个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_3_4">
<div class="title">
第三列的第四个的说</div>
<div class="content">
</div>
</div>
</div>
<div class="cell r_nbsp">
</div>
<div class="cell" id="m_4">
<div class="line">
第四列</div>
<div class="move" id="m_4_1">
<div class="title">
第四列的第一个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_4_2">
<div class="title">
第四列的第二个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_4_3">
<div class="title">
第四列的第三个的说</div>
<div class="content">
</div>
</div>
<div class="move" id="m_4_4">
<div class="title">
第四列的第四个的说</div>
<div class="content">
</div>
</div>
</div>
</div>
</body></html>

[提示：你可先修改部分代码，再按运行]

宋针还 2007-12-07 14:23 发表评论

JS小数点判断

宋针还 — Thu, 06 Dec 2007 02:53:00 GMT

1.只取小数点后两位：

2.取小数点后的位数：

3.只取小数点后两位，四舍五入：

宋针还 2007-12-06 10:53 发表评论

收集整理的99个网页经典代码

宋针还 — Wed, 05 Dec 2007 05:39:00 GMT

1. 将彻底屏蔽鼠标右键,无右键菜单

也可以用于网页中Table框架中：

2.取消选取、防止复制

3.不准粘贴

4.防止复制

5.IE地址栏前换成自己的图标

说明：关于favicon.ico文件的制作。你可以先在FW中做一个图片，属于你自己站点一个小图标。然后在ACD see将文件属性改为*.ico，然后将你做的*.ICO文件传到你的服务器目录中，然后就可以使用以上代码来实现，当别人登陆你的站点时，地址栏里使用的就是你自定义的图标了。很PP哦。

6.可以在收藏夹中显示出你的图标

说明：制作方法和上面的一样。只是显示的方式不同，这个是在别人收藏你的网页地址时显示的个性图标。也很PP.

7.关闭输入法

说明：这段代码是在表格提交时用到的。也就是在输入数据时不可以使用其他输入法模式。

8.永远都会带着框架
< language="java">
说明：s.htm为你的网页，这也是保护页面的一种方法

9.防止被人
< LANGUAGE=java>

10.网页将不能被另存为

说明：的用法很广，其中一条就是可以使JS广告失效。

11.查源文件
="location = view-source:+ http://bbs.itren.cn/;">

12.脚本记录，有很大的用处哦
get_(Name) {
var search = Name + "="
var return = "";
if (documents..length > 0) {
offset = documents..indexOf(search)
if (offset != -1) { // if exists
offset += search.length
// set index of beginning of
end = documents..indexOf(";", offset);
// set index of end of
if (end == -1)
end = documents..length;
return=unescape(documents..substring(offset, end))
}
}
return return;
}
loadpopup(){
if (get_(popped)==){
openpopup()
documents.="popped=yes"
}
}
说明：以上是JS代码，请自己加起始符和结束符

13.内框架使用
I标记的使用格式是: 　　
name="main">
src：文件的路径，既可是HTML文件，也可以是文本、ASP等；width、height："内部框架"区域的宽与高； scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示; 　Border：区域边框的宽度，为了让“内部框架“与邻近的内容相融合，常设置为0。name:框架的名字，用来进行识别。
比如：当你想用父框架控制内部框架时，可以使用： target="框架的名字"来控制。
例子：http://www.itren.cn";;width="100%"height="100%"marginwidth="0"marginheight=" ... ;border="0"scrolling="no">

14.自动跳转
在源代码中的…加入如下代码：
< http-equiv="refresh"content="3;URL=http://www.fitads.com; charset=gb2312">
说明：content="3 表示3秒刷新到URL
这个JavaScrip也有能实现自动跳转：< language="java">location.replace("http://www.itren.cn")>

15.如何改变链接的鼠标形状
只需在链接上加上这一代码就行的了
或者跟上面的用CSS写也行
style="cursor:hand"　　　　　　style="cursor:crosshair"
style="cursor:text" 　　　　　　style="cursor:wait"
style="cursor:move" 　　　　　　style="cursor:help"
style="cursor:e-resize" 　　　　style="cursor:n-resize"
style="cursor:nw-resize" 　　　style="cursor:w-resize"
style="cursor:s-resize" 　　　　style="cursor:se-resize"
style="cursor:sw-resize"
以上代码你只需要加到连接或是页面的style区里就可以实现鼠标多样化。

16.全屏显示

把它放到区中。

17.设为首页
< language="java">

设为首页

18.这里是加入收藏夹的代码
http://www.itren.cn;.-=IT人=-)" target="_self" title="-=IT人=-">加入收藏夹

19.flash图片效果
以下代码加入区域
< language="java">

以下代码加入区域

< language=java>
var R = 0; load();
load() {R = R + 2; Q.style.width = R + "%"; time= setTimeout("load()",50);
if (R > 100) {clearTimeout(time); P.style.width=0}}

27 全屏
< language=java>
open(index.asp,,fullscreen=1);

21.背景图片滚动

< language="java">
var backgroundOffset = 0;
var bgObject = eval(body);
scrollBG(maxSize) {backgroundOffset = backgroundOffset + 1;
if (backgroundOffset > maxSize) backgroundOffset = 0;
bgObject.style.backgroundPosition = "0 " + backgroundOffset;}
var ScrollTimer = setInterval("scrollBG(410)", 20)

如果转萜，请注明转自-=IT人=-http://www.itren.cn

22.网页不会被缓存
HTMl网页
< HTTP-EQUIV="pragma" CONTENT="no-cache">
< HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
< HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
或者< HTTP-EQUIV="expires" CONTENT="0">
ASP网页
　Response.Expires = -1
　Response.ExpiresAbsolute = Now() - 1
　Response.cachecontrol = "no-cache"
PHP网页
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");

23.<%定义数据库连接的一些常量
Const adOpenForwardOnly　 = 0 游标只向前浏览记录，不支持分页、Recordset、BookMark
Const adOpenKeyset　= 1 键集游标，其他用户对记录说做的修改将反映到记录集中，但其他用户增加或删除记录不会反映到记录集中。支持分页、Recordset、BookMark
Const adOpenDynamic　= 2 动态游标功能最强，但耗资源也最多。用户对记录说做的修改，增加或删除记录都将反映到记录集中。支持全功能浏览(ACCESS不支持)。
Const adOpenStatic　= 3 静态游标，只是数据的一个快照，用户对记录说做的修改，增加或删除记录都不会反映到记录集中。支持向前或向后移动
Const adLockReadOnly　= 1 锁定类型，默认的，只读，不能作任何修改
Const adLockPessimistic　= 2 当编辑时立即锁定记录，最安全的方式
Const adLockOptimistic　= 3 只有在调用Update方法时才锁定记录集，而在此前的其他操作仍可对当前记录进行更改、插入和删除等
Const adLockBatchOptimistic = 4 当编辑时记录不会被锁定，而更改、插入和删除是在批处理方式下完成的
Const adCmdText　= &H0001
Const adCmdTable = &H0002
%>

24.最小化、最大化、关闭窗口

说明：本例适用于IE

25.判断上一页的来源
asp页:
request.servervariables("HTTP_REFERER")
java :
referrer

26.光标是停在文本框文字的最后
< language="java">
cc()
{
　var e = event.srcElement;
　var r =e.createTextRange();
　r.moveStart(character,e..length);
　r.collapse(true);
　r.select();
}

说明：适用于表格数据提交
如果转萜，请注明转自-=e代时光=-http://www.e3i5.com

27.怎样通过asp的手段来检查来访者是否用了代理
<% if Request.ServerVariables("HTTP_X_FORWARDED_FOR")<>"" then
response.write "您通过了代理服务器，"& _
"真实的IP为"&Request.ServerVariables("HTTP_X_FORWARDED_FOR")
end if
%>

28.取得控件的绝对位置
< language="java">
getIE(e){
　var t=e.offsetTop;
　var l=e.offsetLeft;
　while(e=e.offsetParent){
　　t+=e.offsetTop;
　　l+=e.offsetLeft;
　　}
　alert("top="+t+"\nleft="+l);
　}

//VB
< language="VB">

29.滚动特效

欢迎光临E代时光
感谢

30.自动更新提示

< LANGUAGE="java">

< LANGUAGE="java">

31.关于表格提交的几种格式

限制输入字符，你可以改变KEYCODE的值来限制输入。你将KEYCODE的值设为极大和极小就什么也不能输入了。这个可以屏蔽你想屏蔽的字符有一定的选择性..

使用disabled属性后的区域的值，不能被传递给其他的程序（ASP/CGI）去处理，如果你非要传递请通过隐藏属性去做。这个比较单一，功能不强。一般用于未完成的站点。

readonly属性顾名思义是“只读”。它将TEXT转化为一个对象，禁止对它进行编辑。你虽然可以通过TAB键在多个TEXT区域间切换，但是不能修改已经指定的TEXT区的值。但是它不象Disabled属性那样，可以进行正常的数值传递。

32.让背景图不滚动
IE浏览器支持一个 Body 属性 bgproperties，它可以让背景不滚动:
〈Body Background="图片文件" bgproperties="fixed"〉

33.让你的网页无法另存为

34.让I框架内的文档的背景透明

35.禁止右键：

36.进入页面后立即自动刷新？
< http-equiv="refresh" content="120;url=Http://www.itren.cn">
Http://www.itren.cn ,这是你自己的网址。

37 .打开窗口即最大化
< language="java">

38.能隐藏I的滚动条吗？我知道的三种方法:
1. 设置i scrolling="no"
2. 被包含页body应用overflow:hidden
3. 被包含页的body标签加scroll="no"

39.加入背景音乐
只适用于IE
对Netscape ,IE 都适用

40.滚动

41.细线分隔线

42.过度方式
< http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=5)">
Duration的值为网页动态过渡的时间，单位为秒。
Transition是过渡方式，它的值为0到23，分别对应24种过渡方式。如下表：
0 盒状收缩 1 盒状放射
2 圆形收缩 3 圆形放射
4 由下往上 5 由上往下
6 从左至右 7 从右至左
8 垂直百叶窗 9 水平百叶窗
10 水平格状百叶窗 11垂直格状百叶窗
12 随意溶解 13从左右两端向中间展开
14从中间向左右两端展开 15从上下两端向中间展开
16从中间向上下两端展开 17 从右上角向左下角展开
18 从右下角向左上角展开 19 从左上角向右下角展开
20 从左下角向右上角展开 21 水平线状展开
22 垂直线状展开 23 随机产生一种过渡方式

43.如何控制横向和纵向滚动条的显隐？
去掉x轴
去掉y轴
不显

44.怎样在 FrontPage2000 中加入 Flash 动画?
在 FrontPage2000 中,点击[插入]->[高级]->[插件]，在弹出的窗口中，设置一下 Flash 文件的大小及其它信息，确定即可。

45.加入注释的格式是：　　　
〈!-［注释内容…］--〉

46.怎样在网页中加入 E-mail 链接并显示预定的主题?
〈A href="mailto:itren@itren.cn?subject=主题"〉……〈/a〉

47.定义本网页关键字，
可以在〈Head〉〈/Head〉中加入如下代码：　
〈 name="Keywords" content="E代时光"〉　　
Content 中所包含的就是关键字,你可以自行设置。　　
这里有个技巧,你可以重复某一个单词,这样可以提高自己网站的排行位置,如：
〈 name="Keywords" content="E代时光"〉

48.IE5.0 的部分快捷键：
A:打开查找功能：Ctrl+F
关闭浏览器窗口：Ctrl+W
打开地址栏下拉列表框：F4
刷新：F5
将当前Web页保存到收藏夹列表：Ctrl+D
打开当前 IE 窗口的一个拷贝：Ctrl+N
停止下载当前网页：Esc
光标迅速移动到网页的开头：Home
光标迅速移动到网页的尾部：End
打开新的地址键入窗口：Ctrl+O
打开收藏夹：Ctrl+I
打开历史记录文件夹：Ctrl+H
打开浏览器设定的默认主页：Alt+HOME

49.添加到收藏夹：
〈a href="java :external.addFavorite(http://www.itren.cn ,www.itren.cn);"〉添加到收藏夹〈/a〉

50.设为首页：
〈a href=# =this.style.behavior=url(#default#homepage);this.setHomePage(http://www.itren.cn); 〉设为首页〈/a〉

51.定制浏览器地址栏前的小图标：
A:在网页的〈head〉〈/head〉间加入以下语句：
〈link rel="shortcuticon" href="http://…/icon.ico"〉
即可。其中 icon.ico 为 16x16 的图标文件，颜色不要超过 16 色。

52.把滚动条放在浏览器窗口的左边
A:在中加 dir=RTL，即

53.页面全部保护
<>

54.状态栏的特效，可以很好的屏蔽显示的地址
< language=java>kstatus();
e3i5(){
self.status="※※欢迎来到【IT人】※※★☆赶快把http://www.itren.cn 告诉给你的朋友吧★☆※※";
setTimeout("e3i5()",0);
}

55.防刷新代码
<%
Dim URL
If DateDiff("s",Request.s("oesun")("vitistime"),Now())<2 Then
URL=Request.ServerVariables("Http_REFERER")
Response.Write("< http-equiv=""refresh"" content=""2;URL="&URL&""">")
Response.Write("防刷新,两秒后自动跳转...")
Response.End
End IF
Response.s("oesun")("vitistime")=Now()
%>

56. oncontextmenu="event.return=false" 将彻底屏蔽鼠标右键

no
可用于Table

57. 取消选取、防止复制

58. onpaste="return false" 不准粘贴

59. oncopy="return false;" oncut="return false;" 防止复制

60. IE地址栏前换成自己的图标

61. 可以在收藏夹中显示出你的图标

62. 关闭输入法

63. 永远都会带着框架
< language="Java">

64. 防止被人
< LANGUAGE=JAVA>

65. 网页将不能被另存为

66. ="location = view-source:+ http://www.51js.com/">

67.删除时确认
删
除

68. 取得控件的绝对位置
//Java
< language="Java">
getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert("top="+t+"/nleft="+l);
}

//VB
< language="VB">

69. 光标是停在文本框文字的最后
< language="java">
cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart(character,e..length);
r.collapse(true);
r.select();
}

70. 判断上一页的来源
java :
referrer

71. 最小化、最大化、关闭窗口

本例适用于IE

72.屏蔽功能键Shift,Alt,Ctrl
<>
look(){
if(event.shiftKey)
alert("禁止按Shift键!"); //可以换成ALT　CTRL
}
down=look;

73. 网页不会被缓存
< HTTP-EQUIV="pragma" CONTENT="no-cache">
< HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
< HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
或者< HTTP-EQUIV="expires" CONTENT="0">

74.怎样让表单没有凹凸感？

或

75.
&的区别？

(division)用来定义大段的页面元素，会产生转行
用来定义同一行内的元素，跟
的唯一区别是不产生转行
是ns的标记，ie不支持，相当于

76.让弹出窗口总是在最上面:

77.不要滚动条?
让竖条没有:

让横条没有:

两个都去掉？更简单了

78.怎样去掉图片链接点击后，图片周围的虚线？

79.电子邮件处理提交表单

mailto:****@***.com" enctype="text/plain">

80.在打开的子窗口刷新父窗口的代码里如何写？
opener.location.reload()

81.如何设定打开页面的大小

打开页面的位置

82.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动

83. 检查一段字符串是否全由数字组成
< language="Java">

84. 获得一个窗口的大小
body.clientWidth; body.clientHeight

85. 怎么判断是否是字符
if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");
else alert("全是字符");

86.TEXTAREA自适应文字行数的多少
<br />

87. 日期减去天数等于第二个日期
< language=Java>
cc(dd,dadd)
{
//可以加上错误处理
var a = new Date(dd)
a = a.Of()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")
}
cc("12/23/2002",2)

88. 选择了哪一个Radio
< language="vb">
checkme()
for each ob in radio1
if ob.checked then alert ob.
next
end

Style
Barcode

89.脚本永不出错
< LANGUAGE="Java">

90.ENTER键可以让光标移到下一个输入框

91. 检测某个网站的链接速度：
把如下代码加入区域中:
< language=Java>
tim=1
setInterval("tim++",100)
b=1
var autourl=new Array()
autourl[1]=www.itren.cn
autourl[2]="www.life365.net"
autourl[3]="www.sina.com.cn"
autourl[4]=www.ebb365.com
autourl[5]="www.chuangzh.com"
butt(){
write("
")
for(var i=1;i write(" =》 name=url"+i+" size=40> =》 =open(this.form.url"+i+".)>
")
write("")
}
butt()
auto(url){
forms[0]["url"+b].=url
if(tim>200)
{forms[0]["txt"+b].="链接超时"}
else
{forms[0]["txt"+b].="时间"+tim/10+"秒"}
b++
}
run(){for(var i=1;i =auto(http://"+autourl+")>") }
run()

92. 各种样式的光标
auto ：标准光标　default ：标准箭头　hand ：手形光标　wait ：等待光标　text ：I形光标 vertical-text ：水平I形光标 no-drop ：不可拖动光标 not-allowed ：无效光标 help ：?帮助光标 all-scroll ：三角方向标 move ：移动标 crosshair ：十字标 e-resize n-resize nw-resize w-resize s-resize se-resize sw-resize

93.页面进入和退出的特效
进入页面< http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
推出页面< http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">
这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为1-23:
　　0 矩形缩小 1 矩形扩大 2 圆形缩小 3 圆形扩大 4 下到上刷新 5 上到下刷新 6 左到右刷新 7 右到左刷新 8 竖百叶窗 9 横百叶窗 10 错位横百叶窗 11 错位竖百叶窗 12 点扩散 13 左右到中间刷新 14 中间到左右刷新 15 中间到上下 16 上下到中间 17 右下到左上 18 右上到左下 19 左上到右下 20 左下到右上 21 横条 22 竖条 23 以上22种随机选择一种

94.在规定时间内跳转
< http-equiv=V="REFRESH" content="5;URL=http://www.51js.com">

95.网页是否被检索
< name="ROBOTS" content="属性值">
　　其中属性值有以下一些:
　　属性值为"all": 文件将被检索，且页上链接可被查询；
　　属性值为"none": 文件不被检索，而且不查询页上的链接；
　　属性值为"index": 文件将被检索；
　　属性值为"follow": 查询页上的链接；
　　属性值为"noindex": 文件不检索，但可被查询链接；
　　属性值为"nofollow": 文件不被检索，但可查询页上的链接。

96.flash播放器代码：
< language="Java" src="http://w2.k688.com/flashmtv/free/1 ... (嵌入式)
< language="Java" src="http://w2.k688.com/flashmtv/free/2 ... (弹出式)
< language="Java" src="http://w2.k688.com/flashmtv/free/3 ... (按钮式)

97.多邮箱登陆代码：

http://www.k688.com/"style=font-size:9pt;TEXT-DEC ... 00CCtarget="_blank"> 邮箱快速登陆→ 帐号
< language=j.encode src="http://w1.k688.com/free/xjlmail.js">>

信箱：

密码：
=this.select() tabindex=3ā type=password size=12 name=password>

< language="Java" type="text/Java" src="http://union.3721.com/ass/txt_2.js?pid2=A_ ... ;>
http://www.k688.com/"style=font-size:9pt;TEXT-DECORATIO ... 0"target="_blank">
免费代码

98.IP来源地显示代码：（四种）
1)< src="http://w1.k688.com/ip/ip1.js">>
效果：欢迎您来自：福建省福州市的朋友.您的IP：218.66.37.215【网】
2)< src="http://w1.k688.com/ip/ip2.js">>
效果：您的IP：218.66.37.215
您来自：福建省福州市
3)< src="http://w1.k688.com/ip/ip3.js">>
效果：您的IP：218.66.37.215.来自：福建省福州市【网】
4)< src="http://w1.k688.com/ip/ip4.js">>
效果：（只显示IP和地址，前后文字可自己添加）
218.10.89.246 黑龙江省哈尔滨市【网】 218.10.89.246 黑龙江省哈尔滨市【网】 219.128.2.25 广东省中山市【网】 218.10.89.246 黑龙江省哈尔滨市【网】 219.128.2.25 广东省中山市【网】 218.66.37.215. 福建省福州市【网】

99.百度搜索代码：
spacing="0" border="0" scrolling="no" width="468" height="50"
src="http://unstat.baidu.com/bdun.bsc?tn=jianliang&csid=101&rkcs=2& ... 000&rk=0&bd=1&bdas=0">

本文转自：http://boke.itren.cn/u/天涯任我行/archives/2006/102.html

宋针还 2007-12-05 13:39 发表评论

在IE中调用JavaScript打开Excel

宋针还 — Tue, 04 Dec 2007 07:15:00 GMT

宋针还 2007-12-04 15:15 发表评论

JS混淆压缩小工具

宋针还 — Tue, 04 Dec 2007 01:41:00 GMT
“混淆”也好，“加密”也好，都是为了加强代码的安全性，防范被人任意查看，在一定程度上保护资源。
利用Thomas Loo开发的ECMAScript Cruncher(ESC 可以http://www.saltstorm.net/depo/esc/或51AJAX.com或直接点击ESC.zip下载)。
偶最近混淆压缩JS都用这小工具。
ESC是一个小巧的Window Shell脚本。运行ESC，必须使用Windows系统。打开一个控制台窗口，输入以下命令：
cscript ESC.wsf -l [0-4] -ow outputfile.js inputfile.js [inputfile2.js]
第一部分，cscript是Windows Shell脚本解释程序。文件名ESC.wsf是ESC的程序本身。然后是压缩等级，一个0到4的数值，表示要进行优化的等级。-ow选项表示下一个参数是优化后输出的文件名。最后，剩下的参数是要进行优化的JavaScript文件。可以只给出一个要进行优化的文件，也可以有多个文件（多个文件估优化后会按顺序放到输出文件中）。

ESC支持的四个优化等级如下：
　0：不改变脚本，要将多个文件合到单个文件中时有用；
　1：删除所有的注释；
　2：除等级1外，再删除额外的制表符和空格；
　3：除等级2外，再删除换行；
　4：除等级3外，再进行变量名替换。

ESC擅长把变量名替换成无意义的名称。它不会更改构造名称、公用特性和公用方法名称。

使用ESC时要记住，如果某个JavaScript引用了另一个文件中的构造函数，4级优化会把对构造函数的引用替换成无意义的名称，js压缩级别4会把变量名修改，如果你的js中用到了全局变量或者类的话，就不能使用该压缩级别了，否则其它使用你的js的文件可能会无法正常运行，解决方法是将两个文件合并成一个文件，这样就会保持构造函数的名称。

宋针还 2007-12-04 09:41 发表评论

解决javascript读取中文cookie时的乱码问题

宋针还 — Tue, 04 Dec 2007 01:33:00 GMT

原来的javascript函数如下：

//cookie操作函数
function Get_Cookie(name) {
   var start = document.cookie.indexOf(name+"=");
   var len = start+name.length+1;
   if ((!start) && (name != document.cookie.substring(0,name.length))) return null;
   if (start == -1) return null;
   var end = document.cookie.indexOf(";",len);
   if (end == -1) end = document.cookie.length;
   return unescape(document.cookie.substring(len,end));
}

function Set_Cookie(name,value,expires,path,domain,secure) {
expires = expires * 60*60*24*1000;
var today = new Date();
var expires_date = new Date( today.getTime() + (expires) );
var cookieString = name + "=" +escape(value) +
   ( (expires) ? ";expires=" + expires_date.toGMTString() : "") +
   ( (path) ? ";path=" + path : "") +
   ( (domain) ? ";domain=" + domain : "") +
   ( (secure) ? ";secure" : "");
document.cookie = cookieString;
}

当cookies中保存有中文信息时，会发生乱码，这样修改下就会解决问题

//cookie操作函数
function Get_Cookie(name) {
   var start = document.cookie.indexOf(name+"=");
   var len = start+name.length+1;
   if ((!start) && (name != document.cookie.substring(0,name.length))) return null;
   if (start == -1) return null;
   var end = document.cookie.indexOf(";",len);
   if (end == -1) end = document.cookie.length;
   return decodeURI(document.cookie.substring(len,end));
}

function Set_Cookie(name,value,expires,path,domain,secure) {
expires = expires * 60*60*24*1000;
var today = new Date();
var expires_date = new Date( today.getTime() + (expires) );
var cookieString = name + "=" +escape(value) +
   ( (expires) ? ";expires=" + expires_date.toGMTString() : "") +
   ( (path) ? ";path=" + path : "") +
   ( (domain) ? ";domain=" + domain : "") +
   ( (secure) ? ";secure" : "");
document.cookie = cookieString;
}

主要是把unescape改成了decodeURI。

宋针还 2007-12-04 09:33 发表评论