web開發常用js功能性小技巧

來源:互聯網
上載者:User
js|web|技巧

web開發常用js功能性小技巧

--------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">;
<HTML>;
<HEAD>;
<TITLE>; New Document </TITLE>;

</HEAD>;

<BODY>;
<FORM METHOD=POST ACTION="">;
<input onpaste="return false;" type="text" name="textfield" style="width:400px;  ime-mode:disabled" value=" English only">; 
</FORM>;
</BODY>;
</HTML>;

-----------------------------------------------------------------------------
只能輸入數字

<script LANGUAGE="javascript">;
<!--
function check()
{
if (document.form.tell.value==""){
 alert("請輸入電話號碼!");
 document.form.tell.focus();
 return false;
}
else{
 var Letters = "0123456789()+-";
 for (i=0; i< document.form.tell.value.length; i++){
    var CheckChar = document.form.tell.value.charAt(i);
    if (Letters.indexOf(CheckChar) == -1){
      alert("電話號碼格式不正確!");
      document.form.tell.focus();
      return false;
     }
   }
 }
}
//-->;
</script>; 

在<body>;...</body>;之間的表單.
<form method="POST" name=form action="" >;
<p align="center">;
  請輸入電話號碼:<input type="text" name="tell" size="20">;
<input type="submit" value="提交" name="B1">;</p>;
</form>;
 
--------------------------------------------------------------------------------
e mail 合法性檢查
function check()
{
if(document.register.email.value.length!=0)
 {
   if (document.register.email.value.charAt(0)=="." ||        
        document.register.email.value.charAt(0)=="@"||       
        document.register.email.value.indexOf('@', 0) == -1 || 
        document.register.email.value.indexOf('.', 0) == -1 || 
        document.register.email.value.lastIndexOf("@")                          
     ==document.register.email.value.length-1 || 
        document.register.email.value.lastIndexOf(".")
             ==document.register.email.value.length-1)
    {
     alert("Email的格式不正確!");
     document.register.email.focus();
     return false;
     }
  }
else
 {
  alert("Email的不可為空!");
  document.register.email.focus();
  return false;
  }
return false;

-----------------------------------------------------------
頁面右鍵屏蔽
<body oncontextmenu="return false">;

----------------------------------------------------------------
自動清除輸入框中的空格

再<head>;...</head>;間加入 
<SCRIPT LANGUAGE="JavaScript">;
<!--//
function ignoreSpaces(string) {
var temp = "";
string = '' + string;
splitstring = string.split(" "); //雙引號之間是個空格;
for(i = 0; i < splitstring.length; i++)
temp += splitstring;
return temp;
}
//-->;
</script>; 

如下代碼加入<body>;區

<form method="post" action="...">;
<input type=text size=25 onBlur="this.value=ignoreSpaces(this.value);" name="text">;
<input type=submit value="Ok" name="button">;
</form>;  
 
-----------------------------------------------------------------------
右鍵菜單的淡入淡出效果
<HTML>;<HEAD>;<TITLE>;右鍵菜單的淡入淡出效果</TITLE>;
<META content="text/html; charset=gb2312" http-equiv=Content-Type>;
<SCRIPT language=JavaScript>;
<!-- // RightClickMenu
var intDelay=10; //設定菜單顯示速度,越大越慢
var intInterval=5; //每次更改的透明度 
function showmenuie5(){
var rightedge=document.body.clientWidth-event.clientX
var bottomedge=document.body.clientHeight-event.clientY
if (rightedge<ie5menu.offsetWidth)
ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth
else
ie5menu.style.left=document.body.scrollLeft+event.clientX
if (bottomedge<ie5menu.offsetHeight)
ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight
else
ie5menu.style.top=document.body.scrollTop+event.clientY
ie5menu.style.visibility="visible"
//ie5menu.style.visibility=""
ie5menu.filters.alpha.opacity=0
GradientShow()
return false
}
function hidemenuie5(){
//ie5menu.style.visibility="hidden"
GradientClose()
}
function highlightie5(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor="highlight"
event.srcElement.style.color="white"
}
}
function lowlightie5(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor=""
event.srcElement.style.color="#000000"
}

function jumptoie5(){
if (event.srcElement.className=="menuitems"){
if (event.srcElement.url != ''){
if (event.srcElement.getAttribute("target")!=null)
window.open(event.srcElement.url,event.srcElement.getAttribute("target"))
else
window.location=event.srcElement.url
}
}

function GradientShow() //實現淡入的函數 

ie5menu.filters.alpha.opacity+=intInterval 
if (ie5menu.filters.alpha.opacity<100) setTimeout("GradientShow()",intDelay)

function GradientClose() //實現淡出的函數 

ie5menu.filters.alpha.opacity-=intInterval 
if (ie5menu.filters.alpha.opacity>;0) { 
 setTimeout("GradientClose()",intDelay) 
 } 
else { 
 ie5menu.style.visibility="hidden"
 } 

function ChangeBG() //改變功能表項目的背景顏色,這裡的兩種顏色值可以改為你需要的 

oEl=event.srcElement 
if (oEl.style.background!="navy") { 
  oEl.style.background="navy" 
  } 
  else { 
  oEl.style.background="#cccccc" 
  } 

// -->;
</SCRIPT>; 

<style type=text/css>;
.cMenu {
FILTER: alpha(opacity=0);BACKGROUND-COLOR: #D6D3CE;BORDER-BOTTOM: #666666 2px solid; BORDER-LEFT: #E4E4E4 2px solid; BORDER-RIGHT: #666666 2px solid; BORDER-TOP: #E4E4E4 2px solid; COLOR: #000000; CURSOR: default; FONT-SIZE: 9pt; color:#000000;FONT-WEIGHT: normal; LINE-HEIGHT: 20px; POSITION: absolute; VISIBILITY: hidden; WIDTH: 110px
}
.menuitems {
font-size:9pt;
MARGIN: 2px;
PADDING-BOTTOM: 0px;
   PADDING-LEFT: 15px;
   PADDING-RIGHT: 3px;
   PADDING-TOP: 0px;
}
</style>; 

<META content="Microsoft FrontPage 4.0" name=GENERATOR>;
</HEAD>;
<BODY>;
<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0>;
</OBJECT>;
<RIGHTCLICK>;<!--[if IE]>;
<DIV class=cMenu id=ie5menu onclick=jumptoie5() onmouseout=lowlightie5() 
onmouseover=highlightie5()>; 

<DIV class=menuitems url="javascript:click_obj(0)">;後退</DIV>;
<DIV class=menuitems url="javascript:click_obj(1)">;前進</DIV>;
<DIV class=menuhr>;<hr style="width:100%">;</DIV>;
<DIV class=menuitems url="javascript:click_obj(2)">;重新整理</DIV>;
<DIV class=menuitems url="javascript:click_obj(3)">;加入收藏夾</DIV>;
<DIV class=menuitems url="javascript:click_obj(4)">;查看源檔案</DIV>;
<DIV class=menuhr>;<hr style="width:100%">;</DIV>;
<DIV class=menuitems url="javascript:click_obj(5)">;屬性</DIV>; 

</DIV>;
<![endif]-->; 

<SCRIPT language=JavaScript>;
<!--
function click_obj(id){
switch(id){
case 0: 
history.back()
break
case 1:
history.forward()
break
case 2:
window.location.reload()
break
case 3:
window.external.AddFavorite(location.href, document.title)
break
case 4:
window.location = "view-source:" + window.location.href
break
case 5:
document.all.WebBrowser.ExecWB(10,1)
break
}

if (document.all&&window.print){
ie5menu.className="cMenu"
document.oncontextmenu=showmenuie5
document.body.onclick=hidemenuie5
}
//-->;
</SCRIPT>;
</RIGHTCLICK>;
</BODY>;</HTML>;

 ----------------------------------------------------------------------------
ie用activex實現列印  我沒有檢測過版本,ie6下正常
<head>;...</head>;加入:
<SCRIPT LANGUAGE=javascript>;
<!--
function setPrint()
{
WB.ExecWB(8,1);
}
function previewPrint()
{
WB.ExecWB(7,1)
}
//-->;
</SCRIPT>;

在<body>;...</body>;加入:
<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WB width=0>;
</OBJECT>;
<INPUT type="button" value="Set" id=button1 name=button1 >;
<INPUT type="button" value="Preview" id=button2 name=button2 >; 


----------------------------------------------------------------
超連結提交表單 
<script LANGUAGE="JavaScript">;
function checkvalue()
{
 if(document.welcomeform.nickname.value=="")
 {
  alert("暱稱不可為空!");
  return(false);
  }
 if(document.welcomeform.password.value=="")
 {
  alert("密碼不可為空!");
  return(false);    
  }
 document.welcomeform.submit(); 
 return(true);   
}
</script>;

在<body>;...</body>;之間加入如下代碼:
<form name="welcomeform" method="post" action="welcome.asp">;
 <a href="#" >;登入</a>;
</form>; 
----------------------------------------------------------
不允許快取頁面面
使用java提供的方法,在jsp或者servlet中都可以
<% 
response.setHeader("Pragma","No-cache"); 
response.setHeader("Cache-Control","no-cache"); 
response.setDateHeader("Expires", 0); 
%>;  

----------------------------------------


 



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。