Sun River
          
		Topics about Java SE, Servlet/JSP, JDBC, MultiThread, UML, Design Pattern, CSS, JavaScript, Maven, JBoss, Tomcat, ...
	
          

          
          		
	

          

          


          
	
		
          
			


          
posts - 78,comments - 0,trackbacks - 0


          
	

          


          
	
					


          
	
	 

          My top javascripts
          

          ---. ExpandCollapse 
          

           Used for expanding and collapsing block elements. I use this one for hiding divs or expanding the divs for forms. Very useful.
          

           function expandCollapse() {
          

          for (var i=0; i<expandCollapse.arguments.length; i++) {
          

          var element = document.getElementById(expandCollapse.arguments[i]);
          

          element.style.display = (element.style.display == "none") ? "block" : "none";
          

           }
          

          }
          

           
          

          <p><em>Example:</em></p>
          

           <div id="on" style="border: 1px solid #90ee90;padding: 5px;">
          

             <a href="javascript: expandCollapse('expand', 'on');">Expand Layer</a>
          

           </div>
          

           <div id="expand" style="display: none;border: 1px solid #90ee90;padding: 5px;">
          

           <a href="javascript: expandCollapse('expand', 'on');">Collapse Layer</a>
          

           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eu ligula.   Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Ut wisi. Curabitur odio. Sed ornare arcu id diam. Integer ultricies, mauris venenatis vulputate pulvinar</p>
          

          </div>
          

          --Timer Layer 
          

          Used for hiding an element after ‘x’ of seconds. Great for hiding status messages after a person has submitted a form.
          

          var timerID;
          

           
          

          function ShowLayer(id)
          

          {
          

           document.getElementById().style.display = "block"; 
          

          }
          

           
          

          function HideTimedLayer(id)
          

          { 
          

              clearTimeout(timerID);
          

              document.getElementById(id). »
          

                   style.display = "none";
          

          }
          

           
          

          function timedLayer(id)
          

          {
          

           setTimeout("HideTimedLayer(""" + id + """)",»
          

            5000); //5000= 5 seconds
          

          }
          

          --Form Checker 
          

          Probably one of the most useful scripts and there are several out there about form validation. This figures out what fields are required from the value in in a hidden input tag. Than it highlights the error areas.
          

          for (var j=0; j<myForm.elements.length; j++) {
          

          var myElement = myForm.elements[j];
          

          var isNull = false;
          

          if (myElement.name == field && myElement.»
          

          style.display != "none") {
          

          if (myElement.type == "select-one" || »
          

          myElement.type == "select-multiple") {
          

          if ((myElement.options[myElement.selectedIndex].
          

          »value == null || myElement.
          

          »options[myElement.
          

          »selectedIndex].value == '') 
          

          »&& errorString.indexOf(title) == -1) {
          

          isNull = true;
          

          }
          

          } else if ((myElement.value == null || 
          

          »myElement.value.search(/"w/)»
          

           == -1) && errorString.indexOf(title) == -1) {
          

          isNull = true;
          

          }
          

           
          

          if (isNull) {
          

          errorString += title + ", ";
          

          if (document.getElementById('label_'+myElement.name))»
          

           { document.getElementById('label_'+myElement.name)
          

           ».className="er"; }
          

          myElement.className="erInput";
          

          } else {
          

          if (document.getElementById('label_'+myElement.name)) {
          

          document.getElementById('label_'+myElement.name)
          

          ».className="s1";
          

          }
          

          myElement.className="s1";
          

          }
          

          }
          

          }
          

          }
          

          if (errorString != '') {
          

          errorString = errorString.slice(0,errorString.length-2);
          

          window.alert("Please fill in the following 
          

          »required fields before submitting this form:"n"n"+errorString)
          

          return false;
          

          }
          

          else {
          

          return true;
          

          }
          

          }
          

          ---今天練習了一下用javascript做文字自動匹配的功能，類似于Google Suggest，當然人家Google是連接后臺數據庫，在網上不方便做連接數據庫，所有功能在前臺實現。在javascript里定義了一個全局數組arrCities用來存儲一些城市的名字。然后當我們在文本輸入框里輸入某個城市名字的時候，每輸入完一個字，就會拿當前的文字到arrCities數組里去比對，看是否存在于arrCities的某個成員里。若存在，就把該成員添加到緊靠文本輸入框下面的組合列表框里，供我們選擇，這樣我們就不用完全輸入完整個城市的名字，只要
          
          從下面選擇一個就可以完成想要做的工作。看下面的例子：
          

          <html>
          
<head>
          
<title>Autosuggest Example</title>
          
<script type="text/javascript">
          
var arrCities=["          北京","上海"];
          
arrCities.sort();
          
//          控制是否顯示層div1,bFlag為true則表示顯示div1,為false則把div1從頁面流里移除
          
function showDiv1(bFlag){
          
var oDiv=document.getElementById("div1");
          
if(bFlag){
          
oDiv.style.display="block";
          
} 
          
else{
          
oDiv.style.display="none";
          
} 
          
};
          
//          給sel1添加option
          
function addOption(oListbox,sText){
          
var oOption=document.createElement("option");
          
oOption.appendChild(document.createTextNode(sText));
          
oListbox.appendChild(oOption);
          
};
          
//          移除一個option
          
function removeOption(oListbox,iIndex){
          
oListbox.remove(iIndex);
          
};
          
//          移除所有的option
          
function clearOptions(oListbox){
          
for(var i=oListbox.options.length-1;i>=0;i--){
          
removeOption(oListbox,i); 
          
}
          
};
          
//          設置select里的第一個option被選中
          
function setFirstSelected(oListbox){
          
if(oListbox.options.length>0){
          
oListbox.options[0].selected=true;
          
} 
          
}
          
//          獲取匹配的字段
          
function getAutosuggestMatches(sText,arrValues){
          
var arrResult=new Array;
          
if(sText!=""){
          
for(var i=0;i<arrValues.length;i++){
          
if(arrValues[i].indexOf(sText)==0){
          
arrResult.push(arrValues[i]); 
          
}
          
}
          
}
          
else{
          
showDiv1(false);
          
}
          
return arrResult;
          
};
          
//          把匹配的字段添加到sel1中
          
function addSuggestOptions(oTextbox,arrValues,sListboxId,oEvent){
          
var oListbox=document.getElementById(sListboxId);
          
clearOptions(oListbox);
          
var arrMatches=getAutosuggestMatches(oTextbox.value,arrValues);
          
if(arrMatches.length>0){
          
showDiv1(true);
          
for(var i=0;i<arrMatches.length;i++){
          
addOption(oListbox,arrMatches[i]); 
          
}
          
setFirstSelected(oListbox);
          
if(oEvent.keyCode==8){
          
oTextbox.focus(); 
          
}
          
else{
          
oListbox.focus();
          
}
          
} 
          
};
          
//          獲取select里的option到textbox
          
function getSuggestText(oListbox,sTextboxId){
          
var oTextbox=document.getElementById(sTextboxId);
          
if(oListbox.selectedIndex>-1){
          

          oTextbox.value=oListbox.options[oListbox.selectedIndex].text; 
          
}
          
oTextbox.focus();
          
showDiv1(false);
          
}
          
//          通過Enter鍵確定選項
          
function getSuggestText2(oListbox,sTextboxId,oEvent){
          
if(oEvent.keyCode==13){
          
getSuggestText(oListbox,sTextboxId);
          
}
          
}
          
</script>
          
</head>
          
<body>
          
<p>          請輸入一個城市的名字：</p>
          
<p>
          
<input type="text" id="txt1" value="" size="27" 
          
onkeyup="addSuggestOptions(this,arrCities,'sel1',event)" /><br />
          
<div id="div1" style="background-color:white;display:none;">
          
<select id="sel1" style="width:202px" size="6" 
          
onclick="getSuggestText(this,'txt1')" onkeyup="getSuggestText2(this,'txt1',event)">
          
</select>
          
</div>
          
</p>
          
</body>
          
</html>
          

          用到的東西都比較基礎，當然有很多細節性的東西需要注意。比如說用戶選擇完一個選項，要注意把組合列表框隱藏。所以這里把組合列表框放在了一個層上，隱藏和顯示控制起來就方便一點。
          

          --js中innerHTML，innerText，outerHTML的用法和區別
          

          用法： 
          
<div id="test"> 
          
<span style="color:red">test1</span> test2 
          
</div><div id="test"> 
          
<span style="color:red">test1</span> test2 
          
</div>
          

          在JS中可以使用：
          

          test.innerHTML: 也就是從對象的起始位置到終止位置的全部內容,包括Html標簽。 
          
          上例中的test.innerHTML的值也就是 
          
<span style="color:red">test1</span> test2<span style="color:red">test1</span> test2
          

          test.innerText: 從起始位置到終止位置的內容, 但它去除Html標簽 
          
          上例中的text.innerTest的值也就是“test1 test2”, 其中span標簽去除了。
          

          test.outerHTML: 除了包含innerHTML的全部內容外, 還包含對象標簽本身。 
          
          上例中的text.outerHTML的值也就是 
          
<div id="test"><span style="color:red">test1</span> test2</div><div id="test"><span style="color:red">test1</span> test2</div>
          

          完整示例： 
          
<div id="test"> 
          
<span style="color:red">test1</span> test2 
          
</div> 
          

          <a href="javascript：alert(test.innerHTML)">innerHTML內容</a>
          
<a href="javascript          ：alert(test.innerText)">inerHTML內容</a>
          
<a href="javascript          ：alert(test.outerHTML)">outerHTML內容</a><div id="test"> 
          
<span style="color:red">test1</span> test2 
          
</div> 
          

          <a href="javascript：alert(test.innerHTML)">innerHTML內容</a>
          
<a href="javascript          ：alert(test.innerText)">inerHTML內容</a>
          
<a href="javascript          ：alert(test.outerHTML)">outerHTML內容</a>
          

          特別說明：
          

          

          innerHTML是符合W3C標準的屬性，而innerText只適用于IE瀏覽器，因此，盡可能地去使用innerHTML，而少用innerText，如果要輸出不含HTML標簽的內容，可以使用innerHTML取得包含HTML標簽的內容后，再用正則表達式去除HTML標簽，下面是一個簡單的符合W3C標準的示例： 
          
<div id="test"> 
          
<span style="color:red">test1</span> test2 
          
</div> 
          
<a href="javascript          ：alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">無HTML,符合W3C標準</a>
          

          

           
          

          --Javascript長文章分頁
          

          本例中實現用Javascript 長文章分頁,Javascript 分頁
          

          <html>
          
<head>
          
<style type="text/css">
          
<!--
          
#jiax{
          
width:80%;/*          調整顯示區的寬*/
          
height:200px;/*          調整顯示區的高*/
          
font-size:14px;
          
line-height:180%;
          
border:1px solid #000000;
          
overflow-x:hidden;
          
overflow-y:hidden;
          
word-break:break-all;
          
}
          
a{
          
font-size:12px;
          
color:#000000;
          
text-decoration:underline;
          
}
          
a:hover{
          
font-size:12px;
          
color:#CC0000;
          
text-decoration:underline;
          
}
          
//-->
          
</style>
          
</head>
          
<body>
          
<div id="jiax">
          
          本屆都靈冬奧會，-------------------------------------------上屆冬奧會，他們依然以13金傲視群雄。
          

          </div>
          
<P>
          
<div id="pages" style="font-size:12px;"></div>
          
<script language="javascript">
          
<!--
          
var obj = document.getElementById("jiax");
          
var pages = document.getElementById("pages");
          
window.onload = function(){
          
var allpages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj.offsetHeight));
          
pages.innerHTML = "<b>          共"+allpages+"頁</b>";
          
for (var i=1;i<=allpages;i++){
          
pages.innerHTML += "<a href=""javascript          ：showpart('"+i+"');"">第"+i+"頁</a>&nbsp;";
          

          }
          
}
          
function showpart(x){
          
obj.scrollTop=(x-1)*parseInt(obj.offsetHeight);
          
}
          
//-->
          
</script>
          
</body>
          
</html>
          

          --用js實現select對div的隱藏與顯示
          

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          
"http://www.w3.org/TR/html4/loose.dtd">
          
<html>
          
<head>
          
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
          
<title>          無標題文檔</title>
          
</head> 
          

          <body> 
          

          <script type="text/javascript">
          
function change(a){
          
var xxx = document.getElementById("xxx");
          
var divArray = xxx.getElementsByTagName("div");
          
for (var i=0;i<divArray.length;i++) {
          
if (divArray[i].id == a) {
          
divArray[i].style.display='';
          
}else {
          
divArray[i].style.display='none';
          
}
          
}
          
}
          
</script> 
          

          <div id=xxx> 
          


          
<div id=aaa>
          
<h1>aa</h1>
          
aaaa
          
</div>
          
<div id=bbb style="display:none ">
          
bbbb
          
</div>
          
<div id=ccc style="display:none ">
          
cccc
          
</div> 
          

          </div> 
          

          <select onChange="change(this.value)">
          
<option value="aaa">aaa</option>
          
<option value="bbb">bbb</option>
          
<option value="ccc">ccc</option>
          
</select>
          
</body>
          
</html>
          

          ---++日期減去天數等于第二個日期
          
          <script language=Javascript>
          
function cc(dd,dadd)
          
{
          
//          可以加上錯誤處理
          
var a = new Date(dd)
          
a = a.valueOf()
          
a = a - dadd * 24 * 60 * 60 * 1000
          
a = new Date(a)
          
alert(a.getFullYear() + "          年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")
          
}
          
cc("12/23/2002",2)
          
</script>
          

          ++++檢查一段字符串是否全由數字組成
          
          <script language="Javascript"><!--
          
function checkNum(str){return str.match(//D/)==null}
          
alert(checkNum("1232142141"))
          
alert(checkNum("123214214a1"))
          
// --></script>
          

          +++++++++++++
          

          --用js處理輸出分頁(完美版)
          

          head>
          
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
          
<title>          無標題文檔</title>
          
<style type="text/css">
          
<!--
          
div{font-size:14px;}
          
-->
          
</style>
          
</head>
          

          <body>
          
<textarea name="" cols="" rows="" id="conpage" style="display:none;">
          
<!--pages-->
          
          你好
          
<!--pages-->
          
          我好
          
<!--pages-->
          
          他也好
          
<!--pages-->
          
          全都好
          
<!--pages-->
          
</textarea>
          
<script language="javascript">
          
var zhenze = /[^0-9]/;//          創建正則,表明非數字字符串
          
var thispage = document.getElementById("conpage").value;//          取得內容
          
var page_amount,x;
          
page_amount = thispage.split('<!--pages-->').length;
          
page_amount--;//          內容里的pages個數
          
var asarray = new Array();//          數組
          
var v=0;
          
for(var t=0;t<page_amount;t++){
          
asarray[t] = thispage.indexOf("<!--pages-->",v);//          記錄每個pages的位置
          
v=asarray[t];
          
v++;
          
};
          
page_amount--;
          
for(var s=0;s<page_amount;s++){
          
//          以下是分段寫出所有內容
          
document.write('<div id="pg'+(s+1)+'" style="block">');
          
document.write(thispage.substring(asarray[s],asarray[s+1]));
          
document.write('</div>');
          
alert(s+1);
          
};
          


          
var obj,objt;
          
var s_a_d = 1;//          記錄當前顯示的頁數id,默認為第1頁顯示，當設用showpage時，此變量用于記錄上次所顯示的頁碼，
          
function hidpage(hidt){//          此函數用于隱藏頁數
          
obj=eval("document.getElementById('pg"+hidt+"')");
          
obj.style.display = "none";
          
};
          

          
function showpage(sow){//          此函數用于顯示頁數
          
obj = eval("document.getElementById('pg"+sow+"')");
          
objt = eval("document.getElementById('pg"+(s_a_d)+"')");//          此句是取得上次顯示的頁碼
          
objt.style.display = "none";//          先隱藏上次顯示的頁碼
          
obj.style.display = "block";//          再顯示當前用戶需要顯示的頁碼
          
s_a_d = sow;
          
document.getElementById("pageamo").value = sow; 
          
alert("          當前顯示第"+s_a_d+"頁");
          
}; 
          

          var tts;
          
function goto(){ //          頁面轉向函數,作用是用戶在文本框里輸入頁碼然后轉向
          
tts = document.getElementById("inputpage").value;
          
if(!tts.match(zhenze)==""){
          
alert("          錯誤，你輸入了非數字類型字符");
          
return;
          
};
          
if(tts>page_amount || tts < 1){
          
alert("          無此頁");//非法輸入全部檢驗完畢
          
}else{
          
showpage(tts);//          合法的執行轉向 
          
};
          
};
          


          
document.write('<div>');
          
document.write('          你現在在第<input type="button" id="pageamo" value="'+s_a_d+'" style="font-size:12px;height:18px;background-color:#FFFFFF; color:red;font-weight:bold;border:#FFFFFF 0px solid;">頁 ');//標示當前頁碼
          
document.write('          共有'+page_amount+'頁');//總頁數
          
for(var k=0;k<page_amount;k++){
          
document.write(' <a href="javascript          ：showpage('+(k+1)+')" style="text-decoration:none;">');
          
document.write(" ["+(k+1)+"] ");
          
document.write('</a> ');
          
hidpage(k+1);//          隱藏所有頁數
          
};//for          寫出頁碼 : 1 2 3 4 5 ....
          
showpage(1);//          首先顯示第一頁內容 
          
document.write('           轉到第 <input type="text" id="inputpage" style="width:20px;font-size:12px;height:18px;" value=""> 頁');//轉向表單
          
document.write('<input type="button" value=" Go " onclick="goto()" style="height:20px;">');
          
document.write('</div>');
          
</script>
          
</body>
          
</html>
          

	
          posted on 2008-02-22 22:13 Sun River 閱讀(352) 評論(0)  編輯  收藏  
          

          







          
	    
    

          

				

          



    



          
        
	




主站蜘蛛池模板：
乌什县|
红原县|
太仆寺旗|
清新县|
沙湾县|
平遥县|
胶州市|
曲阜市|
海晏县|
剑河县|
文登市|
安远县|
黔南|
曲阜市|
扎鲁特旗|
特克斯县|
荔浦县|
香港
|
棋牌|
垫江县|
盐城市|
孝义市|
伊川县|
罗甸县|
裕民县|
辽阳县|
淳安县|
茌平县|
巫溪县|
蒲江县|
福贡县|
新河县|
宁城县|
穆棱市|
洪泽县|
射阳县|
玉屏|
楚雄市|
洪湖市|
鹤壁市|
锡林浩特市|