XiaoLian

搜尋網頁中的輸入框，並將其屬性 name及value 加入到陣列中。最後，使用 JSON.stringify 方法將陣列轉換為JSON字串，並使用 console.log 或 alert 來輸出JSON字串的內容。 JavaScript（參考）︰ <script language="JavaScript"> //Input field動態產生JSON const result = Array.from ($(" input[ type='text'] "))              .reduce((before, after) => {                  const name = $(after).attr(' name ');                  const value = $(after).val();                      return {                          ...before,                          [name]: value                      }             }, {});   //console.log(JSON.stringify(result));  alert( JSON.stringify...

建立一個空的陣列students，然後使用for迴圈來填充它。在每次迴圈中，都會建立一個新的物件student，並將其加入到陣列中。每個學生物件都包含id、name和grade三個屬性。最後，使用 JSON.stringify 方法將陣列轉換為JSON字串，並使用 console.log 或 alert 來輸出JSON字串的內容。 JavaScript（參考）︰ <script language="JavaScript"> //使用物件來動態產生 JSON  let students = [];  for (let i = 1; i <= 5; i++) {      let student = {          id: i,          name: "Student " + i,          grade: Math.floor(Math.random() * 6) + 1  // 產生 1 到 6 的隨機數字      };      students.push(student);  }  let json = JSON.stringify(students, null, 2);  // 將物件轉換為 JSON 字串  //console.log(json);  alert(json); </script> 執行畫面︰

因客戶之需求，登入時的密碼可以選擇顯示明碼 部分ASPX（參考）︰ <div class="form-group row"> <label class="col-md-3 col-form-label" for="ctl06_txtMbrRecPwd"><span class="text-danger mr-1">*(必填)</span>登入密碼</label> <div class="col-md-9"> <asp:TextBox ID=" txtMbrRecPwd " CssClass="form-control" runat="server" TabIndex="3" autocomplete="off" TextMode="Password" placeholder="請輸入密碼" /> <asp:CheckBox ID="CheckBox1" OnClick=" ShowPwd() " runat="server" Text="顯示密碼" /> </div> </div> JavaScript（參考）︰ <script language="JavaScript"> function ShowPwd() {     var x = document.getElementById("<%= txtMbrRecPwd.ClientID %>");     if (x.type === "password") {         x.type = "text";     } else {         x.type = "password";     } } </script...

因應客戶之需求，不同產品的類別，PageTitle隨之改變。提供JavaScript兩種方法。 部分HTML（參考）︰ <a id='nav-4' onclick =" changePageTitle('Auto-ID Device - Time Recorder / Time Attendance') " >Time Recorder / Time Attendance</a> <a id='nav-10' onclick =" changePageTitle('Auto-ID Device - Access Control/Controller') " >Access Control/Controller</a> <a id='nav-62' onclick =" changePageTitle('Auto-ID Device - Portable Data Collector') " >Portable Data Collector</a> <a id='nav-71' onclick =" changePageTitle('Auto-ID Device - Cashless Payment System') " >Cashless Payment System</a> <a id='nav-76' onclick =" changePageTitle('Auto-ID Device - Guard Patrol Tour Terminal') " >Guard Patrol Tour Terminal</a> <a id='nav-78' onclick =" changePageTitle('Auto-ID Device - Biometric Reader') " >Biometric Reader</a>...

<script language="JavaScript"> <!-- //日期加減  timeU︰類型  byMany︰間隔(正負數)  dateObj︰日期型態 function DateAdd (timeU,byMany,dateObj) {     var millisecond=1;     var second=millisecond*1000;     var minute=second*60;     var hour=minute*60;     var day=hour*24;     var year=day*365;          var newDate;     var dVal=dateObj.valueOf();      var date=new Date(dateObj);  // For months     switch(timeU) {     case "ms": newDate=new Date(dVal+millisecond*byMany); break;     case "s": newDate=new Date(dVal+second*byMany); break;    //秒     case "mi": newDate=new Date(dVal+minute*byMany); break;   //分     case "h": newDate=new Date(dVal+hour*byMany); break;     //時     case "m": newDate=new...

showModalDialog 應用於資料檢查或需要呼叫其他頁面(Ex︰Asp、Javascript)來處理事情，最後回傳結果值。對於不會使用AJAX的人來說，是一個不錯的作法！ 當然可以的話，用AJAX方式，是最好不過！ 語法： vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures]) 參數說明： sURL 必要參數，類型：字串。用來指定對話方塊要載入網頁的URL。 vArguments 非必要參數，類型：變動。用來向對話方塊傳遞參數。傳遞的參數類型不限，包括陣列等。對話方塊通過window.dialogArguments來取得傳遞進來的參數。 sFeatures 非必要參數，類型：字串。用來描述對話方塊的外觀等資訊，可以使用以下的一個或多個，用分號“;”隔開。 參數傳遞方式： 父視窗 向子視窗傳遞參數採用ShowModalDialog的第2個參數(vArguments)即可，父視窗要獲取子視窗傳回的參數則可通過ShowModalDialog函數的返回值(vReturnValue )獲取。 子視窗 取得父視窗參數的方法，只要在子視窗裡下Javascript，用window物件的 dialogArguments 屬性來取，例如： var a= window.dialogArguments ; 子視窗向父視窗返回參數，可用 window.returnValue 屬性，如： window.returnValue =1; window.close(); 假設網頁傳送前，檢查是否有附件，若無附件不允許傳送。父頁面（Ex︰A.asp），子頁面（Ex︰B.asp）。 父頁面（Ex︰A.asp） Javascript： <script LANGUAGE="JavaScript"> //資料檢查 function check_data () {    //判斷上傳附件   if ( upload_check ()==false)  {     alert("請檢附文件依據！");     return false;   } } //判斷上傳附件 function upload_check...

設定固定長度格式，不足長度補0 參數1 str：需要補0的字串 參數2 len：要補0的長度 <script LANGUAGE="JavaScript"> // 左邊補0 function padLeft(str,lenght) { if(str.length >= lenght) return str; else return padLeft("0" +str,lenght); } //右邊補0 function padRight(str,lenght) { if(str.length >= lenght) return str; else return padRight(str+"0",lenght); } </script> EX: padLeft('7',2)--->07 padRight('7',2)--->70

Javascript︰ <script LANGUAGE="JavaScript"> function check_radio(input1){    // input1 為form name變數     var radio_items = [];  //宣告空陣列-存放不同radio name     var temp;     //找出all HTML元件並符合type=radio,用意取出radio name     for(var i=0;i<document.forms[input1].elements.length-2;i++)     {        var e=document.forms[input1].elements[i];      if(e.type=='radio')         //判斷型態為radio      {         if (temp !=e.name)     //比對上一筆radio name與目前這一筆radio name是否相同          {           radio_items.push(e.name);   //資料radio name存入陣列           temp=e.name;         }      }     }     var radio_name;   //radio name        var obj, flag;   // flag 判斷是否有被選取     // rad...

以下是從網路上爬文出來的，個人覺得很實用，所以放上來與各位分享之。 <script LANGUAGE="JavaScript"> //去除頭尾空白 function trim (strvalue) {   ptntrim = /(^\s*)|(\s*$)/g;   return strvalue.replace(ptntrim,""); }   //去除左側（頭）空白 function ltrim (strvalue) {   ptntrim = /(^\s*)/g;   return strvalue.replace(ptntrim,""); }  //去除右側（尾）空白 function rtrim (strvalue) {   ptntrim = /(\s*$)/g;   return strvalue.replace(ptntrim,""); } //Trim()速度更快的版本 function myBestTrim (str) {   var start = -1,   end = str.length;   while (str.charCodeAt(--end) < 33);   while (str.charCodeAt(++start) < 33);   return str.slice(start, end + 1); } </script> 參考資源 ︰ http://flesler.blogspot.tw/2008/11/fast-trim-function-for-javascript.html Trim()速度更快的版本

判斷全面性URL格式檢查，是個非常困難的一件事情，主要格式變化多種，爬了不少文以下是從某網站參考過來的， 但也符合大多數URL格式，僅供參考，不能符合百分百URL格式。 <script language="JavaScript"> <!-- function IsURL(str_url){    var strRegex = "^((https|http|ftp|rtsp|mms)?://)"    + "?(([0-9a-zA-Z_!~*'().&=+$%-]+: )?[0-9a-zA-Z_!~*'().&=+$%-]+@)?" //ftp的user@    + "(([0-9]{1,3}.){3}[0-9]{1,3}" // IP URL- 123.123.123.123    + "|" // allow IP和DOMAIN    + "([0-9a-zA-Z_!~*'()-]+.)*" // DOMAIN- www.    + "([0-9a-zA-Z][0-9a-zA-Z-]{0,61})?[0-9a-zA-Z]." // second DOMAIN    + "[a-z]{2,6})" // first level domain- .com or .museum    + "(:[0-9]{1,4})?" // port- :80    + "((/?)|" // a slash isn't required if there is no file name    + "(/[0-9a-zA-Z_!~*'().;?:@&=+$,%#-]+)+/?)$";    var re=new RegExp(strRegex);     //re.test()    if (re.test(str_url)){       return (true);         //符合   ...

網頁設計中經常會遇到相同的HTML元件定義在不同瀏覽器下，顯示結果會不一致，為了要達到版面一致化。 必須針對各個瀏覽器做判斷及各別定義HTML元件屬性。判斷瀏覽器做法很多種，有的是用CSS方式做判斷，本篇先介紹用Javascript方式。 <!--偵測 Browser function detectBrowser (){  var sAgent = navigator.userAgent.toLowerCase();  this.isIE = (sAgent.indexOf("msie")!=-1); //IE6.0-7  this.isFF = (sAgent.indexOf("firefox")!=-1); //firefox  this.isSa = (sAgent.indexOf("safari")!=-1); //safari  this.isOp = (sAgent.indexOf("opera")!=-1); //opera  this.isNN = (sAgent.indexOf("netscape")!=-1); //netscape  this.isCh = (sAgent.indexOf("chrome")!=-1); //chrome  this.isMa = this.isIE; //marthon  this.isOther = (!this.isIE && !this.isFF && !this.isSa && !this.isOp && !this.isNN && !this.isSa); //unknown Browser } // --> //check Browser var oBrowser = new detectBrowser (); if (oBrowser.isIE) {  alert("IE6.0/7.0(or above version).");   } if (oBrowser.isSa && !oBrowser.isCh) {  alert("Safari....

假設父頁面（Ex︰A.html），子頁面（Ex︰B.html）。 父頁面（Ex︰A.html） Javascript︰ <script type="text/javascript"> //父回應 function parentResponse(s)    {    alert('parentResponse---'+s); } //呼叫子 function callchild(s)    {       window.frames[" childframe "]. childResponse(s) ; } </script> HTML︰ <input name="callChild" type="button" onclick=" callchild('son') ;" value="呼叫子"/> <br/> <iframe src=" B.html " name="childframe" width="100%" marginwidth="0" marginheight="0" scrolling="No" frameborder="0" id=" childframe " ></iframe> ============================================================================================ 子頁面（Ex︰B.html） Javascript︰ <script type="text/javascript"> //子回應 function childResponse(s)    {       alert('childReponse---'+s); } //呼叫父 function callparent(s)    {   var frame = wind...

方法一︰ 先加入iframe的語法。（Ex︰A.html） <iframe src="./source"（欲連結的網頁，Ex︰B.html） name=" mainframe " width="100%" marginwidth="0" marginheight="0" scrolling="No" frameborder="0" id="mainframe" ></iframe> 在到欲連結的網頁（Ex︰B.html）裡，在head下面加入以下程式碼。 <head> 　　　 <script>　 　　　 function resize() {　 　　　　  parent.document.getElementById(" mainframe ").height=document.body.scrollHeight;  //將子頁面高度傳到父頁面框架 　　　　　   }　　 </script> </head> 並在body（Ex︰B.html）裡加入︰ <body onload=" resize() ;" >　 ================================================================================= 方法二︰（本人比較偏愛使用此方法，在同一個檔案內編寫就好。） <script type="text/javascript"> function SetCwinHeight() { var iframeid=document.getElementById(" mainframe "); //iframe id   if (document.getElementById)   {      if (iframeid && !window.opera)    {       if (iframeid.contentDocument && ifr...

parseInt()是用來把字串轉換成整數的函式 ，一般來說，只要是數字開頭的字串，都能夠轉換成功，例如︰parseInt('168a')的結果為 168，parseInt('1a2b')的結果為1。 parseInt('01') 得出的結果是1 ，事實上，一直到07為止，都能得到預期結果，問題來了， parseInt('08') 和 parseInt('09') 這兩者運算的結果，都得到0 ，這是為什麼呢？ 主要原因在於 parseInt() 這個函式，本身可以傳遞兩個參數，語法是： parseInt(string, radix) 第一個參數 string 是要轉換為數字的字串，第二個參數 radix 則是要用二進位、八進位、十進位或十六進位。 如果 parseInt('FF',16)，代表以 16 進位方式來解析FF這個字串，當然得到的結果就是 255 了 ， 同理， parseInt('FF',10) 以 10 進位來解析FF這個字串，根本就不是數字，所以得到的結果會是 NaN 。 一般人不會特別指定第二個參數，這時 JavaScript 就自動判斷第一個傳遞的參數是否為某種數字型式。 在 JavaScript 眼中，以 0x 開頭的字串，都視為十六進位字串，如果單單是0開頭，第二個字母不是 x，則視為八進位或二進位字串 ， 十六進位使用的字母計有 0-9，A-F，而八進位使用的字母則為 0-7，所以，當發生parseInt('08') 又未指定以何種數值型態解析時， JavaScript 以 0 為起頭，接下來的字母又不是 x，那一定是八進位了，但是，八進位裡，怎麼可能有 8 和 9 這兩個字母呢？ 所以，一定是不合法的字串，於是就傳回 0。 同理， parseInt('010') 回傳的值，也不是 10，而是 8，因為 parseInt() 認為 0 開頭，接下來的字母不是 x，而是 1，就以八進位來解析 010 這個字串， 所以 一切問題都在於以 0 開頭 ，所造成的誤會。〔EX: parseInt('020')->16 ; parseInt('030')->24 ;...

<script language=javascript> function Date_substr() {     //定義起始 年 月 日     var yy_from=document.form1.from_year1.value;     var mm_from=document.form1.from_month1.value;     var dd_from=document.form1.from_day1.value;     //定義結束 年 月 日     var yy_to=document.form1.to_year1.value;     var mm_to=document.form1.to_month1.value;     var dd_to=document.form1.to_day1.value; alert('相差 '+ (DateDifference(yy_from,mm_from,dd_from,yy_to,mm_to,dd_to))+'天'); } // 算出日期與日期間的差距有幾天 function DateDifference(y1,m1,d1,y2,m2,d2) {    var StartDate = y1 + "/" + m1 + "/" + d1;    var EndDate =  y2 + "/" + m2 + "/" + d2;    var myStartDate = new Date(StartDate);    var myEndDate = new Date(EndDate);    // 天數，86400000是24*60*60*1000，除以86400000就是有幾天      return (myEndDate - myStartDate)/ 86400000 ; } </script> 部分HTML: ...

透過Ajax技術想要回傳多個值，可將資料 轉換成XML方式 或陣列方式回傳。本範例是採用陣列方式，把很多的資料用逗號區分存進陣列就可以使用了。 JavaScript :   <script type="text/javascript">          function pdata(str)         {         var xmlhttp;            if (str=="")           {            //隱藏span區塊           document.getElementById("show").style.display="none";           return;           }         if (window.XMLHttpRequest)           { // code for IE7+, Firefox, Chrome, Opera, Safari           xmlhttp=new XMLHttpRequest();  ...

AJAX會去抓取ASP response.write出來的訊息. 以血型為例：選擇任一血型,會秀出該血型特徵 JavaScript : <script type="text/javascript"> function showBlood(str) { var xmlhttp;    if (str=="")   {   document.getElementById("txtHint").innerHTML="";   return;   } if (window.XMLHttpRequest)   { // code for IE7+, Firefox, Chrome, Opera, Safari   xmlhttp=new XMLHttpRequest();   } else   { // code for IE6, IE5   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   } xmlhttp.onreadystatechange=function()   {   if (xmlhttp.readyState==4 && xmlhttp.status==200)     {     document.getElementById("txtHint").innerHTML=xmlhttp. responseText;     }   } xmlhttp.open("GET","getboold.asp?q="+str,true); xmlhttp.send(); } </script> 部分HTML : <form action=""> 血型 : <select name="BloodType" onchange=" showBlood(this.value) "> <option value="">請選擇</option> <option value="A"...

利用簡單的方式輕鬆讀取文字檔內容，不過會忽略換行符號，也就是說在文字檔內，按下Enter換行會被忽略之。不過可以下HTML語法來做些變化，Ex: 換行<BR/> ; 字型粗體<b>等等。 文字檔內容 : JavaScript : <script type="text/javascript"> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest)   { // code for IE7+, Firefox, Chrome, Opera, Safari   xmlhttp=new XMLHttpRequest();   } else   { // code for IE6, IE5   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   } xmlhttp.onreadystatechange=function()   {   if (xmlhttp.readyState==4 && xmlhttp.status==200)     {     document.getElementById("myDiv").innerHTML= xmlhttp. responseText ;     }   } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); } </script> 部分HTML ： <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick=" loadXMLDoc() ">Change Content</button> 執行畫面 : 

<script type="text/javascript"> var xmlhttp; function loadXMLDoc() {    //判斷瀏覽器   if (window.XMLHttpRequest)   {  // code for IE7+, Firefox, Chrome, Opera, Safari      xmlhttp=new XMLHttpRequest();   }   else   {  // code for IE6, IE5      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   }   //等待   document.getElementById("myDiv").innerHTML="讀取中...";     //載入   xmlhttp.open("GET","cd.xml",true);   //處理   xmlhttp.onreadystatechange=function(){ handleStateChange() ; };   //設定表頭   xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8")   //傳送   xmlhttp.send(); } function handleStateChange()  //處理動作--讀取XML {    // readyState: 4 代表 request finished and response is ready    // status: 200 代表 Ok  if (xmlhttp.readyState==4 && xmlhttp.status==200)  {    ...

XML內容 <?xml version="1.0" encoding="utf-8" ?> < People >    <person id="1" dep="行政">        <name>Jason</name>        <mobile>0911222333</mobile>    </person>    <person id="2" dep="財務">        <name>Amy</name>        <mobile>0922456333</mobile>    </person>    <person id="3" dep="資訊">        <name>Alex</name>        <mobile>0945886333</mobile>    </person> </ People > 程式碼 <script type ="text/javascript"> function loadXML(xmlFilePath)   //載入XML {              if(window.ActiveXObject) // code for IE      {     ...