【Javascript教學】如何自訂書籤的全選及全取消核取方塊

 有朋友反應他使用的網頁電力系統時間控制是用核取方塊來選取開放時段，他每次都要一個一個的按取消，問我說有沒有比較快的方法，第一個是想到用偵錯模式去寫程式碼，但是步驟太多還要複製程式碼，最後的解決是自訂書籤來解決。

加到書籤中的用法(全取消):

javascript:{var inputElems = document.getElementsByTagName("input");for(var i=0; i<inputElems.length; i++) {if (inputElems[i].type === "checkbox" && inputElems[i].checked === true){inputElems[i].checked=false;}}}

全選取:

javascript:{var inputElems = document.getElementsByTagName("input");for(var i=0; i<inputElems.length; i++) {if (inputElems[i].type === "checkbox" && inputElems[i].checked === false){inputElems[i].checked=true;}}}

測試網址:

http://bestdaylong.com/html/checkbox.htm

語法:

http://discuz.bestdaylong.com/thread-39331-1-1.html

javascript顯示多少個checkbox被選取

【Google表單教學】如何利用chrome來偵錯前端javascript錯誤

 偵錯是寫程式的基本功，很多初學者不會使用，執行時就找不到錯在那裡，今天就用網友的例子來做教學，他犯了一般初學者都會遇到的問題，就是變數用到保留字(Date,confirm,location,status)

在chrome按[F12]

切換到[Sources]/點選[Open File]開啟目前檔名相同名稱.

colsole.log 在控制台中顯示

網友問題

http://discuz.bestdaylong.com/thread-39041-3-1.html

前端:

https://lst2021.blogspot.com/2021/01/var-datereviver-function-key-value-var.html

範例: http://bestdaylong.com/html/inq05a.htm

【網頁工具教學】如何利用樂透號碼抽中獎名單

用亂數抽獎，不管怎麼做都會被懷疑內定，所以我想到用樂透號碼來做抽獎，首先會依樂透抽獎的順序，將所有的數字合併成一串大數字，再依參加的人數(例如購買日期遞增排序)來編號，將合併的順序除以參加的人數，若餘數為1，表示第1個參加的人中獎，以此類推，若餘數為0，則表示最後一個參加者中獎，我會以香純滴雞精來做例子。

1.請將抽獎名單張貼到【來源】
2.將樂透號碼貼在【亂數】
3.再按底下【樂透抽獎】
2.中獎名單就會顯示在【目的】

買滴雞精抽7-11禮卷100元2張(中獎機率10%)
http://shop.bestdaylong.com/shop-award-1.htm

網頁工具網址:http://bestdaylong.com/tools.htm

【網頁工具教學】如何用亂數抽取中獎名單

大部分的人對於抽獎，都會懷疑抽獎的程式是否有作弊，所以我就用javascript寫了個自動產生亂數的名單，再由裡面選出您要的人數，由於是javascript，所有看得懂程式的人都可以看到是否有作弊，而且名單是貼上去的，所以無法事前知道要內定那些名單。

1.請將抽獎名單張貼到【來源】再按底下【亂數抽獎】
2.名單就會亂數顯示在【目的】
3.若只要顯示前幾筆，只要在【變數名稱】輸入要顯示的筆數


網頁工具網址:http://bestdaylong.com/tools.htm

如何快速大量轉換中文變成URL Encoding

為什麼要把中文轉換成urlencoding，是因為在ie中若您用網址傳送中文，會變成亂碼，對於我們想在google表單中，要預設將使用者的姓名代入就會變成亂碼，若要用excel函數ENCODEURL來解決，又有版本要excel2013(含)以上的限制，在google的試算表中也沒有相對應的指令可以使用，所以就寫了這個整批將文字做URL Encoding的功能。

1.連結到http://bestdaylong.com

點選【工具】/【線上網頁工具(javascript)】

2.將您要轉換的姓名貼在【來源】

3.往下找到【URL加密】

4.再到【目的】就會看到轉換後的結果

如何解決javascript的toLocaleDateString在IE11下會顯示中文西元日期

因為要查詢訂單的前一個月功能，用了javascript的toLocaleDateString，在chrome下會正常顯示2017/7/2，但是用IE11卻會出現2017年7月2日，最後只有用各別取出年月日再將它組合回去。

1.在chrome下可以正常顯示

2.在IE11會變成有年月日的中文

3.原本是用toLocaleDateString

4.最後只能用年月日自己組合的方式

如何在網頁上顯示圖表(雷達圖及長條圖)

要將eportfolio的網站重新撰寫， 因為裡面有用到雷達圖及長條圖，所以先上網找這二個圖表產生的方法，找到chartjs的網站，裡面有說明如何利用它提供js來產生圖表。

1.雷達圖

範例連結:http://bestdaylong.com/chart/radar.htm

2.雷達圖原始碼

3.長條圖

範例連結:http://bestdaylong.com/chart/bar2.htm

4.長條圖原始碼

5.參考網站: http://www.chartjs.org/docs/

自動產生流水號的線上工具

會寫這支程式是因為在excel中，如果數字是在中間，例如image01.jpg,image02.jpg，這樣往下複製時就不會自動增加，因為在轉換圖片時，檔案名稱都是image開頭，我想把image01改成有意義，例如sing_001開頭，在excel可以用公式來解決，因為很常會用到，就用javascript寫了一個線上工具來做這件事。

  

1.到http://bestdaylong.com點選【工具】/【線上網頁工具(javascript)】

  

2.在來源輸入您要顯示的文字要被取代的文字用%

在變數名稱輸入【開始,結束,每次增加,顯示長度】

按下【自動加流水號】

3.結果會顯示在目的視窗

  

4.每次增加2的範例

  

5.若數字不用有固定長度，最後一碼設為0

如何透過帶參數的方式來改變Dreamwave設計的Spry互動選單

同事用Dreamwave的Spry設計了一個互動式選單，因為是用html設計的，每次進來都只能預設在某一選單上，如果今天我想像傳參數一樣，可以自己決定要用那一個選單為預設值，這個在asp或是php上很容易就解決，但是在html靜態網頁就只能透用Javascript讀取URL並解析參數，在網路上找到有人寫了這樣的function可以使用，底下是使用的方法。

1.Spry組件製作的互動式選單

2.透過取得Url變數來改變預設選單

部分程式碼

<script type="text/javascript">
<!--
function gup( name )//取得url上的變數
{  
   name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
   var regexS = "[\\?&]"+name+"=([^&#]*)";
   var regex = new RegExp( regexS );
   var results = regex.exec( window.location.href );
   if( results == null )
       return "";  
   else
       return results[1];
}
var tab=gup('tab');
if(tab=='')
  tab=2;
else
  tab=parseInt(tab,10);//將文字轉為數字,後面的10代表10進位
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab:tab});
//-->
</script>

---

參考網站: Get URL Parameters Using Javascript

php如何在UTF8編碼下讓Javascript可以顯示中文對話框

這幾天為了一個javasciprt 的alert問題找了一個多小時，想說以前這樣寫都可以正常執行，怎麼現在不行，最後試了發現只有中文字才會有問題，想說以前用Big5寫php都沒這個問題，只是最近改成用UTF8，最後解決方法是只要顯示中文，就要先將中文字從UTF8轉成Big5就不會錯誤有錯誤。

程式碼:

      $sSQL="insert into Personal(Account,Password,Sex,Mobile,Email,Birthday,Tel,Address,Job,Marriage,Children,Edu,Epaper,ModifyDate)
       values('$Account','$Password','$Sex','$Mobile','$Email','$Birthday','$Tel','$Address','$Job','$Marriage','$Children','$Edu','$Epaper',now())";
      $result=mysql_query($sSQL,$conn);
      if(!$result)
         echo $sSQL;
      else
      {
          echo "<script language=\"javascript\">alert('".iconv("UTF-8","big5","會員資料已新增完成")."');location.href='./'</script>";
          exit;
       }

如果在UTF8要使用Javasciprt顯示中文,必需要把UTF8轉成Big5才不會錯誤

Javascript:自動將游標停在表單中某一個欄位

我們在設計網頁讓使用者輸入帳號及密碼時，如果可以在一開始就讓游標就停在帳號的文字方塊，這樣使用者就可以直接輸入不用再用滑鼠把游標停在帳號的文字方塊
底下是表單內容

<FORM NAME="MyForm" ACTION="../cgi-bin/mycgi.pl">
name: <INPUT NAME="realname"><BR>
email: <INPUT NAME="email"><BR>
</FORM>

在body之後要加入onLoad="document.forms.MyForm.realname.focus()"

<BODY onLoad="document.forms.MyForm.realname.focus()">

參考資料:Automatically Putting the Cursor in a Field

Javascript:當使用者按下Enter鍵時，表單自動送出

在設計網頁表單輸入時，如果需要在使用者按下鍵盤Enter時，就可以把表單送出，這時候就需要靠Javascript來幫忙，底下是可以執行的範例。
將底下的Javascript放在<head></head>之間

<SCRIPT TYPE="text/javascript">
<!--
function submitenter(myfield,e)
{
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;
if (keycode == 13)
   {
   myfield.form.submit();
   return false;
   }
else
   return true;
}
//-->
</SCRIPT>

底下為form的內容

<FORM ACTION="../cgi-bin/mycgi.pl">
name:     <INPUT NAME=realname SIZE=15><BR>
password: <INPUT NAME=password TYPE=PASSWORD SIZE=10
           onKeyPress="return submitenter(this,event)"><BR>
<INPUT TYPE=SUBMIT VALUE="Log In">
</FORM>

參考資料:Submit The Form When The User Presses Enter

如何利用Javascript把有iframe的整個網頁換掉

一般把網頁利用iframe切割，會遇到如果想要把整個網頁轉向沒有iframe的畫面，會發現用html沒辦法作到，這時候就需要透用Javascript的語法來解決，底下是它的語法 <script>self.parent.location='http://272586.blogspot.com';</script>

如何利用javascript做出選取方塊時，被選取的那一列背景會變色

看到gmail選取一封Email時，被選取的那一列表格底色會變色，覺得這樣很人性化，所以就上網查了一下資料，自己寫了一個簡單範例。

範列網址:http://f272586.googlepages.com/table_color.htm

新增全選,全不選,反項選取,訊息框:http://f272586.googlepages.com/table_color_v2.htm

1.執行時畫面 2.程式碼

如何將會拖慢網頁的廣告延後顯示

有用Bloggerads廣告的人，常常會因為廣告出現過慢，會讓網頁空白一段時間，才會繼續顯示網頁，底下說明如何用javascript把廣告設為在讀取完網頁再顯示．

1. 這是原本的Bloggerads的內容

2. 在頭尾加入黃色的字 3. 把這個javascript放在網頁最後 4.在網頁還沒讀取完時．會出現Loading....的字樣

如何在送出網頁表單時多一個確認視窗

網頁設計時，會使用submit送出表單，可是如果您的表單中，有text物件時，當使用者在輸入完時，按下Enter時，整個表單就會自動送出，這時候有兩個方法可以解決，一個就是不要用submit，改成button，在button寫submit指令，另一個就是在送出時，多一個確認的對話框。

範例檔案:http://f272586.googlepages.com/form.htm

1.一般人習慣輸入完資料按Enter，結果理由還沒輸入就送出 2.這是送出時，再加一個確認的對話框 3.程式碼

<form>
請輸入姓名<input type=text name=yourname><br>
請輸入理由<textarea  rows=5 cols=50 name=yourreason></textarea><br>
<input type=submit name=ok value="送出" onclick="if(confirm('您確定送出嗎?')) return true;else return false">
</form>