常用的js腳本
BS開發(fā)中常用的Javascript技術(shù)
一、驗證類
1、數(shù)字驗證內(nèi)
1.1 整數(shù)
1.2 大于0的整數(shù) （用于傳來的ID的驗證)
1.3 負整數(shù)的驗證
1.4 整數(shù)不能大于iMax
1.5 整數(shù)不能小于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 判斷字符由字母和數(shù)字組成。
4.3 判斷字符由字母和數(shù)字，下劃線,點號組成.且開頭的只能是下劃線和字母
4.4 字符串替換函數(shù).Replace();
5、瀏覽器類
5.1 判斷瀏覽器的類型
5.2 判斷ie的版本
5.3 判斷客戶端的分辨率
6、結(jié)合類
6.1 email的判斷。
6.2 手機號碼的驗證
6.3 身份證的驗證
二、功能類
1、時間與相關(guān)控件類
1.1 日歷
1.2 時間控件
1.3 萬年歷
1.4 顯示動態(tài)顯示時鐘效果（文本，如OA中時間）
1.5 顯示動態(tài)顯示時鐘效果 (圖像，像手表)
2、表單類
2.1 自動生成表單
2.2 動態(tài)添加，修改，刪除下拉框中的元素
2.3 可以輸入內(nèi)容的下拉框
2.4 多行文本框中只能輸入iMax文字。如果多輸入了，自動減少到iMax個文字（多用于短信發(fā)送)
3、打印類
3.1 打印控件
4、事件類
4.1 屏蔽右鍵
4.2 屏蔽所有功能鍵
4.3 --> 和<-- F5 F11,F9,F1
4.4 屏蔽組合鍵ctrl+N
5、網(wǎng)頁設(shè)計類
5.1 連續(xù)滾動的文字，圖片（注意是連續(xù)的，兩段文字和圖片中沒有空白出現(xiàn)）
5.2 html編輯控件類
5.3 顏色選取框控件
5.4 下拉菜單
5.5 兩層或多層次的下拉菜單
5.6 仿IE菜單的按鈕。（效果如rongshuxa.com的導航欄目)
5.7 狀態(tài)欄，title欄的動態(tài)效果（例子很多，可以研究一下）
5.8 雙擊后，網(wǎng)頁自動滾屏
6、樹型結(jié)構(gòu)。
6.1 asp+SQL版
6.2 asp+xml+sql版
6.3 java+sql或者java+sql+xml
7、無邊框效果的制作
8、連動下拉框技術(shù)
9、文本排序
10，畫圖類，含餅、柱、矢量貝滋曲線
11，操縱客戶端注冊表類
12，DIV層相關(guān)（拖拽、顯示、隱藏、移動、增加）
13，TABLAE相關(guān)(客戶端動態(tài)增加行列，模擬進度條，滾動列表等)
14，各種<object classid=>相關(guān)類，如播放器，flash與腳本互動等
16, 刷新/模擬無刷新 異步調(diào)用類（XMLHttp或iframe,frame）
<script language="JavaScript">
<!--
function check(text){
var checkstr,iMax=5,iMin=3
checkstr="isInt:"+(parseInt(text)==text)+"\n"
checkstr+="isID:"+((parseInt(text)==text)&&(text>=0))+"\n"
checkstr+="小于"+iMax+":"+((parseInt(text)==text)&&(text<iMax))+"\n"
checkstr+="大于"+iMin+":"+((parseInt(text)==text)&&(text>iMin))+"\n"
alert(checkstr)
}
//-->
<form method=post action="">
<input type="text" id="text1" onchange="check(this.value)">
</form>
4、事件類
4.1 屏蔽右鍵
在body標簽里加上oncontextmenu=self.event.returnValue=false
4.2 屏蔽所有功能鍵
4.3 --> 和<-- F5 F11,F9,F1
4.4 屏蔽組合鍵ctrl+N
<script language=javascript>
function KeyDown(){
if ((window.event.altKey)&&
((window.event.keyCode==37)|| //屏蔽 Alt+ 方向鍵 ←
(window.event.keyCode==39))){ //屏蔽 Alt+ 方向鍵 →
alert("不準你使用ALT+方向鍵前進或后退網(wǎng)頁！"
;
event.returnValue=false;
}
if ((event.keyCode==8)|| //屏蔽退格刪除鍵
(event.keyCode==116)){ //屏蔽 F5 刷新鍵
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 (event.keyCode==122){ //屏蔽 F11
event.returnValue=false;
}
}
只要知道keyCode即可屏蔽所有功能鍵
一、驗證類
1、數(shù)字驗證內(nèi)
1.1 整數(shù)
/^(-|\+)?\d+＄/.test(str)
1.2 大于0的整數(shù) （用于傳來的ID的驗證)
/^\d+＄/.test(str)
1.3 負整數(shù)的驗證
/^-\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('輸入的參數(shù)不是時間格式'); 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 onblur="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 onblur="if(/[^a-zA-Z]/g.test(this.value))alert('有錯')">
4.2 判斷字符由字母和數(shù)字組成。
<input onblur="if(/[^0-9a-zA-Z]/g.test(this.value))alert('有錯')">
4.3 判斷字符由字母和數(shù)字，下劃線,點號組成.且開頭的只能是下劃線和字母
/^([a-zA-z_]{1})([\w]*)＄/g.test(str)
4.4 字符串替換函數(shù).Replace();
5、瀏覽器類
5.1 判斷瀏覽器的類型
window.navigator.appName
5.2 判斷ie的版本
window.navigator.appVersion
5.3 判斷客戶端的分辨率
window.screen.height; window.screen.width;
6、結(jié)合類
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("輸入的不是數(shù)字！"
; 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("輸入的數(shù)字位數(shù)不對！"
; 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 onclick="checkAll('mm')">全選<br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/><br/>
<input type=checkbox name=All2 onclick="checkAll('mm2')">全選<br/>
<input type=checkbox name=mm2 onclick="checkItem('All2')"><br/>
<input type=checkbox name=mm2 onclick="checkItem('All2')"><br/>
<input type=checkbox name=mm2 onclick="checkItem('All2')"><br/>
<input type=checkbox name=mm2 onclick="checkItem('All2')"><br/>
<input type=checkbox name=mm2 onclick="checkItem('All2')"><br/>
</form>
<SCRIPT LANGUAGE="JavaScript">
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 onchange="alert(this.value.match(/^(.*)(\.)(.{1,8})＄/)[3])">
不斷地清空剪貼板:
<body onload="setInterval('clipboardData.setData(\'Text\',\'\')',100)">
<script language="JavaScript" type="text/JavaScript">
//先復制一樣東西，或者文本或者圖片
if(clipboardData.getData("Text"
||clipboardData.getData("HTML"
||
clipboardData.getData("URL"
)
{
alert("有效行為"
;
}
全屏技術(shù)：
真正的全屏頁面解決之道！（全代碼）
真正全屏解決之道：
1.htm
<title>無標題文檔</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<body onload="window.open('fullscreen.htm',','fullscreen=1,scroll=no');">
fullscreen.htm
<title>無標題文檔</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript1.2">
<!--
function opensmallwin(myurl){
var w2=300;//想彈出窗口的寬度
var h2=100;//想彈出窗口的高度
var w3=window.screen.width/2-w2/2;
var h3=window.screen.height/2-h2/2;
window.open(myurl,'small','toolbar=no,location=no,directories=no,status=no,menubar=no,
scrollbars=no,resizable=0,width='+ w2 +',height='+ h2 +',left='+ w3 +',top='+ h3 +');
}
//-->
<!--
function modelesswin(url,mwidth,mheight){
if (document.all&&window.print)
eval('window.external.m2_blocked(url,"","help:0;resizable:0;status:0;center:1;
scroll:0;dialogWidth:'+mwidth+'px;dialogHeight:'+mheight+'px"
')
else
eval('window.open(url,"","width='+mwidth+'px,height='+mheight+'px,resizable=1,
scrollbars=1"
')
}
//-->
<body scroll="no">
<div align="right"><a href="javascript:" onclick="window.close()">關(guān)閉
</a> </div>
<p></P>
<div align="right"><a href="javascript:" onclick="opensmallwin('login.htm')">登錄
</a> </div>
<p></P>
<div align="center"><a href="javascript:"
onclick="modelesswin('login.htm',300,160)">用模態(tài)登錄窗口</a> </div>
login.htm
<title>用戶登錄</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
body {
background-color: #EAEAEA;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
color: #336699;
}
input.boxline {
width: 100px;
font-family: "Times New Roman", "Times", "serif";
font-size: 9pt;
border: 1px solid #669999;
height: 18px;
}
input.whiteline {
font-size: 12px; border: 1px #999999 solid
}
-->
</style>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0" cellpadding="0"
cellspacing="14" bgcolor="#CCCCCC">
<tr valign="top">
<td width="10%" nowrap align="right"><b>用戶名：</b></td>
<td width="90%"><input name="textfield1" type="text" size="25"
class="whiteline"></td>
</tr>
<tr valign="top">
<td nowrap align="right"><b>密 碼：</b></td>
<td><input name="textfield12" type="password" size="25"
class="whiteline"></td>
</tr>
<tr valign="top">
<td> </td>
<td><input type="submit" name="Submit" value="登 錄"
class="boxline"></td>
</tr>
</table>
自動關(guān)掉原窗口：
<title>無標題文檔</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<body onload="window.open('fullscreen.htm',','fullscreen=1,scroll=no');
window.opener=null;window.close()">
<input type=button value=關(guān)閉 onclick="window.opener=null;window.close()">
<!-- IE5.5+ 不會有彈出提示 -->
<OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2
height=0 width=0></OBJECT>
<input type=button value=關(guān)閉窗口 onclick=document.all.WebBrowser.ExecWB(45,1)>
關(guān)鍵是在onload事件中加入：
window.opener=null;window.close()
預讀圖片：
<SCRIPT LANGUAGE="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! <a href=
http://javascript.internet.com target=_blank>
http://javascript.internet.com -->
<!-- Begin
image1 = new Image();
image1.src = "image1.gif";
image2 = new Image();
image2.src = "image2.gif";
// End -->
關(guān)于兩個網(wǎng)頁刷新交互的問題
JS處理方法：
a.htm
<a href="b.htm" target=blank>發(fā)表留言</a>
alert("wwwwwwwwwwwwwwwwwwwwwwwwww"
;
b.htm
<script language="javascript">
//window.opener.location.reload();刷新父窗口
//window.opener.location="2.htm"http://重定向父窗口到2.htm頁
function closewindow()
{
window.opener.location.reload();
self.close();
window.opener.document.write("sssssssssssssssssss"
;
}
<a href="b.htm" target=blank onclick="closewindow();">關(guān)閉</a>
后臺處理方法：
private btnForSubmit(Object sender,EventArgs e)
{
.............
Response.Write("window.opener.document.execCommand('refresh');
window.opener=';window.close();"
;
//string str="window.opener.document.execCommand('refresh');
window.opener=';window.close();";
//this.RegisterStartupScript("mycode",str);
external.m2_blocked()、external.m2_blocked()方法使用詳解
Javascript有許多內(nèi)建的方法來產(chǎn)生對話框，如：window.alert(),
window.confirm(),window.prompt().等。 然而IE提供更多的方法支持對話框。如：
external.m2_blocked() (IE 4+ 支持)
external.m2_blocked() (IE 5+ 支持)
window.external.m2_blocked()方法用來創(chuàng)建一個顯示HTML內(nèi)容的模態(tài)對話框，
由于是對話框，因此它并沒有一般用window.open()打開的窗口的所有屬性。
window.external.m2_blocked()方法用來創(chuàng)建一個顯示HTML內(nèi)容的非模態(tài)對話框。
當我們用external.m2_blocked()打開窗口時，不必用window.close()去關(guān)閉它，
當以非模態(tài)方式[IE5]打開時， 打開對話框的窗口仍可以進行其他的操作，即對話框
不總是最上面的焦點，當打開它的窗口ＵＲＬ改變時，它自動關(guān)閉。而模態(tài)[ＩＥ４]
方式的對話框始終有焦點（焦點不可移走，直到它關(guān)閉）。模態(tài)對話框和打開它的窗
口相聯(lián)系，因此我們打開另外的窗口時，他們的鏈接關(guān)系依然保存，并且隱藏在活動
窗口的下面。
使用方法如下：
vReturnValue=window.external.m2_blocked(sURL [,vArguments] [,sFeatures])
vReturnValue=window.external.m2_blocked(sURL [,vArguments] [,sFeatures])
參數(shù)說明：
sURL
必選參數(shù)，類型：字符串。用來指定對話框要顯示的文檔的URL。
vArguments
可選參數(shù)，類型：變體。用來向?qū)υ捒騻鬟f參數(shù)。傳遞的參數(shù)類型不限，包括數(shù)組等。
對話框通過window.dialogArguments來取得傳遞進來的參數(shù)。
sFeatures
可選參數(shù)，類型：字符串。用來描述對話框的外觀等信息，可以使用以下的一個或幾個，
用分號“;”隔開。
dialogHeight 對話框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth
默認的單位是em，而ＩＥ５中是px，為方便其見，在定義modal方式的對話框時，用px
做單位。
dialogWidth: 對話框?qū)挾取?nbsp;
dialogLeft: 距離桌面左的距離。
dialogTop: 離桌面上的距離。
center: {yes | no | 1 | 0 }：窗口是否居中，默認yes，但仍可以指定高度和寬度。
help: {yes | no | 1 | 0 }：是否顯示幫助按鈕，默認yes。
resizable: {yes | no | 1 | 0 } [ＩＥ５＋]：是否可被改變大小。默認no。
status: {yes | no | 1 | 0 } [IE5+]：是否顯示狀態(tài)欄。默認為yes[ Modeless]
或no[Modal]。
scroll:{ yes | no | 1 | 0 | on | off }：指明對話框是否顯示滾動條。默認為yes。
還有幾個屬性是用在HTA中的，在一般的網(wǎng)頁中一般不使用。
dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印預覽時對話框是否隱藏。
默認為no。
edge:{ sunken | raised }：指明對話框的邊框樣式。默認為raised。
unadorned:{ yes | no | 1 | 0 | on | off }：默認為no。
傳入?yún)?shù)：
要想對話框傳遞參數(shù)，是通過vArguments來進行傳遞的。類型不限制，對于字符串類型，
最大為4096個字符。也可以傳遞對象，例如：
test1.htm
====================
var mxh1 = new Array("mxh","net_lover","孟子E章"
var mxh2 = window.open("about:blank","window_mxh"
// 向?qū)υ捒騻鬟f數(shù)組
window.external.m2_blocked("test2.htm",mxh1)
// 向?qū)υ捒騻鬟fwindow對象
window.external.m2_blocked("test3.htm",mxh2)
test2.htm
====================
var a = window.dialogArguments
alert("您傳遞的參數(shù)為：" + a)
test3.htm
====================
var a = window.dialogArguments
alert("您傳遞的參數(shù)為window對象，名稱：" + a.name)
可以通過window.returnValue向打開對話框的窗口返回信息，當然也可以是對象。
例如：
test4.htm
===================
var a = window.external.m2_blocked("test5.htm"
for(i=0;i<a.length;i++) alert(a[i])
test5.htm
===================
function sendTo()
{
var a=new Array("a","b"
window.returnValue = a
window.close()
}
<form>
<input value="返回" type=button onclick="sendTo()">
</form>
常見問題：
1，如何在模態(tài)對話框中進行提交而不新開窗口？
如果你 的 瀏覽器是IE5.5+,可以在對話框中使用帶name屬性的iframe，提交時可以
制定target為該iframe的name。對于IE4+，你可以用高度為0的frame來作：例子，
test6.htm
===================
window.external.m2_blocked("test7.htm"
test7.htm
===================
if(window.location.search) alert(window.location.search)
<frameset rows="0,*">
<frame src="about:blank">
<frame src="test8.htm">
</frameset>
test8.htm
===================
<form target="_self" method="get">
<input name=txt value="test">
<input type=submit>
</form>
if(window.location.search) alert(window.location.search)
2,可以通過
http://servername/virtualdirname/test.htm?name=mxh方式直接向 對話框傳遞參數(shù)嗎？
答案是不能。但在frame里是可以的。
//屏蔽 F5 刷新鍵
function document.onkeydown()
{
var k = window.event.keyCode;
if (k == 116) //屏蔽 F5 刷新鍵
{
window.event.keyCode = 0;
window.event.returnValue= false;
}
}
<script language="Javascript">
//屏蔽鼠標右鍵、Ctrl+N、Shift+F10、F5刷新、退格鍵
//屏蔽F1幫助
function window.onhelp()
{
return false
}
function KeyDown()
{
//alert(event.keyCode);
//屏蔽 Alt+ 方向鍵 ← 屏蔽 Alt+ 方向鍵 →
if ((window.event.altKey)&&((window.event.keyCode==37)||
(window.event.keyCode==39)))
{
//alert("不準你使用ALT+方向鍵前進或后退網(wǎng)頁！"
;
event.returnValue=false;
}
//屏蔽退格刪除鍵,屏蔽 F5 刷新鍵,Ctrl + R
if ((event.keyCode==116)||(event.ctrlKey && event.keyCode==82))
{
event.keyCode=0;
event.returnValue=false;
}
//屏蔽 Ctrl+n
if ((event.ctrlKey)&&(event.keyCode==78))
{
event.returnValue=false;
}
//屏蔽 shift+F10
if ((event.shiftKey)&&(event.keyCode==121))
{
event.returnValue=false;
}
//屏蔽 shift 加鼠標左鍵新開一網(wǎng)頁
if (window.event.srcElement.tagName == "A" && window.event.shiftKey)
{
window.event.returnValue = false;
}
//屏蔽Alt+F4
if ((window.event.altKey)&&(window.event.keyCode==115))
{
window.external.m2_blocked("about:blank","","dialogWidth:1px;dialogheight:1px"
;
return false;
}
//屏蔽Ctrl+A
if((event.ctrlKey)&&(event.keyCode==65))
{
return false;
}
}
</HTML>