注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

云之南

风声,雨声,读书声,声声入耳;家事,国事,天下事,事事关心

 
 
 

日志

 
 
关于我

专业背景:计算机科学 研究方向与兴趣: JavaEE-Web软件开发, 生物信息学, 数据挖掘与机器学习, 智能信息系统 目前工作: 基因组, 转录组, NGS高通量数据分析, 生物数据挖掘, 植物系统发育和比较进化基因组学

网易考拉推荐

非常不错的Javascript脚本  

2007-05-27 15:41:17|  分类: java-j2ee |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

<!--
function document.onkeydown(){
event.keyCode = 0;
event.returnvalue = false;
}
-->
</script>

1.2 屏蔽鼠标右键

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

或者

<script language="javascript">
<!--
function document.oncontextmenu()
{
return false;
}
-->
</script>

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

或者

<body oncontextmenu= "nocontextmenu()">

<script language="javascript">
<!--
function rclick()
{
if(document.all) {
if (event.button == 2){
event.returnvalue=false;
}
}
}
-->
</script>


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

<script language="javascript">
<!--
//屏蔽鼠标右键、Ctrl+N、Shift+F10、F5刷新、退格键
function window.onhelp(){return false} //屏蔽F1帮助
function KeyDown(){
if ((window.event.altKey)&&
((window.event.keyCode==37)|| //屏蔽 Alt+ 方向键 ←
(window.event.keyCode==39))){ //屏蔽 Alt+ 方向键 →
alert("不准你使用ALT+方向键前进或后退网页!");
event.returnvalue=false;
}

/* 注:这还不是真正地屏蔽 Alt+ 方向键,
因为 Alt+ 方向键弹出警告框时,按住 Alt 键不放,
用鼠标点掉警告框,这种屏蔽方法就失效了。以后若
有哪位高手有真正屏蔽 Alt 键的方法,请告知。*/

if ((event.keyCode == 8) &&
(event.srcElement.type != "text" &&
event.srcElement.type != "textarea" &&
event.srcElement.type != "password") || //屏蔽退格删除键
(event.keyCode ==116)|| //屏蔽 F5 刷新键
(event.ctrlKey && event.keyCode==82)){ //Ctrl + R
event.keyCode=0;
event.returnvalue=false;
}
if ((event.ctrlKey)&&(event.keyCode==78)) //屏蔽 Ctrl+n
event.returnvalue=false;
if ((event.shiftKey)&&(event.keyCode==121)) //屏蔽 shift+F10
event.returnvalue=false;
if (window.event.srcElement.tagName == "A" && window.event.shiftKey)
window.event.returnvalue = false; //屏蔽 shift 加鼠标左键新开一网页
if ((window.event.altKey)&&(window.event.keyCode==115)){ //屏蔽Alt+F4
window.showModelessDialog("about<!--
window.open(www.32pic.com,"32pic","fullscreen=3,height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
-->
</script>

注:在body标签里加上onbeforeunload="javascript<!--
function document.onkeydown()
{
if ( event.keyCode==116)
{
event.keyCode = 0;
event.cancelBubble = true;
return false;
}
}
-->
</script>

1.6屏蔽IE后退按钮

在你链接的时候用 <a href="javascript<!--
function CheckForm()
{
if (document.form.name.value.length == 0) {
alert("请输入您姓名!");
document.form.name.focus();
return false;
}
return true;
}
-->
</script>

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

<script language="javascript">
<!--
function CheckForm()
if (document.form.PWD.value != document.form.PWD_Again.value) {
alert("您两次输入的密码不一样!请重新输入.");
document.ADDUser.PWD.focus();
return false;
}
return true;
}
-->
</script>

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

<script language="javascript">
<!--
function isNumber(String)
{
var Letters = "1234567890-"; //可以自己增加可输入值
var i;
var c;
if(String.charAt( 0 )=='-')
return false;
if( String.charAt( String.length - 1 ) == '-' )
return false;
for( i = 0; i < String.length; i ++ )
{
c = String.charAt( i );
if (Letters.indexOf( c ) < 0)
return false;
}
return true;
}
function CheckForm()
{
if(! isNumber(document.form.TEL.value)) {
alert("您的电话号码不合法!");
document.form.TEL.focus();
return false;
}
return true;
}
-->
</script>


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

<script language="javascript">
<!--
function CheckForm()
{
if (document.form.count.value > 100 || document.form.count.value < 1)
{
alert("输入数值不能小于零大于100!");
document.form.count.focus();
return false;
}
if (document.form.MESSAGE.value.length<10)
{
alert("输入文字小于10!");
document.form.MESSAGE.focus();
return false;
}
return true;
}
//-->
</script>

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

<SCRIPT LANGUAGE="javascript">
<!--

function isEnglish(name) //英文值检测
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charCodeAt(i) > 128)
return false;
}
return true;
}

function isChinese(name) //中文值检测
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charCodeAt(i) > 128)
return true;
}
return false;
}

function isMail(name) // E-mail值检测
{
if(! isEnglish(name))
return false;
i = name.indexOf("@");
j = name.lastIndexOf("@");
if(i == -1)
return false;
if(i != j)
return false;
if(i == name.length)
return false;
return true;
}

function isNumber(name) //数值检测
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charAt(i) < "0" || name.charAt(i) > "9")
return false;
}
return true;
}

function CheckForm()
{
if(! isMail(form.Email.value)) {
alert("您的电子邮件不合法!");
form.Email.focus();
return false;
}
if(! isEnglish(form.name.value)) {
alert("英文名不合法!");
form.name.focus();
return false;
}
if(! isChinese(form.cnname.value)) {
alert("中文名不合法!");
form.cnname.focus();
return false;
}
if(! isNumber(form.PublicZipCode.value)) {
alert("邮政编码不合法!");
form.PublicZipCode.focus();
return false;
}
return true;
}
//-->
</SCRIPT>

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

<script language="javascript">
<!--

function contain(str,charset)// 字符串包含测试函数
{
var i;
for(i=0;i<charset.length;i++)
if(str.indexOf(charset.charAt(i))>=0)
return true;
return false;
}

function CheckForm()
{
if ((contain(document.form.NAME.value, "%\(\)><")) || (contain(document.form.MESSAGE.value, "%\(\)><")))
{
alert("输入了非法字符");
document.form.NAME.focus();
return false;
}
return true;
}
//-->
</script>
常用js验证码
 
李明锋 发表于 2006-5-12 17:37:00 

 

 
 常用js验证码
1。onabort(ns3,ns4,ie4):当用户终止正在打开的网页时产生该事件。
2。onblur(ns3,ns4,ie3,ie4):某元素失去活动焦点时产生该事件。例如鼠标在文本框中点击后又在文本框外点击时就会产生。
3。onchange(ns3,ns4,ie3,ie4):当网页上某元素的内容发生改变时产生。例如在文本框中输入文本后又在文本框外点击时就会产生。
4。onclick(ns3,ns4,ie3,ie4)单击网页上的某元素时产生
5。ondblclick(ns4,ie4):双击网页上的元素时产生
6。onerror(ns3,ns4,ie4):浏览器在打开网页的过程中发生错误时产生该事件
7。onfinish(ie4):滚动文本条中的文本完成一次滚动时产生的事件
8。onfocus(ns3,ns4,ie3,ie4)网页上的元素获得焦点时产生该事件
9。onkeydown(ns4,ie4)按下任意键时产生该事件
10。onkeypress(ns4,ie4)按下任意键时并释放该键产生的事件
11。onkeyup(ns4,ie4)释放按下的按键产生该事件
12。onload(ns3、4,ie3、4)网页或图象调入完成后产生该事件
13。onmousedown(ns4,ie4)在网页的某元素上按下鼠标时产生该事件
14。onmousemove(ie3、4)在网页的某元素上移动鼠标时产生该事件
15。onmouseout(ns3、4,ie4)从网页的某元素移出鼠标时产生该事件
16。onmouseover(ns3、4,ie3、4)鼠标移入网页的某元素时产生该事件
17。onmouseup(ns4,ie4)释放按下的鼠标时产生该事件
18。onreset(ns3、4,ie3、4)复位表格时产生该事件
19。onresize(ns4,ie4)改变浏览器时产生该事件
20。onselect(ns3、4,ie3、4)选择文本框中的文本时产生该事件
21。onstart(ie4)滚动文本条中的文本开始滚动时产生该事件
22。onsubmit(ns3、4,ie3、4)提交表单时产生该事件
23。onunload(ns3、4,ie3、4)从当前的网页退出时产生该事件


马上出现的alt

<style>div {filter: Alpha(Opacity=70, FinishOpacity=70, Style=2, StartX=0, StartY=0, FinishX=100, FinishY=100);}</style>
<img src="/oblog/icon/popoever.jpg" hint="泡泡哥">
<img src="/oblog/icon/poorfish.gif" hint="高僧一个,当和尚太可惜了">
<img src="/oblog/icon/admin.gif" hint="my哥哥">
<div style="visibility:hidden;border:1px solid #000000;background-color:#FFFFCC;font-size:12px;;" >测试完毕...
<script>
document.body.onmousemove=quickalt;
function quickalt() {
if(event.srcElement.hint && event.srcElement.hint!='') {
altlayer.style.visibility='visible';
altlayer.style.left=event.x+10;
altlayer.style.top=event.y+10;
altlayer.innerHTML=event.srcElement.hint}
else altlayer.style.visibility='hidden';}
</script>


只能输入数字(方法一)

<script language=javascript>
function onlyNum()
{
if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
event.returnValue=false;
}
</script>

<input >


只能输入数字(方法二)

<input event.keyCode>=48&&event.keyCode<=57" onpaste="return !clipboardData.getData('text').match(/\D/)" style="ime-mode:Disabled" ondragenter="return false">


只能输入数字(方法三)

<script>
function check(){
if (isNaN(tt.value))
{alert("非法字符!");
tt.value="";}
}
</script>
<input type="text" >


限制textarea多行输入框的字数

<textarea this.value=this.value.substring(0, 8)" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').substring(0, 8))">


验证表单——不能超过设置字数

<script>
function test()
{
if(document.a.b.value.length>50)
{
alert("不能超过50个字符!");
document.a.b.focus();
return false;
}
}
</script>
<form test()">
<textarea cols="40" wrap="VIRTUAL" rows="6"></textarea>
<input type="submit" value="check">
</form>

 

验证表单——只能是汉字

<input /oblog/value.replace(/["^\一-\龥]/g,'')">


验证表单——只能是英文字符

<script language=javascript>
function onlyEng()
{
if(!(event.keyCode>=65&&event.keyCode<=90))
event.returnValue=false;
}
</script>

<input >


验证表单——屏蔽关键字(sex , fuck)

<script language="JavaScript1.2">
function test() {
if((a.b.value.indexOf ("sex") == 0)||(a.b.value.indexOf ("fuck") == 0)){
alert("五讲四美三热爱");
a.b.focus();
return false;}
}
</script>
<form test()">
<input type=text ><input type="submit" value="check">
</form>


验证表单——验证为email格式

<SCRIPT LANGUAGE=Javascript RUNAT=Server>
function isEmail(strEmail) {
if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
return true;
else
alert("oh");
}
</SCRIPT>
<input type=text >

 

css控制checkbox、select的边框不显示

一、<input type=checkbox style=";clip: rect(5 16 16 5)">
二、<input type=checkbox style=";clip: rect(6 17 17 6)">
三、<select style=";clip: rect(2 50 30 2)">
<option>111111</option>
<option>222222</option>
<option>333333</option>
<option>444444</option>
</select>


复选框通常都不需要直接点选,点旁边的文字就行

<label for="box">点这里的文字看看!<input type=checkbox style=";clip: rect(6 15 15 6)" >


用Label标签还可以让像软件一样使用热键

<label for="box" accesskey="D"><u><b>D</b></u>issplay Username 显示用户名<input type=checkbox style=";clip: rect(6 17 17 6)" >


在标题栏上显示版权tm

<title>LEGENDRY_________&#8482;</title>


随机播放背景音乐

<script language="JavaScript">
<!--
var sound=new Array();
sound[0]="1.mid";
sound[1]="2.mid";
sound[2]="3.mid";
sound[3]="4.mid";
sound[4]="5.mid";
sound[5]="6.mid";
sound[6]="7.mid";
var x=Math.round(Math.random()*6);
if(navigator.appName=="Microsoft Internet Explorer") {
document.write("<BGSOUND src='" + sound[x] + "' loop='-1'><br>") ;
document.write("现在正在播放第"+(x+1)+"首乐曲");
}
//-->
</script>


网页背景颜色渐变

<body style="FILTER: progid:DXImageTransform.Microsoft.Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100); BACKGROUND-COLOR: skyblue">


点击图片链接时不显示虚线框

<a href=# ><img src="/oblog/XXX.gif" border=0></a>

<a href=#### hidefocus=true><img src="/oblog/XXX.gif" border=0></img></a>


验证两次输入密码不同的JS

<FORM METHOD=POST ACTION="">
<input type="password" >
<input type="password" >
<input type="button" value="test" >
</FORM>
<script>
function check()
{
with(document.all){
if(input1.value!=input2.value)
{
alert("false")
input1.value = "";
input2.value = "";
}
else document.forms[0].submit();
}
}
</script>

 

标题栏文字打字效果

<SCRIPT language=JavaScript>
var arr=["█ 欢","■ 欢迎","█ 欢迎光","■ 欢迎光临"],i=0
setInterval("if(i>=arr.length)i=0;document.title=arr[i++]",300);
</SCRIPT>

 

数字转换为大写

<script language="JScript">
arr=["零","壹","贰","叁","肆","伍","陆","柒","捌","玖"];
function go(){
tmp=cinput.value;
for(i=0;i<arr.length;i++)tmp=tmp.replace(new RegExp(i,"gi"),arr[i]);
oinput.value=tmp;
}
</script>
输入:<input (event.keyCode>=48&&event.keyCode<=57)" value=31415926>
<br>
输出:<input >
<br>
<input type="button" value="确定" >

[推荐]经典网页代码25例 希望加精
01.下载flash我的三种方法:
--查看源文件,找出flash的绝对路径,复制,在flashget(或蚂蚁)中点任务
,然后点新建下载任务即可。
--在IE的临时文件夹Temporary Internet Files里把所有的东西都删掉,然后

刷新你想要下载flash的网页,即可得到你所要的flash
--使用外部软件,推荐使用Flash Catcher,安装后只需在你所要下载的flash上右键,save即可。


02.让你的网页无法另存为
<noscript><iframe src="/oblog/*>";</iframe></noscript>

03.让IFRAME框架内的文档的背景透明
<iframe src="about:<body style='background:transparent'>"

allowtransparency></iframe>

04.禁止右键:
<body oncontextmenu="return false" ondragstart="return false"

onselectstart ="return false"

oncopy="document.selection.empty()" onbeforecopy="return
false">

05.进入页面后立即自动刷新?
<meta http-equiv="refresh"

content="120;url=http://www.wodutom.com/cn083">
http://www.wodutom.com/cn083,这是你自己的网址。

06.打开窗口即最大化
<script language="javascript">
<!-- Begin
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
// End -->
</script>

防止外部递交:
server_v1=Cstr(Request.ServerVariables("HTTP_REFERER"))
server_v2=Cstr(Request.ServerVariables("SERVER_NAME"))
if mid(server_v1,8,len(server_v2))<>server_v2 then
response.write "<br><br><center><table border=1 cellpadding=20 bordercolor=black bgcolor=#EEEEEE width=300>"
response.write "<tr><td style='font:9pt Verdana'>"
response.write "请不要从站点外部提交数据!"
response.write"<input type=submit "" button"" value=""返 回"">"
response.write "</td></tr></table>"
response.write"</center>"
response.end
end if


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

08.加入背景音乐
<bgsound src="mid/windblue[1].mid" loop="-1"> 只适用于IE

<embed src="music.mid" autostart="true" loop="true" hidden="true">

对Netscape ,IE 都适用

09.嵌入网页
<iframe src="/oblog/01a.html" width="450" height="287"

scrolling="Auto" frameborder="0"></iframe>

10.跳转
<meta http-equiv="refresh" content="3;URL=list.htm">

11.滚动
<MARQUEE direction=up height=146 >

onmouseover=stop()
scrollAmount=4></marquee>

12.细线分隔线
<hr noshade size=0 color=#C0C0C0>

13.过度方式
<meta 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 随机产生一种过渡方式


15.如何控制横向和纵向滚动条的显隐?
<body style="overflow-y:hidden"> 去掉x轴
<body style="overflow-x:hidden"> 去掉y轴
<body scroll="no">不显

16.怎样在 FrontPage2000 中加入 Flash 动画?
在 FrontPage2000 中,点击[插入]->[高级]->[插件],在弹出的窗口中,设置

一下 Flash 文件的大小及其它信息,确定即可。

17.加入注释的格式是:    
〈!-[注释内容…]--〉


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


19.定义本网页关键字,可以在〈Head〉〈/Head〉中加入如下代码:  
〈meta content="china,enterprise,business,net"〉   
Content 中所包含的就是关键字,你可以自行设置。   
这里有个技巧,你可以重复某一个单词,这样可以提高自己网站的排行位置,如:
〈meta content="china,china,china,china"〉

20.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


21.添加到收藏夹:
〈a href=">

');"〉添加到收藏夹〈/a〉

22.设为首页:
〈a href=#

onclick=this.style.behavior='url(#default#homepage)';this.setHomePage

('

23.定制浏览器地址栏前的小图标:
A:在网页的〈head〉〈/head〉间加入以下语句:〈link rel="shortcuticon"

href="http://…/icon.ico"〉即可。其中 icon.ico 为 16x16 的图标文件,

颜色不要超过 16 色。

24.把滚动条放在浏览器窗口的左边
A:在 <body> 中加 dir=RTL,即 <body dir=RTL>。

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


最全的表格代码应用[精华]
1.表格的分隔线可以隐藏
<table border rules=cols cellspacing=0 align=left> 可以隐藏横向的分隔线
<table border rules=rows cellspacing=0 align=right>可以隐藏纵向的分隔线

<table border rules=none cellspacing=0 align=center>可以隐藏横向和纵向的分隔线


2.表格的边框不断在闪

以下方法可以令表格的边框不断在闪,很实用的
在BODY区加上

<table border="0" width="280"
style="border:5px solid yellow">

<tr>

<td>加入任意的物件.加入任意的物件.

<br>加入任意的物件.加入任意的物件.

<br>加入任意的物件.加入任意的物件.</td>

</tr>

</table>

<script language="JavaScript1.2">

<!--

function flashit(){

if (!document.all)

return

if (myexample.style.borderColor=="yellow")

myexample.style.borderColor="lime"

else

myexample.style.borderColor="yellow"

}

setInterval("flashit()", 500)

//-->

</script>


3.表格分行下载

这个对表格内容很大比较实用

在需要分行下载处加上 <tbody >

比如:
<table >
<tbody >
<tr >
<td >flsdjfsdjfkdsjf</td >
</tr >
<tr >
<td >skdjfsdjfksd</td >
</tr >
</tbody >

<tbody >
<tr >
<td >flsdjfsdjfkdsjf</td >
</tr >
<tr >
<td>skdjfsdjfksd</td >
</tr >
</tbody >
</table >

4.几种样式不同的表格

<table border="1" width="220" style="; left:
11; top: 11" height="26" >

<tr>

<td width="100%">普通表格</td>

</tr>

</table>

5.正立方表格

<table border="1" width="220" bordercolorlight="#eeeeee"
bordercolordark="#000000" style="; left: 10; top:
49" height="26">

<tr>

<td width="100%">正立方表格</td>

</tr>

</table>


6.细表格

<table border="0" frame=vsides width="219"
bgcolor="#000000" cellspacing="1" cellpadding="0"
height="22" style="; left: 11; top: 86">

<tr bgcolor="#FFFFFF">

<td width="100%" height="2">细表格</td>

</tr>

</table>

7.立体表格

<table border="1" width="220" bordercolorlight="#ffffff"
bordercolordark="#ffffff" style="; left: 10; top:
112" height="34">

<tr>

<td width="100%" bgcolor="#B7B7B7"
bordercolorlight="#000000" bordercolordark="#eeeeee" >立体表格</td>

</tr>

</table>


8.无名表格

<table width="220" align="center" style=";
left: 246; top: 12" height="51">

<tr>

<td><fieldset style="width:220" align="center">
<legend> 无名表格 </legend>  <p align="right"> </fieldset>
<br>

</td>

</tr>

</table>

9.表中表效果Ⅱ

<table width="220" align="center" style=">absolute; left: 245; top: 89" height="110">
<tr>
<td height="75"><fieldset style="width:220"
align="center"> <legend> 表中表效果Ⅱ </legend> <table
frame="hsides" border="1"
bordercolorlight="#000000" bordercolordark="#ffffff"
width="100%" cellspacing="1" cellpadding="0" height="78">
<tr bgcolor="#ffffff">
<td width="100%" height="76"></fieldset></td>
</tr>
</table>

10.表中表效果Ⅰ

<table width="220" align="center" style=";
left: 10; top: 120" height="138" cellspacing="1"
cellpadding="0">

<tr>

<td height="126"><fieldset style="width: 220; color: #B7B7B7;
border-style: groove" align="center"> <legend style="color:
#FFFFFF; border: 1 solid #808080" > <font color="#000000">表中表效果Ⅰ</font>
</legend>  <p align="right"> </fieldset>

</td>

</tr>

</table>

11.表格中边框的显示


只显示上边框 <table frame=above>
只显示下边框 <table frame=below>
只显示左、右边框 <table frame=vsides>
只显示上、下边框 <table frame=hsides>
只显示左边框 <table frame=lhs>
只显示右边框 <table frame=rhs>
不显示任何边框 <table frame=void>
12不能输入中文字符
function checkChinese(para){
   for(i=0;i<para.length;i++){
   if(para.charCodeAt(i)>128){
   alert("本单元格不能输入中文!");
   return false;
    }
   }
    return true;
}
如下:
 <TD >传真<font color="red">*</font></TD>
 <TD><html:text property="fax"  style="width:180px;" maxlength="25" checkChinese(this.value)"/> </TD>

12 非常好用的javaScript树形菜单(DIV) 
<HTML>

<head>
<meta http-equiv="Content-Type" content="text/html" charset="gb2312">
<link rel="stylesheet" href="css\lanbao.css" type="text/css">
<SCRIPT LANGUAGE=javascript src="/check.js>";
<!--

function KB9Parent_onmouseover() {

}

//-->
</SCRIPT>
</HEAD>

<BODY >
<SCRIPT LANGUAGE=javascript>
<!--
document.onmousedown =Click;
//-->
</SCRIPT>

<TABLE WIDTH="120" style="HEIGHT: 61px; WIDTH: 111px">
<tr >
<td align="left" >兰宝集团</td>
<tr height=20></tr>
</TABLE>
<SCRIPT LANGUAGE=javascript>
<!--
NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
ver4 = (NS4 || IE4) ? 1 : 0;
/*function expandIt(el,index) {
menu(index);
if (!ver4) return;
if (IE4) {
whichEl = eval(el + "Child");
if (whichEl.style.display == "none") {
whichEl.style.display = "block";
}
else {
whichEl.style.display = "none";
}
}
else {
whichEl = eval("document." + el + "Child");
if (whichEl.visibility == "hide") {
whichEl.visibility = "show";
}
else {
whichEl.visibility = "hide";
}
arrange();
}
}*/

function expandIt(index){
var menuitem=new Array()
menuitem[1]=KB9Child
menuitem[2]=KB1Child
menuitem[3]=KB2Child
menuitem[4]=KB3Child
menuitem[5]=KB4Child
menuitem[6]=KB5Child

//对id=树的父节点进行操作
if (menuitem[index].style.display=="block"){
displayall()
}
else {
displayall()
menuitem[index].style.display="block"
}
}

function displayall(){

KB9Child.style .display ="none"
KB1Child.style .display ="none"
KB2Child.style .display ="none"
KB3Child.style .display ="none"
KB4Child.style .display ="none"
KB5Child.style .display ="none"
}
function arrange() {
nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height;
for (i=firstInd+1; i<document.layers.length; i++) {
whichEl = document.layers;
if (whichEl.visibility != "hide") {
whichEl.pageY = nextY;
nextY += whichEl.document.height;
}
}
}
function initIt(){
if (!ver4) return;
if (NS4) {
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers;
if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
}
arrange();
}
else {
divColl = document.all.tags("DIV");//在IE下找到“DIV”tag,然后对className = “child”的tag进行操作
for (i=0; i<divColl.length; i++) {
whichEl = divColl(i);
if (whichEl.className == "child") whichEl.style.display = "none";
}
}
}
onload = initIt;//初始化使“树”处于“合”的状态
//-->
</SCRIPT>

<table border=0 width="120">
<DIV ><A href="#" return false"><font color=Black size=4>●设&nbsp;&nbsp;置</font></A>
</DIV>
<div >
&nbsp;&nbsp;<A href="midright.asp" target=right>客&nbsp;&nbsp;户</A><BR>
&nbsp;&nbsp;<A href="midright1.asp" target=right>存&nbsp;&nbsp;货</A><BR>
&nbsp;&nbsp;<A href="midright2.asp" target=right>供&nbsp;应&nbsp;商</A><BR>
&nbsp;&nbsp;<A href="/userright.asp" target=right>设置用户权限</A><BR>
&nbsp;&nbsp;<A href="/dptmaintain.asp" target=right>部门维护</A></div>

<DIV><A href="#" return false"><font color=black size=4>●单&nbsp;&nbsp;据</font></A>
</DIV>
<div >
&nbsp;&nbsp;<A href="produceplan.asp" target=right>生产计划(总)</A><BR>
&nbsp;&nbsp;<A href="/colligatequery.asp" target=right>综合查询</A></div>

<DIV href="#" return false"><font color=black size=4>●销售管理</font></A>
</DIV>
<div >
&nbsp;&nbsp;<A href="/shopcompact.asp" target=right>销售合同录入</A><BR>
&nbsp;&nbsp;<A href="/shopcompactquery.asp" target=right>销售合同查询</A><BR>
&nbsp;&nbsp;<A href="/guestlink.asp" target=right>客户联系表</A><BR>
&nbsp;&nbsp;<A href="/shopdo.asp" target=right>销售处理</A></div>

<DIV ><A href="#" return false"><font color=black size=4>●采购管理</font></A>
</DIV>
<div >
&nbsp;&nbsp;<A href="/buyplan.asp" target=right>采购计划</A><BR>
&nbsp;&nbsp;<A href="/buycompact.asp" target=right>采购合同录入</A><BR>
&nbsp;&nbsp;<A href="/buycompactquery.asp" target=right>采购合同查询</A><BR>
&nbsp;&nbsp;<A href="providertable.asp" target=right>供应商联系表</A></div>

<DIV ><A href="#" return false"><font color=black size=4>●库存管理</font></A>
</DIV>
<div >
&nbsp;&nbsp;<A href="/stockinput.asp" target=right>原材料入库</A><BR>
&nbsp;&nbsp;<A href="productinputjudge.asp" target=right>成品入库</A><BR>
&nbsp;&nbsp;<A href="/stockquery.asp" target=right>物品明细查询</A><BR>
&nbsp;&nbsp;<A href="/stockproductcount.asp" target=right>物品数量查询</A><BR>
&nbsp;&nbsp;<A href="/stockoutjudge.asp" target=right>物品出库</A><BR>
&nbsp;&nbsp;<A href="/stockmove.asp" target=right>移库操作</A></div>

<DIV><A href="#" return false"><font color=black size=4>●其&nbsp;&nbsp;它</font></A>
</DIV>
<div >
&nbsp;&nbsp;<A href="/editpass.asp" target=right>更改密码</A><BR>
&nbsp;&nbsp;<A href="messegeboard.htm" target=right>留言板</A><BR>
&nbsp;&nbsp;<A href="help.htm" target=right>帮&nbsp;&nbsp;助</A><BR>
&nbsp;&nbsp;<A href="/out.asp" target=_top>退&nbsp;&nbsp;出</A></div>
</table>

</BODY>

13 树形菜单
<script language="JavaScript">
NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
ver4 = (NS4 || IE4) ? 1 : 0;

if (ver4) {
    with (document) {
        write("<STYLE TYPE='text/css'>");
        if (NS4) {
            write(".parent {; visibility:visible}");
            write(".child {; visibility:visible}");
            write(".regular {; visibility:visible}")
        }
        else {
            write(".child {display:none}")
        }
        write("</STYLE>");
    }
}

function getIndex(el) {
    ind = null;
    for (i=0; i<document.layers.length; i++) {
        whichEl = document.layers[i];
        if (whichEl.id == el) {
            ind = i;
            break;
        }
    }
    return ind;
}

function arrange() {
    nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height;
    for (i=firstInd+1; i<document.layers.length; i++) {
        whichEl = document.layers[i];
        if (whichEl.visibility != "hide") {
            whichEl.pageY = nextY;
            nextY += whichEl.document.height;
        }
    }
}

function initIt(){
    if (!ver4) return;
    if (NS4) {
        for (i=0; i<document.layers.length; i++) {
            whichEl = document.layers[i];
            if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
       }
        arrange();
    }
    else {
        divColl = document.all.tags("DIV");
        for (i=0; i<divColl.length; i++) {
            whichEl = divColl(i);
            if (whichEl.className == "child") whichEl.style.display = "none";
        }
    }
}

function expandIt(el) {
    if (!ver4) return;
    if (IE4) {
        whichEl = eval(el + "Child");
        if (whichEl.style.display == "none") {
            whichEl.style.display = "block";
        }
        else {
            whichEl.style.display = "none";
        }
    }
    else {
        whichEl = eval("document." + el + "Child");
        if (whichEl.visibility == "hide") {
            whichEl.visibility = "show";
        }
        else {
            whichEl.visibility = "hide";
        }
        arrange();
    }
}
onload = initIt;
</script>
        </font></p>
      <div >    <a href="#" KB1'); return false" ><img src="http://goshyboy.com/js/img/plus.gif" border=0>文件夹一</a></div>
      <div >     <a href="sample.htm" target="_blank" ><img src="http://goshyboy.com/js/img/spacer.gif"  border=0 alt=""><img src="http://goshyboy.com/js/img/open.gif"  border=0>页面一</a><br>
             <a href="sample.htm" target="_blank" ><img src="http://goshyboy.com/js/img/spacer.gif"  border=0 alt="" width="15" height="11"><img src="http://goshyboy.com/js/img/open.gif"  border=0>页面二</a><br>
             <a href="sample.htm" target="_blank" ><img src="http://goshyboy.com/js/img/spacer.gif"  border=0 alt="" width="15" height="11"><img src="http://goshyboy.com/js/img/open.gif"  border=0>页面三</a></div>
      <div >    <a href="#" KB2'); return false" ><img src="http://goshyboy.com/js/img/plus.gif" border=0>文件夹二</a></div>
      <div >     <a href="sample.htm" target="_blank" ><img src="http://goshyboy.com/js/img/spacer.gif"  border=0 alt="" width="15" height="11"><img src="http://goshyboy.com/js/img/open.gif"  border=0>页面一</a><br>
             <a href="sample.htm" target="_blank" ><img src="http://goshyboy.com/js/img/spacer.gif"  border=0 alt=""><img src="http://goshyboy.com/js/img/open.gif"  border=0>页面二</a><br>
             <a href="sample.htm" target="_blank" ><img src="http://goshyboy.com/js/img/spacer.gif"  border=0 alt="" width="15" height="11"><img src="http://goshyboy.com/js/img/open.gif"  border=0>页面三</a></div>
      <div >    <a href="#" KB3'); return false" ><img src="http://goshyboy.com/js/img/plus.gif"  border=0>文件夹三</a></div>
      <div >      <a href="sample.htm" target="_blank" ><img src="http://goshyboy.com/js/img/spacer.gif"  border=0 alt=""><img src="http://goshyboy.com/js/img/open.gif"  border=0>页面一</a><br>
              <a href="sample.htm" target="_blank" ><img src="http://goshyboy.com/js/img/open.gif"  border=0>页面二</a><br>
             <a href="sample.htm" target="_blank" ><img src="http://goshyboy.com/js/img/spacer.gif"  border=0 alt=""><img src="http://goshyboy.com/js/img/open.gif"  border=0>页面三</a></div>
      <script language="JavaScript">
if (NS4) {
        firstEl = "KB1Parent";
        firstInd = getIndex(firstEl);
        arrange();
}
</script>
源程序讲解:
NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
ver4 = (NS4 || IE4) ? 1 : 0;
声明几个变量。当用户的浏览器是IE时,变量IE4的值为1,当用户的浏览器是Netscape时,变量NS4的值为1,当用户的浏览器是IE或是Netscape时,变量ver4的值为1。
if (ver4)
{ with (document)
{write("<STYLE TYPE='text/css'>");
if (NS4) {
write(".parent{; visibility:visible}");
write(".child {; visibility:visible}");
write(".regular {; visibility:visible}") }
else { write(".child {display:none}") }
write("</STYLE>");
} }
这段代码相当于一个样式,定义各个层的位置及显示状态
function getIndex(el)
{ ind = null;
for (i=0; i<document.layers.length; i++)
{ whichEl = document.layers[i];
if (whichEl.id == el)
{ ind = i; break; } }
return ind; }
定义一个函数getIndex,功能是获得变量ind的值。

function arrange()
{ nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height;
for (i=firstInd+1; i<document.layers.length; i++)
{ whichEl = document.layers[i];
if (whichEl.visibility != "hide")
{ whichEl.pageY = nextY; nextY += whichEl.document.height; } } }


定义一个函数arrange(),功能就是定义一下页面上元素的位置。当菜单打开时,页面上菜单以下的东西的位置顺序往下推,菜单合起时,菜单以下的东西自动上移。

function initIt()
{ if (!ver4) return;
if (NS4) { for (i=0; i<document.layers.length; i++)
{ whichEl = document.layers[i];
if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide"; }
arrange(); }
else { divColl = document.all.tags("DIV");
for (i=0; i<divColl.length; i++)
{ whichEl = divColl(i);
if (whichEl.className == "child")
whichEl.style.display = "none"; } } }


定义函数initIt(),页面载入时,首先调用该函数。功能是初始化菜单,让页面载入时,菜单处于未打开状态。

function expandIt(el) {
if (!ver4) return;
if (IE4) { whichEl = eval(el + "Child");
if (whichEl.style.display == "none") { whichEl.style.display = "block"; }
else { whichEl.style.display = "none"; } }
else { whichEl = eval("document." + el + "Child");
if (whichEl.visibility == "hide")
{ whichEl.visibility = "show"; }
else { whichEl.visibility = "hide"; } arrange(); } }
onload = initIt;

定义一个函数expandIt(el)。由于层的可见状态在IE浏览器和NetScape浏览器中的解释是不同的,所以要分别讨论,判断菜单的状态。如果菜单是打开的,那么当再点击时,子菜单就不可见;如果菜单是关闭状态,那么当再点击时,子菜单就可见。

<div >
<a href="#" KB1'); return false" >
<img src="img/plus.gif" border=0>文件夹一</a></div>
。。。
<a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt=""><img src="img/open.gif" border=0>页面三</a>

这一部分是页面上所显示的部分,包括那些形象的小“文件夹”图标,和文字。

<script language="JavaScript">
if(NS4){ firstEl = "KB1Parent";
firstInd = getIndex(firstEl);
arrange(); }
</script>

如果用户的浏览器是NetScape,先初始化一下变量。

附:JavaScript语法——style.display 属性

语法:

display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group

参数:

block :  CSS1 块对象的默认值。用该值为对象之后添加新行
none :  CSS1 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline :  CSS1 内联对象的默认值。用该值将从对象中删除行
compact :  CSS2 分配对象为块对象或基于内容之上的内联对象
marker :  CSS2 指定内容在容器对象之前或之后。要使用此参数,对象必须和:after及:before 伪元素一起使用
inline-table :  CSS2 将表格显示为无前后换行的内联对象或内联容器
list-item :  CSS1 将块对象指定为列表项目。并可以添加可选项目标志
run-in :  CSS2 分配对象为块对象或基于内容之上的内联对象
table :  CSS2 将对象作为块元素级的表格显示
table-caption :  CSS2 将对象作为表格标题显示
table-cell :  CSS2 将对象作为表格单元格显示
table-column :  CSS2 将对象作为表格列显示
table-column-group :  CSS2 将对象作为表格列组显示
table-header-group :  CSS2 将对象作为表格标题组显示
table-footer-group :  CSS2 将对象作为表格脚注组显示
table-row :  CSS2 将对象作为表格行显示
table-row-group :  CSS2 将对象作为表格行组显示

 

 

  评论这张
 
阅读(1977)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016