在b/s开发中经常用到的javaScript技术

最新推荐文章于 2021-08-25 14:32:29 发布

zl198183

最新推荐文章于 2021-08-25 14:32:29 发布

阅读量3.6k

点赞数

分类专栏： html特效文章标签： javascript function input button border class

本文链接：https://blog.csdn.net/zl198183/article/details/513660

版权

html特效专栏收录该内容

26 篇文章 0 订阅

订阅专栏

一、验证类
1、数字验证内
1.1 整数
1.2 大于0的整数（用于传来的ID的验证)
1.3 负整数的验证
1.4 整数不能大于iMax
1.5 整数不能小于iMin
2、时间类
2.1 短时间，形如 (13:04:06)
2.2 短日期，形如 (2003-12-05)
2.3 长时间，形如 (2003-12-05 13:04:06)
2.4 只有年和月。形如(2003-05,或者2003-5)
2.5 只有小时和分钟,形如(12:03)
3、表单类
3.1 所有的表单的值都不能为空
3.2 多行文本框的值不能为空。
3.3 多行文本框的值不能超过sMaxStrleng
3.4 多行文本框的值不能少于sMixStrleng
3.5 判断单选框是否选择。
3.6 判断复选框是否选择.
3.7 复选框的全选，多选，全不选，反选
3.8 文件上传过程中判断文件类型
4、字符类
4.1 判断字符全部由a-Z或者是A-Z的字字母组成
4.2 判断字符由字母和数字组成。
4.3 判断字符由字母和数字，下划线,点号组成.且开头的只能是下划线和字母
4.4 字符串替换函数.Replace();
5、浏览器类
5.1 判断浏览器的类型
5.2 判断ie的版本
5.3 判断客户端的分辨率

6、结合类
6.1 email的判断。
6.2 手机号码的验证
6.3 身份证的验证

二、功能类

1、时间与相关控件类
1.1 日历
1.2 时间控件
1.3 万年历
1.4 显示动态显示时钟效果（文本，如OA中时间）
1.5 显示动态显示时钟效果 (图像，像手表)
2、表单类
2.1 自动生成表单
2.2 动态添加，修改，删除下拉框中的元素
2.3 可以输入内容的下拉框
2.4 多行文本框中只能输入iMax文字。如果多输入了，自动减少到iMax个文字（多用于短信发送)

3、打印类
3.1 打印控件
4、事件类
4.1 屏蔽右键
4.2 屏蔽所有功能键
4.3 --> 和<-- F5 F11,F9,F1
4.4 屏蔽组合键ctrl+N
5、网页设计类
5.1 连续滚动的文字，图片（注意是连续的，两段文字和图片中没有空白出现）
5.2 html编辑控件类
5.3 颜色选取框控件
5.4 下拉菜单
5.5 两层或多层次的下拉菜单
5.6 仿IE菜单的按钮。（效果如rongshuxa.com的导航栏目)
5.7 状态栏，title栏的动态效果（例子很多，可以研究一下）
5.8 双击后，网页自动滚屏
6、树型结构。
6.1 asp+SQL版
6.2 asp+xml+sql版
6.3 java+sql或者java+sql+xml
7、无边框效果的制作
8、连动下拉框技术
9、文本排序

By 冷月宫主 | 阅读全文(1264) | 回复(47) | 引用(0)

? 回复:在b/s开发中经常用到的javaScript技术

2004-12-17 15:37:02

Vml图像画板.2003

<HTML xmlns:v>
<HEAD>
<META http-equiv="Content-Type" content="text/html; Charset=gb2312">
<META name="GENERATOR" content="网络程序员伴侣(Lshdic)2004">
<META name="GENERATORDOWNLOADADDRESS" content="http://www.lshdic.com/downlshdic.asp">
<META NAME="KEYWORDS" CONTENT="Vml图像画板">
<title>长乐新网 - Vml图像画板.2003</title>
<STYLE>
v/:*{behavior:url(#default#VML);}   /*声明V为VML变量*/
a{text-Decoration:none;color:white}
a:hover{text-Decoration:underline;color:yellow;}
td{font-size:12px;color:white}
.bon1{border-bottom:1 solid eeeeee;border-right:1 solid eeeeee;border-left:1 solid gray;border-top:1 solid gray;background-color:#619CE7;color:yellow;width:54}
.bon2{border-bottom:1 solid gray;border-right:1 solid gray;border-left:1 solid eeeeee;border-top:1 solid eeeeee;background-color:#619CE7;color:white;width:54}
</STYLE>
</HEAD>
<BODY οncοntextmenu='return false' style='margin:1;cursor:default' vlink=#3732CD link='#3732CD' onselectstart='if(event.srcElement.tagName!="TEXTAREA"&&event.srcElement.tagName!="INPUT")return false'>
<v:Line style='position:absolute;z-index:2000;display:none' id='line1'> 
<v:Stroke dashstyle='shortdash'/>
</v:line>
<v:Oval style='position:absolute;z-index:2000;display:none' id='oval1'> 
<v:Stroke dashstyle='shortdash'/>
</v:oval>
<v:rect style='position:absolute;z-index:2000;display:none' id='rect1'> 
<v:Stroke dashstyle='shortdash'/>
</v:rect>
<v:roundrect style='position:absolute;z-index:2000;display:none' id='roundrect1'> 
<v:Stroke dashstyle='shortdash'/>
</v:roundrect>
<span style='position:absolute;z-index:2000;display:none' id='wenzi1'>   
<textarea id='txt1' style='border:1 solid black;width:200;height:50'></textarea><br>
<center><input type='button' value='插入' class="bon2" οnclick="charuwenzi()">
</span>
<span style='position:absolute;z-index:2000;display:none' id='tupian1'>   
<input type='file' id='file1' style='width:200'><br>
<center><input type='button' value='插入' class="bon2" οnclick="charutupian()">
</span>
<span style='position:absolute;z-index:2000;display:none' id='gaoji1'>   
<textarea id='txt2' style='border:1 solid black;width:400;height:150'></textarea><br>
<center><input type='button' value='修改' class="bon2" οnclick="gaojiobj.outerHTML=txt2.value;gaojiobj=null;gaoji1.style.display='none'">
</span>
<span style='position:absolute;z-index:2000;display:none' id='yuandaima'>   
<textarea id='txt3' style='border:1 solid black;width:600;height:400'></textarea><br>
<center><input type='button' value='复制' class="bon2" οnclick="window.clipboardData.setData('text',txt3.value);alert('已将数据复制到系统剪切板')"> <input type='button' value='更新修改' class="bon2" οnclick="div1.innerHTML=txt3.value;yuandaima.style.display='none'"> <input type='button' value='取消' class="bon2" οnclick="yuandaima.style.display='none'">
</span>
<span style='position:absolute;z-index:2000;display:none' id='menu1'>    
<input type=button class=bon2 value=置前 οnclick='zz+=1;thisobj.style.zIndex=zz;menu1.style.display="none"'><br>
<input type=button class=bon2 value=置后 οnclick='zz2-=1;thisobj.style.zIndex=zz2;menu1.style.display="none"'><br>
<input type=button class=bon2 value=复制 οnclick='div1.innerHTML+=thisobj.outerHTML;alert("复制完成，请使用选移功能拖动");menu1.style.display="none"'><br>
<input type=button class=bon2 value=删除 οnclick='thisobj.outerHTML="";menu1.style.display="none"'><br>
</span>
<iframe id=web src="about:blank" style="display:none"></iframe> 
<span style='position:absolute;z-index:2000;display:none' id='help'>   
<textarea readonly='true' style='border:1 solid black;width:500;height:300'>
VML图像画板.2003（操作帮助及功能简介）
目前最强的网页VML(网页矢量图形标记语言)编辑工具之一，VML学习者的最佳学习工具
能够完成基本的三维网页的设计，做图及图形处理功能一般（原作者今后有时间会去强化）
基本的画笔及图形处理工具在右方，点选后在画板内使用鼠标左键应用
可将画板内VML代码图形保存为文件，亦可通过“修改原代码”实现“打开文件”等功能
文字:该功能暂未提供可视化的修改编辑功能，但代码为HTML相对比较简单
图片:支持FILE:///及HTTP://两种协议类型，矢量化后失真现象很少
记忆点:该功能只有在点击后大于点击时X，Y的坐标，才能看到效果，今后也许原作者会找到好的解决方法
填充:该功能只有“钢笔”所划的线无法使用
边框:该功能的“起点尖头”“终点尖头”只对“钢笔”“记忆点”所画的图形有效
保存为文件:在弹出保存对话框时，在对话框中“语言”下拉菜单中选择“Unicode”保存后能够正常显示
关于打开文件的功能:由于客户端资源及文件编码类型问题，该功能先已“修改原代码”代替，可直接将已保存的VML输入后点击“更新修改”即可虚拟完成已有文件的打开

VML图像画板.2003（版权信息）

主页:http://www.20cl.com
最新版:可登陆主页查看
发布于:2003年8月25日
授权:授权给任何个人使用、应用，自由DHTML代码，可任意修改学习、转载、强化，作者制作本作品出发点是为了提高用户的VML编程水准、开拓一个先例，因而未加密及方便参考仅采用一页代码，为此，未经原作者同意请不要将VML图像画板任何版本用于其他商业用途，侵我版权毁我及作品名声，公开于网站、软件发布及其他应用请保留原作者的这些声明（但可以追加其他信息，如修改者各项授权信息等）
</textarea><br>
<center><input type='button' value='关闭帮助' class="bon2" οnclick="help.style.display='none'">
</span>
<TABLE cellspacing=0 cellpadding=3 width=770 align=center bgcolor='#619CE7' style='border-right:3 dashed green;border-left:3 dashed #4735B0;border-top:1 solid blue;border-bottom:gray' id=allform1>
<tr align=center οnmοuseοver='if(event.srcElement.tagName=="TD"&&event.srcElement.width==70)event.srcElement.bgColor="aaaaaa"' οnmοuseοut='if(event.srcElement.tagName=="TD")event.srcElement.bgColor=""' style='cursor:hand'><td width=70 id=toptd1 οnclick="yuandaima.x=event.x;yuandaima.y=event.y;txt3.value=div1.innerHTML.replace(/>/g,'>/n').replace(/ = /g,'=').replace(//: /g,':').replace(//; /g,';');yuandaima.style.display=''">
修改原代码</td><td width=70 οnclick="web.document.write('<HTML xmlns:v>/n<HEAD>/n<META http-equiv=Content-Type content=text/html;charset=gb2312>/n<TITLE>我的杰作</TITLE>/n<META name=Gemeratpr content=长乐新网VML图形编辑器>/n<META name=GemeratprHomePage content=http://www.20cl.com>/n<STYLE>/nv//:*{behavior:url(#default#VML);}/n</STYLE>/n</HEAD>/n<BODY>/n'+div1.innerHTML+'/n</BODY>/n</HTML>');web.document.execCommand('SaveAs',false,'我的杰作')">保存为文件</td><td width=70 οnclick="if(this.innerText=='最大化视图'){div1.style.width=document.body.offsetWidth-150;div1.style.height=document.body.offsetHeight-35;this.innerText='恢复视图'}else{div1.style.width=650;div1.style.height='100%';this.innerText='最大化视图'}">最大化视图</td><td width=70 οnclick="help.x=event.x;help.y=event.y;help.style.display=''">操作帮助</td><td width=60> </td><td width=60> </td><td align=right>长乐新网:<a href='http://www.20cl.com' target='_blank'>http://www.20cl.com</a>
</td></tr><tr>
<td width=100% colspan=10 height=500>
<table cellspacing=0 cellpadding=0 height=100%%><tr><td width=660>

<div style='width:650;height:100%;background-color:white;border:1 solid gray;color:black;' id=div1></div>
</td><td>
<div style='width:110;height:100%;'>
<center><b>画笔选择</b><br>
<button class=bon2 id=huabi>选移<button class=bon2 id=huabi>调大小<button class=bon2 id=huabi>扔出</button><button class=bon1 id=huabi>钢笔</button><button class=bon2 id=huabi>记忆点<button class=bon2 id=huabi>圆型<button class=bon2 id=huabi>长方型<button class=bon2 id=huabi>圆矩型<button class=bon2 id=huabi>文字<button class=bon2 id=huabi>图片<button class=bon2 id=huabi>填充<button class=bon2 id=huabi>立体<button class=bon2 id=huabi>边框<button class=bon2 id=huabi>高级</button><br2>
<b>画笔基本参数</b><br>
笔边粗度 <select style="width:54;" id=bibiancudu><option selected>1<script>for(i=2;i<101;i++)document.write("<option>"+i)</script></select><br>
画笔颜色 <input style='border:1 solid black;width:54;height:17;' value='#000000' id=huabiyanse οnmοusedοwn='colortab.style.left=event.x-50;colortab.style.top=event.y+this.offsetHeight;rndcolor(this.id)'><br>
画笔背景 <input style='border:1 solid black;width:54;height:17;' value='#FFFFFF' id=huabibeijing οnmοusedοwn='colortab.style.left=event.x-50;colortab.style.top=event.y+this.offsetHeight;rndcolor(this.id)'><br>
X Y 坐标 <input disabled='true' type='text' value='0,0' id='zuobiao' style='border:1 solid black;width:54;height:17;'><br>
<span id=tianchong1 style='display:none'>
<b> <br>填充基本参数</b><br>
普通背景 <input style='border:1 solid black;width:54;height:17;' value='' id=tianchongbeijing οnmοusedοwn='colortab.style.left=event.x-50;colortab.style.top=event.y+this.offsetHeight;rndcolor(this.id)'><br>使用渐变背景<input type='checkbox' id='usejianbian'><br>
渐变色一 <input style='border:1 solid black;width:54;height:17;color:red' value='#FF0000' id=jianbianse1 οnmοusedοwn='colortab.style.left=event.x-50;colortab.style.top=event.y+this.offsetHeight;rndcolor(this.id)'>
<br>渐变色二 <input style='border:1 solid black;width:54;height:17;' value='#FFFFFF' id=jianbianse2 οnmοusedοwn='colortab.style.left=event.x-50;colortab.style.top=event.y+this.offsetHeight;rndcolor(this.id)'><br>
上下渐变 <input type=radio name='jianbianyangshi' checked><br>
斜向渐变 <input type=radio name='jianbianyangshi'>
</span>
<span id=liti1 style='display:none'>
<b> <br>立体基本参数</b><br>
后向伸展 <select style="width:54;" id=houxiangshenzhan><option selected>20<script>for(i=0;i<101;i++)document.write("<option>"+i)</script></select><br>
<br>前向伸展 <select style="width:54;" id=qianxiangshenzhan><option selected>0<script>for(i=1;i<101;i++)document.write("<option>"+i)</script></select><br>
偏移左边 <select style="width:54;" id=pianyizuobian><option selected>0<script>for(i=1;i<101;i++)document.write("<option>"+i)</script></select><br>
偏移上边 <select style="width:54;" id=pianyishangbian><option selected>0<script>for(i=1;i<101;i++)document.write("<option>"+i)</script></select><br>
立体颜色 <input style='border:1 solid black;width:54;height:17;' value='' id=litiyanse οnmοusedοwn='colortab.style.left=event.x-50;colortab.style.top=event.y+this.offsetHeight;rndcolor(this.id)'><br>
</span>
<span id=biankuang1 style='display:none'>
<b> <br>边框基本参数</b><br>
边框粗度 <select style="width:54;" id=biankuangcudu><option selected>1<script>for(i=0;i<101;i++)document.write("<option>"+i)</script></select><br>
<br>边框样式 <select style="width:54;" id=biankuangyangshi><option selected>none<option>dash<option>dashdot<option>dot<option>longdash<option>longdashdot<option>shortdash<option>shortdashdot<option>shortdashdotdot<option>longdashdotdot<option>shortdot</select><br>
起点尖头 <select style="width:54;" id=qidianjiantou><option selected>none<option>block<option>classic<option>diamond<option>open<option>oval</select><br>
终点尖头 <select style="width:54;" id=zhongdianjiantou><option selected>none<option>block<option>classic<option>diamond<option>open<option>oval</select><br>
边框颜色 <input style='border:1 solid black;width:54;height:17;' value='' id=biankuangyanse   οnmοusedοwn='colortab.style.left=event.x-50;colortab.style.top=event.y+this.offsetHeight;rndcolor(this.id)'><br>
</span>
</div>
</td></tr></table>
</td></tr>
</table>
<table cellspacing=0 cellpadding=0 style='position:absolute;width:100;height:100;display:none;background-color:red' id='colortab'><tr><td id='colorid'></td></tr></table>
<script language='jscript'>
var bi=4    //定义当前使用的画笔工具，3为铅笔
var color1='#000000',color2='#000000',size1=0 //定义缺剩的画笔颜色及画笔填充颜色和笔边粗度
var xx=0,yy=0,zz=1000 //定义缺剩的X及Y坐标
var isok=false //区分画笔起点是否在DIV内，超出范围则无效
var moveobj=null,ckleft=0,cktop=0,ckwid=0,ckhei=0,ckto="" //被移动物件、调整大小物件的引用
var poly1=null,oldvalue="",oldx=0,oldy=0 //为了完成记忆点，创建一个可折式线段
var gaojiobj=null //为了完成“高级”功能，绑定被修改对象
var thisobj=null   //为了完成各种基本编辑功能，如“置前”“复制”“删除”等
var zz2=1000          //为完成“置后”功能，zz2为负数
function div1.onmousedown(){
div1.setCapture();color1=huabiyanse.value;color2=huabibeijing.value;isok=true;size1=bibiancudu.options[bibiancudu.selectedIndex].text
xx=event.x;yy=event.y;zz+=1
for(i=0;i<huabi.length;i++){if(huabi[i].className=="bon1"){bi=i+1;break}}
line1.strokecolor=color1;line1.strokeweight=size1;oval1.strokeweight=size1;oval1.strokecolor=color1
oval1.fillcolor=color2;rect1.strokeweight=size1;rect1.strokecolor=color1
rect1.fillcolor=color2;roundrect1.strokeweight=size1;roundrect1.strokecolor=color1
roundrect1.fillcolor=color2;
if(event.button==1){
switch(bi){
case 1: //选移
if(event.srcElement.parentElement.id=="div1"){moveobj=event.srcElement;ckleft=xx-parseInt(moveobj.style.left);cktop=yy-parseInt(moveobj.style.top)}
break;
case 2: //调大小
if(event.srcElement.parentElement.id=="div1"){moveobj=event.srcElement;
ckleft=parseInt(moveobj.style.left);cktop=parseInt(moveobj.style.top);ckwid=moveobj.offsetWidth;ckhei=moveobj.offsetHeight}
break;
case 3: //扔出
break;
case 4: //钢笔
line1.style.left=event.x;line1.style.top=event.y;line1.to="0,0";line1.style.display=""
break;
case 5: //记忆点
if(poly1==null){
oldx=xx;oldy=yy
poly1=div1.appendChild(document.createElement("<v:polyline points='0 0 0 0' style='position:absolute;z-index:"+zz+";left:"+xx+";top:"+yy+";' strokecolor='"+color1+"' strokeweight='"+size1+"' fillcolor='"+color2+"'/>"))
}
if(oldx-tempx<1&&oldy-tempy<1)oldvalue=poly1.points.value.replace(/,/g,' ')
break;
case 6: //圆形
oval1.style.left=event.x;oval1.style.top=event.y;oval1.style.width=0;oval1.style.height=0;oval1.style.display=""
break;
case 7: //长方形
rect1.style.left=event.x;rect1.style.top=event.y;rect1.style.width=0;rect1.style.height=0;rect1.style.display=""
break;
case 8: //圆矩形
roundrect1.style.left=event.x;roundrect1.style.top=event.y;roundrect1.style.width=0;roundrect1.style.height=0;roundrect1.style.display=""
break;
case 9: //文字
wenzi1.style.left=event.x;wenzi1.style.top=event.y;wenzi1.style.display=""
break;
case 10: //图片
tupian1.style.left=event.x;tupian1.style.top=event.y;tupian1.style.display=""
break;
}
}}
function div1.onmousemove(){
tempx=event.x;tempy=event.y;temp1=0;temp2=0
zuobiao.value=tempx-allform1.offsetLeft-8+","+parseInt(tempy-toptd1.offsetHeight-7)
if(bi==5&&poly1!=null){   //记忆点
if(oldx-tempx<0&&oldy-tempy<0)poly1.points.value=oldvalue+" "+(tempx-oldx)+" "+(tempy-oldy)
}

By wsq | 个人主页 | 引用 | 返回

? 回复:在b/s开发中经常用到的javaScript技术

2004-12-17 15:33:50

再弄几个：
1、table里的内容超长，自动切除并+ “...”
http://expert.csdn.net/Expert/topic/2817/2817934.xml?temp=.5490991
2、表头与表体分开，表头可以调整宽度（JS实现）
http://expert.csdn.net/Expert/topic/2833/2833183.xml?temp=.5755121

By wsq | 个人主页 | 引用 | 返回

? 回复:在b/s开发中经常用到的javaScript技术

2004-12-17 15:32:13

html编辑器
http://www.gy163.cn/temp/editor
(请勿用于商业)

By wsq | 个人主页 | 引用 | 返回

? 回复:在b/s开发中经常用到的javaScript技术

2004-12-17 15:31:12

可以输入的SELECT

inputAndDrop.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns:inputAndDrop>
<HTML>
<HEAD>
<TITLE>Drop Down Menu</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=GB2312">
<LINK REL="stylesheet" HREF="./dropdownMenu.css" TYPE="text/css">
<style>
@media all {
inputAndDrop/:inputAndDrop {behavior:url(inputAndDrop.htc)}
}
</style>
</HEAD>
<BODY>
<select name=country style="display:none;">
<option value="AL">阿尔巴尼亚<option value="DZ">阿尔及利亚<option value="AF">阿富汗<option value="AR">阿根廷<option value="AE">阿拉伯联合酋长国<option value="AW">阿鲁巴<option value="OM">阿曼<option value="AZ">阿塞拜疆<option value="EG">埃及<option value="ET">埃塞俄比亚<option value="IE">爱尔兰<option value="EE">爱沙尼亚<option value="AD">安道尔<option value="AO">安哥拉<option value="AI">安圭拉岛<option value="AG">安提瓜和巴布达<option value="AT">奥地利<option value="AU">澳大利亚<option value="MO">澳门特别行政区<option value="BB">巴巴多斯<option value="PG">巴布亚新几内亚<option value="BS">巴哈马<option value="PK">巴基斯坦<option value="PY">巴拉圭<option value="BH">巴林<option value="PA">巴拿马<option value="BR">巴西<option value="BY">白俄罗斯<option value="BM">百慕大群岛<option value="BG">保加利亚<option value="MP">北马里亚纳群岛<option value="BJ">贝宁<option value="BE">比利时<option value="IS">冰岛<option value="PR">波多黎各<option value="PL">波兰<option value="BA">波斯尼亚和黑塞哥维那<option value="BO">玻利维亚<option value="BZ">伯利兹<option value="BW">博茨瓦纳<option value="BT">不丹<option value="IO">不列颠印度洋属土<option value="BF">布基纳法索<option value="BI">布隆迪<option value="BV">布韦岛<option value="KP">朝鲜<option value="GQ">赤道几内亚<option value="DK">丹麦<option value="DE">德国<option value="TP">东帝汶<option value="TG">多哥<option value="DM">多米尼克<option value="DO">多米尼克共和国<option value="RU">俄罗斯<option value="EC">厄瓜多尔<option value="ER">厄立特里亚<option value="FR">法国<option value="TF">法国南部和南极州<option value="FO">法罗群岛<option value="PF">法属波利尼西亚<option value="GF">法属圭亚那<option value="VA">梵蒂冈<option value="PH">菲律宾<option value="FJ">斐济群岛<option value="FI">芬兰<option value="CV">佛得角群岛<option value="FK">福克兰群岛（马尔维纳斯群岛）<option value="GM">冈比亚<option value="CG">刚果<option value="CD">刚果民主共和国<option value="CO">哥伦比亚<option value="CR">哥斯达黎加<option value="GD">格林纳达<option value="GL">格陵兰<option value="GE">格鲁吉亚<opvalue="GP">瓜德罗普岛（法属）<option value="GU">关岛<option value="GY">圭亚那<option value="KZ">哈萨克斯坦<option value="HT">海地<option value="KR">韩国<option value="NL">荷兰<option value="AN">荷属安的列斯群岛<option value="HM">赫德和麦克唐纳群岛<option value="HN">洪都拉斯<option value="KI">基里巴斯<option value="DJ">吉布提<option value="KG">吉尔吉斯斯坦<option value="GN">几内亚<option value="GW">几内亚比绍<option value="CA">加拿大<option value="GH">加纳<option value="GA">加蓬<option value="KH">柬埔寨<option value="CZ">捷克共和国<option value="ZW">津巴布韦<option value="CM">喀麦隆<option value="QA">卡塔尔<option value="KY">开曼群岛<option value="CC">科科斯群岛<option value="KM">科摩罗<option value="CI">科特迪瓦<option value="KW">科威特<option value="HR">克罗地亚（赫尔瓦次卡）<option value="KE">肯尼亚<option value="CK">库克群岛<option value="LV">拉脱维亚<option value="LS">莱索托<option value="LA">老挝<option value="LB">黎巴嫩<option value="LT">立陶宛<option value="LR">利比里亚<option value="LY">利比亚<option value="LI">列支敦士登<option value="RE">留尼汪岛<option value="LU">卢森堡<option value="RW">卢旺达<option value="RO">罗马尼亚<option value="MG">马达加斯加岛<option value="MV">马尔代夫<option value="MT">马耳他<option value="MW">马拉维<option value="MY">马来西亚<option value="ML">马里<option value="MK">马其顿共和国<option value="MH">马绍尔群岛<option value="MQ">马提尼克岛<option value="YT">马约特岛<option value="MU">毛里求斯<option value="MR">毛里塔尼亚<option value="US">美国<option value="AS">美属萨摩亚<option value="VI">美属维尔京群岛<option value="UM">美属小奥特兰群岛<option value="MN">蒙古<option value="MS">蒙特塞拉特(英)<option value="BD">孟加拉国<option value="PE">秘鲁<option value="FM">密克罗尼西亚<option value="MM">缅甸<option value="MD">摩尔多瓦<option value="MA">摩洛哥<option value="MC">摩纳哥<option value="MZ">莫桑比克<option value="MX">墨西哥<option value="NA">纳米比亚<option value="ZA">南非<option value="AQ">南极洲<option value="GS">南乔治亚和南桑<option value="NR">瑙鲁<option value="NP">尼泊尔<option value="NI">尼加拉瓜<option value="NE">尼日尔<option value="NG">尼日利亚<option value="NU">纽埃<option value="NO">挪威<option value="NF">诺福克岛<option value="PW">帕劳<option value="PN">皮特克恩群岛<option value="PT">葡萄牙<option value="JP">日本<option value="SE">瑞典<option value="CH">瑞士<option value="SV">萨尔瓦多<option value="WS">萨摩亚<option value="SL">塞拉利昂<option value="SN">塞内加尔<option value="CY">塞浦路斯<option value="SC">塞舌尔群岛<option value="SA">沙特阿拉伯<option value="CX">圣诞岛<option value="ST">圣多美和普林西比<option value="SH">圣赫勒拿岛<option value="KN">圣基茨和尼维斯<option value="LC">圣卢西亚<option value="SM">圣马力诺<option value="PM">圣皮埃尔岛和密克隆岛<option value="VC">圣文森特和格林纳丁斯<option value="LK">斯里兰卡<option value="SK">斯洛伐克<option value="SI">斯洛文尼亚<option value="SJ">斯瓦尔巴群岛和扬马延<option value="SZ">斯威士兰<option value="SD">苏丹<option value="SR">苏里南<option value="SB">所罗门群岛<option value="SO">索马里<option value="TJ">塔吉克斯坦<option value="TH">泰国<option value="TZ">坦桑尼亚<option value="TO">汤加<option value="TC">特克斯群岛和凯科斯群岛<option value="TT">特立尼达和多巴哥<option value="TN">突尼斯<option value="TV">图瓦卢<option value="TR">土耳其<option value="TM">土库曼斯坦<option value="TK">托克劳<option value="WF">瓦利斯群岛和富图纳群岛<option value="VU">瓦努阿图<option value="GT">危地马拉<option value="VE">委内瑞拉<option value="BN">文莱<option value="UG">乌干达<option value="UA">乌克兰<option value="UY">乌拉圭<option value="UZ">乌兹别克斯坦<option value="ES">西班牙<option value="GR">希腊<option value="HK">香港特别行政区<option value="SG">新加坡<option value="NC">新喀里多尼亚<option value="NZ">新西兰<option value="HU">匈牙利<option value="SY">叙利亚<option value="JM">牙买加<option value="AM">亚美尼亚<option value="YE">也门<option value="IQ">伊拉克<option value="IR">伊朗<option value="IL">以色列<option value="IT">意大利<option value="IN">印度<option value="ID">印度尼西亚<option value="UK">英国<option value="VG">英属维尔京群岛<option value="JO">约旦<option value="VN">越南<option value="ZM">赞比亚<option value="TD">乍得<option value="GI">直布罗陀<option value="CL">智利<option value="CF">中非共和国<option value="CN"selected>中国<option value="TW">中国台湾</select>

<inputAndDrop:inputAndDrop>
<input dataSrc="country">     
<input>
<img src="inputAndDrop.jpg">
<select size=11 style="display:none"></select>
</inputAndDrop:inputAndDrop>

</BODY>
</HTML>
<SCRIPT LANGUAGE=javascript>

</SCRIPT>
可以输入的SELECT （2）

inputAndDrop.htc

<PUBLIC:ATTACH EVENT="onclick" ONEVENT="clickSwitcher()"/>
<PUBLIC:ATTACH EVENT="onkeyup" ONEVENT="keyupSwitcher()"/>
<PUBLIC:ATTACH EVENT="onload" ONEVENT="displayListForInputAndDrop()" FOR="window"/>
<PUBLIC:ATTACH EVENT="onclick" ONEVENT="windowClick()" FOR="document"/>

<SCRIPT LANGUAGE="JavaScript">
function displayListForInputAndDrop(){
children(3).style.position = "absolute";
children(3).style.display = "none";
children(3).style.left = children(0).offsetLeft;
children(3).style.top = children(0).offsetTop + children(0).offsetHeight - 2;
children(3).style.width = children(0).offsetWidth + 17;

children(2).style.position = "absolute";
children(2).style.left = children(0).offsetLeft + children(0).offsetWidth - 1;
children(2).style.top = children(0).offsetTop;
children(2).style.height = children(0).offsetHeight;
children(2).style.width = 17;
}

function judgeEventSrc(){
for (var i=0;i<children.length;i++){
  if (children(i)==event.srcElement){
   return (i);
  }
}
}

function keyupSwitcher(){
switch(judgeEventSrc()){
  case 0:
   inputKeyup();
   break;
  case 1:
   break;
  case 2:
   break;
  case 3:
   listKeyup();
   break;
}
}

function clickSwitcher(){
switch(judgeEventSrc()){
  case 0:
   break;
  case 1:
   break;
  case 2:
   picClick();
   break;
  case 3:
   listClick();
   break;
}
}

function listKeyup(){
if (event.keyCode==38 || event.keyCode==40){
makeChoose();
}
if (event.keyCode==13){
displayList("none");
}
}

function listClick(){
makeChoose();
displayList("none");
}

function makeChoose(){
children(0).value = children(3).options(children(3).selectedIndex).text;
children(1).value = children(3).options(children(3).selectedIndex).value;
}

function windowClick(){
if ((event.srcElement.parentElement!=element && event.srcElement!=element)){
//  children(0).value = "";
//  children(1).value = "";
  displayList("none");
}
}
</SCRIPT>

By wsq | 个人主页 | 引用 | 返回

? 回复:在b/s开发中经常用到的javaScript技术

2004-12-17 15:30:20

用来保存用户习惯设置的
<STYLE>
.userData {BEHAVIOR: url(#default#userdata)}
</STYLE>
function savebehavior()
var oPersist=oPersistValue;
oPersist.setAttribute("sPersistText",0);
oPersist.save("oNoteWindowCount");

oPersist.load("oFolderBehavior");
if (oPersist.getAttribute("sPersistText")!=null)
{
oPersist.value=oPersist.getAttribute("sPersistText");
aFolderState=decodeBuddyIndexList(oPersistValue.value);
}//end
}

By wsq | 个人主页 | 引用 | 返回

? 回复:在b/s开发中经常用到的javaScript技术

2004-12-17 15:29:55

给大家参考参考
function HTMLtoString(oString) {
oString=oString.replace(/<BR>/g,'/n');
oString=oString.replace(/</g,'<');
oString=oString.replace(/&/g,'&');
oString=oString.replace(/>/g,'>');
oString=oString.replace(/"/g,'/"');
oString=oString.replace(/ /g,' ');
return oString;
}

By wsq | 个人主页 | 引用 | 返回

? 回复:在b/s开发中经常用到的javaScript技术

2004-12-17 15:29:32

//给大家几个经典网站吧

http://www.mattkruse.com/javascript/dynamicoptionlist/
http://www.mattkruse.com/javascript/
http://www.gatescript.com/examples.asp
http://www.programmersheaven.com/zone14/index.htm
http://www.codetoad.com/
http://www.bindows.net/
http://webfx.eae.net/
http://thinlet.sourceforge.net/
http://www.cortext.co.il/
http://www.laszlosystems.com/
http://www.convea.com/
http://www.canoo.com/ulc/

By wsq | 个人主页 | 引用 | 返回

? 回复:在b/s开发中经常用到的javaScript技术

2004-12-17 15:29:15

二、功能类

一、验证类
1、数字验证内
1.1 整数
      /^(-|/+)?/d+$/.test(str)
1.2 大于0的整数（用于传来的ID的验证)
      /^/d+$/.test(str)
1.3 负整数的验证
      /^-/d+$/.test(str)
2、时间类
2.1 短时间，形如 (13:04:06)
      function isTime(str)
      {
        var a = str.match(/^(/d{1,2})(:)?(/d{1,2})/2(/d{1,2})$/);
        if (a == null) {alert('输入的参数不是时间格式'); return false;}
        if (a[1]>24 || a[3]>60 || a[4]>60)
        {
          alert("时间格式不对");
          return false
        }
        return true;
      }
2.2 短日期，形如 (2003-12-05)
      function strDateTime(str)
      {
         var r = str.match(/^(/d{1,4})(-|//)(/d{1,2})/2(/d{1,2})$/);
         if(r==null)return false;
         var d= new Date(r[1], r[3]-1, r[4]);
         return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);
      }
2.3 长时间，形如 (2003-12-05 13:04:06)
      function strDateTime(str)
      {
        var reg = /^(/d{1,4})(-|//)(/d{1,2})/2(/d{1,2}) (/d{1,2}):(/d{1,2}):(/d{1,2})$/;
        var r = str.match(reg);
        if(r==null)return false;
        var d= new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]);
        return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==r[7]);
      }
2.4 只有年和月。形如(2003-05,或者2003-5)
2.5 只有小时和分钟,形如(12:03)
3、表单类
3.1 所有的表单的值都不能为空
      <input οnblur="if(this.value.replace(/^/s+|/s+$/g,'')=='')alert('不能为空!')">
3.2 多行文本框的值不能为空。
3.3 多行文本框的值不能超过sMaxStrleng
3.4 多行文本框的值不能少于sMixStrleng
3.5 判断单选框是否选择。
3.6 判断复选框是否选择.
3.7 复选框的全选，多选，全不选，反选
3.8 文件上传过程中判断文件类型
4、字符类
4.1 判断字符全部由a-Z或者是A-Z的字字母组成
      <input οnblur="if(/[^a-zA-Z]/g.test(this.value))alert('有错')">
4.2 判断字符由字母和数字组成。
      <input οnblur="if(/[^0-9a-zA-Z]/g.test(this.value))alert('有错')">
4.3 判断字符由字母和数字，下划线,点号组成.且开头的只能是下划线和字母
      /^([a-zA-z_]{1})([/w]*)$/g.test(str)
4.4 字符串替换函数.Replace();
5、浏览器类
5.1 判断浏览器的类型
      window.navigator.appName
5.2 判断ie的版本
      window.navigator.appVersion
5.3 判断客户端的分辨率
      window.screen.height; window.screen.width;

6、结合类
6.1 email的判断。
      function ismail(mail)
      {
        return(new RegExp(/^/w+((-/w+)|(/./w+))*/@[A-Za-z0-9]+((/.|-)[A-Za-z0-9]+)*/.[A-Za-z0-9]+$/).test(mail));
      }
6.2 手机号码的验证
6.3 身份证的验证
      function isIdCardNo(num)
      {
        if (isNaN(num)) {alert("输入的不是数字！"); return false;}
        var len = num.length, re;
        if (len == 15)
          re = new RegExp(/^(/d{6})()?(/d{2})(/d{2})(/d{2})(/d{3})$/);
        else if (len == 18)
          re = new RegExp(/^(/d{6})()?(/d{4})(/d{2})(/d{2})(/d{3})(/d)$/);
        else {alert("输入的数字位数不对！"); return false;}
        var a = num.match(re);
        if (a != null)
        {
          if (len==15)
          {
            var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);
            var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
          }
          else
          {
            var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);
            var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
          }
          if (!B) {alert("输入的身份证号 "+ a[0] +" 里出生日期不对！"); return false;}
        }
        return true;
      }
3.7 复选框的全选，多选，全不选，反选
<form name=hrong>
<input type=checkbox name=All οnclick="checkAll('mm')">全选<br/>
<input type=checkbox name=mm οnclick="checkItem('All')"><br/>
<input type=checkbox name=mm οnclick="checkItem('All')"><br/>
<input type=checkbox name=mm οnclick="checkItem('All')"><br/>
<input type=checkbox name=mm οnclick="checkItem('All')"><br/>
<input type=checkbox name=mm οnclick="checkItem('All')"><br/><br/>

</form>

<SCRIPT LANGUAGE="java script">
function checkAll(str)
{
var a = document.getElementsByName(str);
var n = a.length;
for (var i=0; i<n; i++)
a[i].checked = window.event.srcElement.checked;
}
function checkItem(str)
{
var e = window.event.srcElement;
var all = eval("document.hrong."+ str);
if (e.checked)
{
    var a = document.getElementsByName(e.name);
    all.checked = true;
    for (var i=0; i<a.length; i++)
    {
      if (!a[i].checked){ all.checked = false; break;}
    }
}
else all.checked = false;
}
</SCRIPT>

3.8 文件上传过程中判断文件类型
<input type=file οnchange="alert(this.value.match(/^(.*)(/.)(.{1,8})$/)[3])">

画图:
<OBJECT
id=S
style="LEFT: 0px; WIDTH: 392px; TOP: 0px; HEIGHT: 240px"
height=240
width=392
classid="clsid:369303C2-D7AC-11D0-89D5-00A0C90833E6">
</OBJECT>
<SCRIPT>
S.DrawingSurface.ArcDegrees(0,0,0,30,50,60);
S.DrawingSurface.ArcRadians(30,0,0,30,50,60);
S.DrawingSurface.Line(10,10,100,100);
</SCRIPT>

写注册表：
<SCRIPT>
var WshShell = WScript.CreateObject("WScript.Shell");
WshShell.RegWrite ("HKCU//Software//ACME//FortuneTeller//", 1, "REG_BINARY");
WshShell.RegWrite ("HKCU//Software//ACME//FortuneTeller//MindReader", "Goocher!", "REG_SZ");
var bKey = WshShell.RegRead ("HKCU//Software//ACME//FortuneTeller//");
WScript.Echo (WshShell.RegRead ("HKCU//Software//ACME//FortuneTeller//MindReader"));
WshShell.RegDelete ("HKCU//Software//ACME//FortuneTeller//MindReader");
WshShell.RegDelete ("HKCU//Software//ACME//FortuneTeller//");
WshShell.RegDelete ("HKCU//Software//ACME//");
</SCRIPT>

TABLAE相关(客户端动态增加行列）
<HTML>
<SCRIPT LANGUAGE="JScript">
function numberCells() {
    var count=0;
    for (i=0; i < document.all.mytable.rows.length; i++) {
        for (j=0; j < document.all.mytable.rows(i).cells.length; j++) {
            document.all.mytable.rows(i).cells(j).innerText = count;
            count++;
        }
    }
}
</SCRIPT>
<BODY οnlοad="numberCells()">
<TABLE id=mytable border=1>
<TR><TH> </TH><TH> </TH><TH> </TH><TH> </TH></TR>
<TR><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR>
<TR><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR>
</TABLE>
</BODY>
</HTML>

１．身份证严格验证：

document.write(cidInfo("380524198002300016"),"<br/>");
document.write(cidInfo("340524198002300019"),"<br/>")
document.write(cidInfo("340524197711111111"),"<br/>")
document.write(cidInfo("34052419800101001x"),"<br/>");
</script>

２．验证ＩＰ地址
<SCRIPT LANGUAGE="java script">
function isip(s){
var check=function(v){try{return (v<=255 && v>=0)}catch(x){return false}};
var re=s.split(".")
return (re.length==4)?(check(re[0]) && check(re[1]) && check(re[2]) && check(re[3])):false
}

var s="202.197.78.129";
alert(isip(s))
</SCRIPT>

３．加sp1后还能用的无边框窗口！！
<HTML XMLNS:IE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<IE:Download ID="include" STYLE="behavior:url(#default#download)" />
<title>Chromeless Window</title>

<SCRIPT LANGUAGE="JScript">
/*--- Special Thanks For andot ---*/

/*
This following code are designed and writen by Windy_sk <seasonx@163.net>
You can use it freely, but u must held all the copyright items!
*/

/*--- Thanks For andot Again ---*/

var CW_width = 400;
var CW_height = 300;
var CW_top = 100;
var CW_left = 100;
var CW_url = "/";
var New_CW = window.createPopup();
var CW_Body = New_CW.document.body;
var content = "";
var CSStext = "margin:1px;color:black; border:2px outset;border-style:expression(οnmοuseοut=οnmοuseup=function(){this.style.borderStyle='outset'}, οnmοusedοwn=function(){if(event.button!=2)this.style.borderStyle='inset'});background-color:buttonface;width:16px;height:14px;font-size:12px;line-height:11px;cursor:Default;";

//Build Window
include.startDownload(CW_url, function(source){content=source});

function insert_content(){
var temp = "";
CW_Body.style.overflow = "hidden";
CW_Body.style.backgroundColor = "white";
CW_Body.style.border = "solid black 1px";
content = content.replace(/<a ([^>]*)>/g,"<a οnclick='parent.open(this.href);return false' $1>");
temp += "<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>";
temp += "<tr style=';font-size:12px;background:#0099CC;height:20;cursor:default' οndblclick=/"Max.innerText=Max.innerText=='1'?'2':'1';parent.if_max=!parent.if_max;parent.show_CW();/" οnmοuseup='parent.drag_up(event)' οnmοusemοve='parent.drag_move(event)' οnmοusedοwn='parent.drag_down(event)' onselectstart='return false' οncοntextmenu='return false'>";
temp += "<td style='color:#ffffff;padding-left:5px'>Chromeless Window For IE6 SP1</td>";
temp += "<td style='color:#ffffff;padding-right:5px;' align=right>";
temp += "<span id=Help οnclick=/"alert('Chromeless Window For IE6 SP1 - Ver 1.0//n//nCode By Windy_sk//n//nSpecial Thanks For andot')/" style=/""+CSStext+"font-family:System;padding-right:2px;/">?</span>";
temp += "<span id=Min οnclick='parent.New_CW.hide();parent.blur()' style=/""+CSStext+"font-family:Webdings;/" title='Minimum'>0</span>";
temp += "<span id=Max οnclick=/"this.innerText=this.innerText=='1'?'2':'1';parent.if_max=!parent.if_max;parent.show_CW();/" style=/""+CSStext+"font-family:Webdings;/" title='Maximum'>1</span>";
temp += "<span id=Close οnclick='parent.opener=null;parent.close()' style=/""+CSStext+"font-family:System;padding-right:2px;/" title='Close'>x</span>";
temp += "</td></tr><tr><td colspan=2>";
temp += "<div id=include style='overflow:scroll;overflow-x:hidden;overflow-y:auto; HEIGHT: 100%; width:"+CW_width+"'>";
temp += content;
temp += "</div>";
temp += "</td></tr></table>";
CW_Body.innerHTML = temp;
}

setTimeout("insert_content()",1000);

window.onfocus = show_CW;
window.onresize = show_CW;

// Move Window
var drag_x,drag_y,draging=false

function drag_move(e){
if (draging){
New_CW.show(e.screenX-drag_x, e.screenY-drag_y, CW_width, CW_height);
return false;
}
}

function drag_down(e){
if(e.button==2)return;
if(New_CW.document.body.offsetWidth==screen.width && New_CW.document.body.offsetHeight==screen.height)return;
drag_x=e.clientX;
drag_y=e.clientY;
draging=true;
e.srcElement.setCapture();
}

function drag_up(e){
draging=false;
e.srcElement.releaseCapture();
if(New_CW.document.body.offsetWidth==screen.width && New_CW.document.body.offsetHeight==screen.height) return;
CW_top = e.screenX-drag_x;
CW_left = e.screenY-drag_y;
}

</SCRIPT>
</HTML>

电话号码的验证

要求：
　　(1)电话号码由数字、"("、")"和"-"构成
　　(2)电话号码为3到8位
　　(3)如果电话号码中包含有区号，那么区号为三位或四位
　　(4)区号用"("、")"或"-"和其他部分隔开
　　(5)移动电话号码为11或12位，如果为12位,那么第一位为0
　　(6)11位移动电话号码的第一位和第二位为"13"
　　(7)12位移动电话号码的第二位和第三位为"13"
　　根据这几条规则，可以与出以下正则表达式：
　　(^[0-9]{3,4}/-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^/([0-9]{3,4}/)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)

具有在输入非数字字符不回显的效果，即对非数字字符的输入不作反应。
function numbersonly(field,event){
var key,keychar;
if(window.event){
key = window.event.keyCode;
}
else if (event){
key = event.which;
}
else{
return true
}
keychar = String.fromCharCode(key);
if((key == null)||(key == 0)||(key == 8)||(key == 9)||(key == 13)||(key == 27)){
return true;
}
else if(("0123456789.").indexOf(keychar)>-1){
window.status = "";
return true;
}
else {
window.status = "Field excepts numbers only";
return false;
}
}

验证ip

str=document.RegExpDemo.txtIP.value;
if(/^(/d{1,3})/.(/d{1,3})/.(/d{1,3})/.(/d{1,3})$/.test(str)==false)
{
window.alert('错误的IP地址格式');
document.RegExpDemo.txtIP.select();
document.RegExpDemo.txtIP.focus();
return;
}
if(RegExp.$1<1 || RegExp.$1>254||RegExp.$2<0||RegExp.$2>254||RegExp.$3<0||RegExp.$3>254||RegExp.$4<1||RegExp.$4>254)
{
window.alert('错误的IP地址');
document.RegExpDemo.txtIP.select();
document.RegExpDemo.txtIP.focus();
return;
}
//剔除如 010.020.020.03 前面的0
var str=str.replace(/0(/d)/g,"$1");
str=str.replace(/0(/d)/g,"$1");
window.alert(str);
我想我是找到依靠了；那位高手能指导我一下如何在网页中设计可输入文字的select框，并且需要动态提示功能，我到阿信的网上看到了一个，但保存到本机就无法实现动态提示了，各位请指教；email:wangwq@atools.cn
附：在阿信那儿获得的东东
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="Author" content="阿信,fason">
<meta name="KeyWords" content="下拉框,输入,阿信,fason">
<title>漂亮下拉框</title>
<style>
.selectBox{border:1px solid #993300;height:20px;}
.editBox{border:0px;width:100px;cursor:default;width:100%;height:19px;padding-top:2px;margin:1px}
.dropdownbutton{font-size:12px;font-family:webdings;color:#CCFF66;height:20px;background-color:#993300;border:1px solid #993300;padding:0 2;margin:1px;cursor:default}
.selectContent{position:absolute;border:1px solid #993300;visibility:hidden;z-index:1000;background-color:#FFFFFF}
.selectContent tr{height:20px;cursor:default}
.selectContent td{font-size:12px;font-family:Vendana;padding:2 3}
.OnFocus{color:#FFFFFF;background-color:#993300}
</style>
<script language="javascript">
var CoolSelect=[]
var CurrentTR=null
function MouseOver(trObj){
if(!CurrentTR)CurrentTR=trObj
CurrentTR.className=""
trObj.className="OnFocus"
CurrentTR=trObj;
}

function ButtonOver(BtnObj){
BtnObj.style.backgroundColor='#cc3300'
}
function ButtonOut(BtnObj){
BtnObj.style.backgroundColor='#993300'
}
function MouseClick(Index,trObj){
with(GetObj(CoolSelect[Index][1])){
value=trObj.innerText;
style.backgroundColor='#993300'
style.color='#FFFFFF'
focus()
}
DropDown(Index)
}

function GoURL(trObj){
var url=trObj.getAttribute("url")
if(url&&url!="")window.open(url)
}

function BoxBlur(InputBox){
with(InputBox.style){backgroundColor="";color=''}
}

function DropDown(Index){
event.cancelBubble=true
ContainerReset(Index)
var show=GetObj(CoolSelect[Index][2]).style.visibility=='visible'
GetObj(CoolSelect[Index][2]).style.visibility=show?'hidden':'visible'
setPosition(Index)
}

function document::onclick(){
for(i=0;i<CoolSelect.length;i++){
GetObj(CoolSelect[i][2]).style.visibility='hidden'
with(GetObj(CoolSelect[i][2]))for(j=0;j<rows.length;j++)rows[j].style.display=""
}
}

function window::onresize(){
for(i=0;i<CoolSelect.length;i++)setPosition(i)
}

function ContainerReset(Index){
var container=GetObj(CoolSelect[Index][2])
for(i=0;i<container.rows.length;i++)container.rows[i].style.display=""
if(CurrentTR)CurrentTR.className=""
}

function Init(){
CoolSelect[0]=["ConTainer1","txt1","select1"]
CoolSelect[1]=["ConTainer2","txt2","select2"]
for(i=0;i<CoolSelect.length;i++){
var s=GetObj(CoolSelect[i][0])
var container=GetObj(CoolSelect[i][2])
container.style.width=s.offsetWidth>container.offsetWidth?s.offsetWidth:container.offsetWidth
setPosition(i)
}
}
function GetObj(id){return document.getElementById(id)}
</script>
</head>

<div align="center">
<table style="width:250;border:2px solid groove;font-size:12px" border=1 cellspacing=0 cellpadding=0>
<tr bgcolor="green" style="font-weight:bold;color:#FFFFFF">
<td>输入，提示功能示例</td><td>菜单跳转示例</td>
</tr>
<tr>
    <td>
<table id="Container1" class="selectBox" border="0" width=100 cellspacing=0 cellpadding=0>
<tr>
    <td><input name="txt1" value=" 请选择 " class="editBox" οnblur="BoxBlur(this)" οnclick="DropDown(0)" οnkeyup="showTip(0)"></td>
    <td width="1"><span class="dropdownbutton" οnmοuseοver="ButtonOver(this)" οnmοuseοut="ButtonOut(this)" οnclick="DropDown(0)">6</span></td>
</tr>
</table>
    </td>
    <td>
<table id="Container2" class="selectBox" border="0" cellspacing=0 cellpadding=0>
<tr>
    <td><input name="txt2" readOnly=true value=" 请选择 " class="editBox" οnblur="BoxBlur(this)" οnclick="DropDown(1)" οnkeyup="showTip(1)"></td>
    <td width="1"><span class="dropdownbutton" οnmοuseοver="ButtonOver(this)" οnmοuseοut="ButtonOut(this)" οnclick="DropDown(1)">6</span></td>
</tr>
</table>
    </td>
</tr>
</table>
</div>
<table id="select1" class="selectContent" cellspacing=0 cellpadding=0>
<tr οnmοuseοver="MouseOver(this)" οnclick="MouseClick(0,this)" title="作者:Andy">
    <td>一起走过的日子</td>
</tr>
<tr οnmοuseοver="MouseOver(this)" οnclick="MouseClick(0,this)" title="作者:Andy">
    <td>你是我的温柔</td>
</tr>
<tr οnmοuseοver="MouseOver(this)" οnclick="MouseClick(0,this)" title="作者:Andy">
    <td>你是我的女人</td>
</tr>
</table>
<table id="select2" class="selectContent" cellspacing=0 cellpadding=0>
<tr οnmοuseοver="MouseOver(this)" οnclick="MouseClick(1,this);GoURL(this)" url="http://expert.csdn.net/expert/forum.asp">
    <td>CSDN论坛</td>
</tr>
<tr οnmοuseοver="MouseOver(this)" οnclick="MouseClick(1,this);GoURL(this)" url="http://msdn.microsoft.com/library/">
    <td>MSDN参考</td>
</tr>
<tr οnmοuseοver="MouseOver(this)" οnclick="MouseClick(1,this);GoURL(this)" url="http://www.iecn.net">
    <td>IECN论坛</td>
</tr>
</table>
</body>
</html>

By wsq | 个人主页 | 引用 | 返回

? 回复:在b/s开发中经常用到的javaScript技术

2004-12-17 15:27:15

【1、最基本的弹出窗口代码】
其实代码非常简单：
<SCRIPT LANGUAGE="javascript">

</SCRIPT>
因为这是一段javascripts代码，所以它们应该放在<SCRIPT LANGUAGE="javascript">之间。是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。
window.open ('page.html') 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。
用单引号和双引号都可以，只是不要混用。
这一段代码可以加入HTML的任意位置，<head>和</head>之间可以，<body>间</body>也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。
【2、经过设置后的弹出窗口】
下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。
<SCRIPT LANGUAGE="javascript">

</SCRIPT>
参数解释：
<SCRIPT LANGUAGE="javascript"> js脚本开始；
window.open 弹出新窗口的命令；
'page.html' 弹出窗口的文件名；
'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
</SCRIPT> js脚本结束
【3、用函数控制弹出窗口】
下面是一个完整的代码：
<html>
<head>
<script LANGUAGE="JavaScript">

</script>
</head>
<body οnlοad="openwin()">
...任意的页面内容...
</body>
</html>
　这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。
怎么调用呢？
　方法一：<body οnlοad="openwin()"> 浏览器读页面时弹出窗口；
　方法二：<body οnunlοad="openwin()"> 浏览器离开页面时弹出窗口；
　方法三：用一个连接调用：<a href="#" οnclick="openwin()">打开一个窗口</a>
注意：使用的“#”是虚连接。
　方法四：用一个按钮调用：<input type="button" οnclick="openwin()" value="打开窗口">
【4、同时弹出2个窗口】
对源代码稍微改动一下：
<script LANGUAGE="JavaScript">

</script>
　为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。
注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。OK？

【5、主窗口打开文件1.htm，同时弹出小窗口page.html】
如下代码加入主窗口<head>区：
<script language="javascript">

</script>
加入<body>区：
<a href="1.htm" οnclick="openwin()">open</a>即可。
【6、弹出的窗口之定时关闭控制】
下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中，可不是主页面中，否则...)，让它10秒后自动关闭是不是更酷了？
首先，将如下代码加入page.html文件的<head>区：
<script language="JavaScript">
function closeit() {
setTimeout("self.close()",10000) //毫秒
}
</script>
然后，再用<body οnlοad="closeit()"> 这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。)
【7、在弹出窗口中加上一个关闭按钮】
<FORM>
<INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'>
</FORM>
呵呵，现在更加完美了！
【8、内包含的弹出窗口-－－一个页面两个窗口】
上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。通过下面的例子，你可以在一个页面内完成上面的效果。
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function openwin()
{
OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="+scroll+",menubar=no");
//写成一行
OpenWindow.document.write("<TITLE>例子</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")
OpenWindow.document.write("<h1>Hello!</h1>")
OpenWindow.document.write("New window opened!")
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")
OpenWindow.document.close()
}
</SCRIPT>
</head>
<body>
<a href="#" οnclick="openwin()">打开一个窗口</a>
<input type="button" οnclick="openwin()" value="打开窗口">
</body>
</html>
看看OpenWindow.document.write()里面的代码不就是标准的HTML吗？只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。
【9、终极应用--弹出的窗口之Cookie控制】
回想一下，上面的弹出窗口虽然酷，但是有一点小毛病(沉浸在喜悦之中，一定没有发现吧？)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)，那么每次刷新这个页面，窗口都会弹出一次，是不是非常烦人？:-(
有解决的办法吗？当然有！我们使用cookie来控制一下就可以了。首先，将如下代码加入主页面HTML的<HEAD>区：
<script>
function openwin(){
window.open("page.html","","width=200,height=200")
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie('popped')==''){
openwin()
document.cookie="popped=yes"
}
}
</script>
　然后，用<body οnlοad="loadpopup()">（注意不是openwin而是loadpop啊！）替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。真正的Pop-Only-Once！

By wsq | 个人主页 | 引用 | 返回

? 回复:在b/s开发中经常用到的javaScript技术

2004-12-17 15:26:35

右键级联菜单３（同一ＩＤ不能回复三次，只好用马甲了^_^）
<HTML>

<HEAD>

<!--

body {font-size: 9pt;}

table {font-size: 9pt; cursor: default; margin: 0;}

tr {height: 20;}

tr.over {font-size: 9pt; color: #ffffff; background-color: #66aadd; cursor: default;}

tr.out {font-size: 9pt; color: #ffffff; background-color: #336699; cursor: default;}

div.rm_div {position: absolute; filter: Alpha(Opacity='95'); display: none; border: 2px outset #3377aa; background-color: #336699; width: 0; height: 0;}

hr.sperator {border: 1px inset #3377aa;}

-->

</style>

//************************************************

//此处插入以上代码

//************************************************

</script>

</HEAD>

<!--

var menu = new RightMenu();

menu.AddExtendMenu("location","我的链接","rbpm");

menu.AddExtendMenu("lscit","四川工业学院校园网","location");

menu.AddItem("scit_scit","川工首页","lscit","http://www.scit.edu.cn");

menu.AddItem("scit_lib","川工图书馆","lscit","http://202.115.151.46");

menu.AddItem("sperator","","lscit",null);

menu.AddItem("scit_century","世纪学苑","lscit","http://202.115.148.230/");

menu.AddItem("scit_the5","第五空间","lscit","http://the5.scit.edu.cn/");

menu.AddItem("scit_lianyi","联谊网站","lscit","http://202.115.148.240");

menu.AddItem("scit_message","信息导报","lscit","http://202.115.151.114/xx");

menu.AddItem("scit_student","书生之家川工境象","lscit","http://202.115.151.100");

menu.AddItem("sperator","","lscit",null);

menu.AddItem("scit_bbs","川工ＢＢＳ","lscit","http://202.115.144.32");

menu.AddItem("scit_cbbs","世纪学苑ＢＢＳ","lscit","http://202.115.144.37");

menu.AddExtendMenu("stunet","学生网站","location");

menu.AddItem("stu_century","世纪学苑","stunet","http://202.115.148.230/");

menu.AddItem("stu_wjl","望江楼","stunet","http://wjl.scu.edu.cn");

menu.AddItem("stu_freedim","自由天地","stunet","http://www.freedim.net/");

menu.AddItem("stu_stuhome","学生之家","stunet","http://www.stuhome.net");

menu.AddItem("stu_rw","人文网","stunet","http://www.rw.uestc.edu.cn/");

menu.AddItem("stu_the5","第五空间","stunet","http://the5.scit.edu.cn/");

menu.AddItem("stu_flying","我心飞扬","stunet","http://flying.swpi.edu.cn/");

menu.AddItem("stu_21cn","21CN校园网","stunet","http://www.21cn.edu.cn/");

menu.AddItem("stu_yaguo","网虫乐园","stunet","http://www.yaguo.com/");

menu.AddItem("sperator","","location",null);

menu.AddExtendMenu("computer","电脑类网站","location");

menu.AddExtendMenu("C_all","综合性网站","computer");

menu.AddItem("ca_yesky","天极网","C_all","http://www.yesky.com");

menu.AddExtendMenu("C_program","程序员网站","computer");

menu.AddItem("cp_program","中国程序员网站","C_program","http://www.chinaprogrammer.com/");

menu.AddItem("sperator","","C_program",null);

menu.AddItem("cp_51js","无忧脚本","C_program","http://www.51js.com/");

menu.AddItem("sperator","","C_program",null);

menu.AddItem("cp_active","中国动感技术网络","C_program","http://www.chinaasp.com/active/");

menu.AddItem("cp_aspcn","ASP中华网","C_program","http://www.aspcn.com/");

menu.AddItem("cp_aspx","中国ASP联盟","C_program","http://www.chinaspx.com/");

menu.AddExtendMenu("C_magzine","杂志网站","computer");

menu.AddItem("cm_cpcw","电脑报","C_magzine","http://www.cpcw.com");

menu.AddItem("cm_cfan","电脑爱好者","C_magzine","http://www.cfan.net.cn");

menu.AddItem("cm_popsoft","大众软件","C_magzine","http://www.popsoft.com");

menu.AddExtendMenu("C_luntan","技术性论坛","computer");

menu.AddItem("cl_chinaasp","ChinaASP论坛","C_luntan","http://www.chinaasp.com/sqlbbs");

menu.AddExtendMenu("C_book","书籍下载","computer");

menu.AddItem("cb_huachu","华储网上书店","C_book","http://www.huachu.com.cn/");

menu.AddExtendMenu("hacker","黑客天地","location");

menu.AddItem("hk_honker","<font style='color: #ff0000;'>中国红客联盟</font>","hacker","http://www.cnhonker.com");

menu.AddItem("sperator","","location",null);

menu.AddExtendMenu("lmovie","影视天地","location");

menu.AddItem("mov_wcums","华西网上影院","lmovie","http://202.115.100.8/");

menu.AddExtendMenu("lmusic","音乐空间","location");

menu.AddItem("mus_tyfo","天虎音乐网","lmusic","http://music.tyfo.com/");

menu.AddItem("mus_langqin","浪琴音乐","lmusic","http://www.langqin.net/");

menu.AddItem("mus_wcums","华西音乐空间","lmusic","http://music.wcums.edu.cn/");

menu.AddExtendMenu("lmud","泥巴链接","location");

menu.AddItem("lmud_mudking","泥巴大王","lmud","http://www.mudking.com");

menu.AddItem("lmud_justmud","泥巴城堡","lmud","http://www.justmud.com");

menu.AddItem("lmud_mudall","世界泥巴资源","lmud","http://www.mudall.com");

menu.AddItem("lmud_yaguo","泥潭风云","lmud","http://202.114.98.14/mud/");

menu.AddItem("sperator","","location",null);

menu.AddExtendMenu("lemail","电子邮局","location");

menu.AddItem("email_263","263免费电子邮局","lemail","http://freemail.263.net");

menu.AddExtendMenu("collections","综合性网站","location");

menu.AddItem("coll_chinaren","中国人网站","collections","http://www.chinaren.com/");

menu.AddItem("coll_etang","亿唐网站","collections","http://www.etang.com/");

menu.AddItem("coll_263","263首都在线","collections","http://www.263.net/");

menu.AddExtendMenu("leave","离开","rbpm");

menu.AddItem("forward","前进","leave",null);

menu.AddItem("back","后退","leave",null);

menu.AddItem("sperator","","leave",null);

menu.AddItem("exit","退出","leave",null);

menu.AddItem("viewcode","查看源代码","rbpm",null);

menu.AddItem("refresh","刷新","rbpm",null);

menu.AddItem("sperator","","rbpm",null);

menu.AddItem("help","帮助","rbpm",null);

menu.AddItem("sperator","","rbpm",null);

menu.AddItem("author","<font style='color: #ff0000'>关于作者</font>","rbpm",null);

document.writeln(menu.GetMenu());

snwcwt.innerText=menu.GetMenu();

-->

</script>

</BODY>

</HTML>

zl198183

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
在b/s开发中经常用到的javaScript技术

一、验证类1、数字验证内 1.1 整数 1.2 大于0的整数（用于传来的ID的验证) 1.3 负整数的验证 1.4 整数不能大于iMax 1.5 整数不能小于iMin2、时间类 2.1 短时间，形如 (13:04:06) 2.2 短日期，形如 (2003-12-05) 2.3 长时间，形如 (2003-12-05 13:04:06) 2.4 只有年和月。形如(2003-05,或
复制链接

扫一扫