pCloud Partner Program

身份證字號產生器/檢查器

程式技術/Javascript 2014/10/04 21:44
views: 197696 times
身份證字號檢查可以參考這裡:
http://zh.wikipedia.org/wiki/%E4%B8%AD%E8%8F%AF%E6%B0%91%E5%9C%8B%E5%9C%8B%E6%B0%91%E8%BA%AB%E5%88%86%E8%AD%89#.E9.A9.97.E8.AD.89.E8.A6.8F.E5.89.87

主要是依照第一碼英文的代碼, 加上後面的個別數字運算而來, 其中第一碼是申報登記戶籍的地點, 共有26個英文字, 第二碼則是性別, 之後則是流水號.

驗證方式如上面連結的說明, 利用該說明, 進行程式實作後, 可以參考這個範例:
http://sample.diary.tw/pid/

上面網址使用純 javascript 撰寫, 並也製作了產生器, 配合 html download blob 語法, 可以下載內容, 十分方便, 可以參考看看.

html download blob 語法可以參考:
http://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/

較複雜的下載方式, 可以參考這個 FileSaver.js 工具:
https://github.com/eligrey/FileSaver.js
top

在nodejs中發起json post的字元長度問題

程式技術/Javascript 2014/09/22 23:24
views: 196043 times
在 nodejs 專案中, 若是需要對外發起使用 application/json 的 http post , 若有中文字, 需要注意計算字串長度的問題. 一般發起的程式碼請參考:

http://tech.pro/tutorial/1091/posting-json-data-with-nodejs

不過該範例是使用英文字, 所以沒有問題, 若是要發起中文字的 json http post, 需要調整計算 Content-Length 的方式, 使用 new Buffer(str).length, 如下:


參考資料: http://cnodejs.org/topic/50616f5301d0b801482695cf
top

lable標籤包住的問題

程式技術/Javascript 2014/07/04 15:33
views: 356467 times
在現在使用手機瀏覽網頁愈來愈普遍的時候, 著重對手機網頁的效果也愈來愈重要.

最近測試到一個問題, 被 label 包起來的多個 input box 時, 會發生即時點到後第二或第三個 input box 也會 focus 到第一個 input box 的問題. 如下面的 html



其實這個問題的原因很單純, 因為 label 是用來強化使用者輸入便利性的標籤, 拿來包多個 input 會發生只會指向第一個 input 是因為原始的設計導致, 目前測試在桌機的 firefox 、android 原生瀏覽器、android chrome瀏覽器、iphone/ipad safari瀏覽器, 都會有這樣的現象, 但桌機的chrome, 桌機的IE11則不會, 原因可能和取得物件焦點的順序有關.

無論如何, 包多個 input 在一個 label 不是一個正確的作法, 要避免這個狀況, 就是不在把多個 input 放在一個 label 中即可.

測試網頁 http://sample.diary.tw/35/label.htm

html label標籤的用法, 可以參考這裡: http://www.w3schools.com/tags/tag_label.asp


top
TAG html, input, label

強迫jQuery Mobile換頁不用ajax

程式技術/Javascript 2013/05/23 16:07
views: 364175 times
同事因為一個使用 jQuery Mobile 的網頁, 因為 login 頁面後的重導頁內容, 無法正常顯示而苦惱, 正在 debug 時, 我和他說明, jQM 預設會使用 ajax 來將網頁內容替代, 包含了 form submit 也都會這樣, 而不需要整頁 refresh, 所以會有這種特殊的狀況.

然而他想做到的功能是 login --submit--> login (check) --redirect--> index 這樣的方式, 所以簡單地說, 就是要將 login page上的 form submit 後的頁面, 不要使用 ajax 即可, 查了一下網路資料, 在 form 表單上, 多加入 data-ajax="false" 即可, 請同事加上後, 測試果然無誤.

所以若有這樣需求的應用, 可以加入 data-ajax="false" 來取消這個預設的功能.

參考資料:
http://stackoverflow.com/questions/7739183/jquery-mobile-how-do-i-submit-forms-to-a-url-and-transit-to-another-page-insid
http://dev.chetankjain.net/2011/12/jquery-mobile-page-transitions-with.html
http://tim-fly.iteye.com/blog/1453766

官方資料:
http://jquerymobile.com/demos/1.0/docs/pages/page-links.html
top

讓jQuery UI支援Touch device

程式技術/Javascript 2013/03/25 17:36
views: 402268 times
在 jQuery UI 中, 使用像是 drag drop, slider 等, 在 iPhone/iPad/Android 上這種 touch 的設備, 可能會有不順或不支援的狀況, 這裡有個工具可以讓這樣的狀況改善, 並正常使用:

jQuery UI Touch Punch - http://touchpunch.furf.com/

這個只需要在引入 jQuery, jQuery UI 後, 再引入這個 jQuery UI Touch Punch 即可.

可以比較之前的一個範例: (原文: http://diary.tw/tim/1041 )

無使用 jQuery UI Touch Punch - http://sample.diary.tw/33/1.htm
有使用 jQuery UI Touch Punch - http://sample.diary.tw/33/2.htm

無使用 jQuery UI Touch Punch - http://sample.diary.tw/33/1-1.htm
有使用 jQuery UI Touch Punch - http://sample.diary.tw/33/2-1.htm

使用桌上型瀏覽器沒有差別, 不過使用 touch device 就有很明顯的差異了!

另外其實 jQuery Mobile 也有完整的功能, 若是直接要做 mobile 的網頁, 應該就直接使用 jQuery Mobile 的 framework 就有完整支援 touch 了:

jQuery Mobile 的 slider: http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/
top

反向排序內容(倒排)

程式技術/Javascript 2013/03/09 22:47
views: 194882 times
今天在整理 http://sample.diary.tw/ 時, 發現 sample 愈來愈多了, 而且內容是由舊往新排, 想說把它反過來排, 新的放在上面, 舊的在下面.

由於內容不多, 把 <li> 手動一筆筆排一下應該不會花太多時間, 不過又想到應該是要用指令來才有效率才對, 於是想說用 sort 指令來操作, 發現 sort 功能強大, 要用來做倒排反而不是很快速方便.

乾脆又來動手寫個小程式好了(又是一個 sample): http://sample.diary.tw/31/1.htm 只利用了 javascript 的 array 功能, 馬上就寫好了一個反向排序功能(倒排功能), 用法很簡單, 就是把文字內容貼進去, 按下[反向排序]按鈕, 就會倒排完成.

程式如下:


前三行可以簡化為最後一行, 簡單說明, 就是把 textarea 內容取出, 用換行 split分割為陣列, 再用 reverse 倒排後, 再利用 join 用換行合併, 塞回去原本的 textarea 完成.

所以現在的 http://sample.diary.tw/ 是由新到舊排了!
top

Youtube影片重覆播放Bookmarklet

程式技術/Javascript 2013/01/08 13:39
views: 108099 times
有時候需要重覆播放 youtube 上的影片, 當然可以透過一些參數來進行設定, 不過一時要使用的話, 可以透過這個 bookmarklet 來進行, 程式碼如下:



利用這個 bookmarklet 可以在瀏覽 youtube 影片時, 想要重覆播放時, 可以按下這個 bookmarklet 來進行重覆播放, 原理就是將原來的 youtube url 找出影片 id 後, 組合出 url:
http://youtube.googleapis.com/v/[video id]?loop=1
這樣的方式.

另外關於 bookmarklet 的新增方式, 就是直接將網頁上的連結, 拖拉到瀏覽器的書籤區即可.

請到這裡進行安裝: http://sample.diary.tw/youtuberepeat/

上面程式碼中, 找出 youtube video id 的 regular expression 是利用這篇文章中的解答: http://stackoverflow.com/questions/3452546/javascript-regex-how-to-get-youtube-video-id-from-url

----------------------------
[2013/1/12 21:04]
今天在IE上測試的時候, 發現直連的URL是無法在IE上直接打開的, 只能藉著一個宿主頁面來做EMBED程式的方式來進行, 調整了一下程式, 使目標頁改為:
http://sample.diary.tw/youtuberepeat/r.html?vid=[video id]
即可帶出對應的播放器, 並能在播放後再自動播放, 不過在這段測試時, 發現這個 loop=1 的參數有時有功能, 有時沒有功能, 在對照了 http://www.youtuberepeater.com/ 網站時, 發現再加一個參數能確保正確 loop, 就是 version=2 的參數, 在 http://sample.diary.tw/youtuberepeat/ 上的兩個 bookmarklet 一併做調整, 也就是原本的改為
http://youtube.googleapis.com/v/[video id]?loop=1&version=2
而新做的第二個有宿主的bookmarklet 中的 embed參數也補上.

top

強大的HTML5離線作業

程式技術/Javascript 2012/10/25 16:58
views: 134942 times
HTML5裡令人驚豔的一項特性就是可以離線瀏覽功能.

利用這項功能, 可以很容易地讓網頁在沒有網路的環境下, 也能順利讓使用者閱讀及使用, 而且實作上也相當單純, 只需要注意寫好更新網頁的邏輯及時間點即可.

一般來說, 只需要把 manifest 設定好, 基本的離線瀏覽功能就差不多完成了, manifest 的設定容易, 就是把"要"在離線瀏覽的網頁及內容, 寫在 manifest 裡, 例如網頁是

http://test.com/mypage.htm

內容有一個 js/myjs.js
另外還有兩張圖為 imgs/1.jpg 及 imgs/2.jpg

則在 mypage.htm 中的 html tag 裡, 多加上 manifest="mypage.manifest" 而且在 mypage.manifest 中, 加上以下內容(純文字):

CACHE MANIFEST
mypage.htm
js/myjs.js
imgs/1.jpg
imgs/2.jpg


這樣就完成了. 有意思的地方是即使用 mypage.php 這樣的動態內容, 一樣可以利用這樣的方式將內容存在客戶端中.

如此一來, 即使在沒有網路的狀況下, 也可以順利瀏覽這個網頁內容 http://test.com/mypage.htm

接下來要說明的是更新方式, 一旦寫入到客戶端的內容, 即使原本的 mypage.htm 更新, 就算是有連線時, 該內容也不會更新(而且即使是動態的 aspx, php 等也都是一樣的), 簡單地說, 在 manifest 中的內容, 就是完全使用客戶端的內容, 不管 server 上的內容, 更新的方式就是更新 manifest 的檔案, 瀏覽器會檢視 manifest 內容來進行更新, 而且會自動更新(在線上時的第一次讀到 manifest 更新時, window.applicationCache.status 會變成狀態 4 (window.applicationCache.UPDATEREADY), 此時可以手動更新, 使用 window.applicationCache.update(); 即可做手動更新, 即使在這次的訪問不更新, 在下一次的訪問時, 瀏覽器也會自動更新.

利用這點, 就可以很容易地實作出離線瀏覽內容的網頁.

若希望只更新這些快取內容, 最簡單的作法是在 mypage.manifest 中, 多加個時間或版本號, 如下:

CACHE MANIFEST
#VER 000151

mypage.htm
js/myjs.js
imgs/1.jpg
imgs/2.jpg

其中的 # 代表著這行為註解, 所以可以自由寫入內容, 上例是寫個版本號 000151, 若要強迫客戶端更新時, 可以將這個 manifest 檔的版本號改為 000151 (若其他內容都可以), 這樣就可以方便容易地來維護在客戶端離線的內容更新.

這裡有一篇很清楚的介紹文, 可以參考
http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/

另外, 配合良好的設計結構, 可以將離線/在線的功能都實作出來, 方便在無法連線時, 也能使用的網頁, HTML5 的這個功能, 的確非常強大!

在實作測試時, 發現若是有設定 manifest 的網頁, 有些瀏覽器對有些 server request 即使沒有設定在 manifest 中, 也會有快取或存取的異常狀況, 建議在 manifest 的最後, 再多加上

NETWORK:
*

這兩行, 可以讓不正常工作的 server request 正常運作.

相關資料:
http://diveintohtml5.info/offline.html

w3c 的資料:
http://www.w3.org/TR/html5/offline.html

Apple Safari的資料:
http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html

top

半浮動DIV區域 part2

程式技術/Javascript 2012/09/04 17:35
views: 158774 times
才寫了"半浮動DIV區域"這個文章 (link), 又發現還有另一種應用情境, 就是捲到下面, 若半浮動區域的底部觸到了 footer , 則要順勢往上, 不再固定.

參考應用如: http://www.yinshiweb.com/ 右側的側欄.

先來看看原始的長相, 一樣是上面 top, 中間 main, 並含有 content 及 flow_div 兩個區域, 還有最下方的 footer. 不含捲動的狀況如: http://sample.diary.tw/29/o.htm

接下來要加上程式碼, 原來的半浮動DIV區域, 只需要用 CSS 配合捲動 event 就可以達成, 但若在浮動區域觸底時, 要跟著捲動上去, 就必須將該 absolute css 的 top 位置用 footer 的 top 減去 flow_div 的高度才行, 不過這個值是動態的, 所以就只能在 runtime 時, 用 jQuery 的 css 屬性來給定, 先看浮動及跟著捲的兩個狀態配合的 css:



其中的 absolute 的 top 得由後面的程式來給定及移除, javascript 如下:

一樣要先算出 top 及 top2 兩個值, 然後在 scroll event 中判斷三種狀況,
state 1. 原始狀態, 還沒捲到 flow_div
state 2. 捲到 flow_div 了, 但底部還未頂到 footer
state 3. 捲到 flow_div 底部頂到 footer 了


完成的結果請參考: http://sample.diary.tw/29/2.htm
top

半浮動DIV區域

程式技術/Javascript 2012/09/03 18:33
views: 129341 times
一般網頁利用CSS排版, 通常分為上中下三段, 分別為 top, main, footer.

其中在 main 做一些特效, 讓一個區域能在捲動時, 會固定在畫面上. 這樣的特效, 需要配合 javascript (或 jQuery ) 來進行才能達成, 先來看一下效果: link.

除了上(top), 中(main), 下(footer)外, 另外在 main 中還有一個 content 及 flow_div 兩個區域. 在向下捲動時, 若 flow_div 捲動超過畫面上方時, 則會變成固定在畫面上.

程式的實作方式利用 jQuery 來進行, 先看程式碼:


在 document ready 時, 先把 #flow_div 的 top 距離算出來, 接下來在 window 的 scroll event 裡, 把 window 的捲動距離算出來後, 和上述的 top 變數比較, 若是超過了, 就把 #flow_div 多加上一個 class 名為 fixed, 讓它固定, 反之則將 fixed class 移除, 也就是跟著畫面捲動.

其中 fixed class 內容重點在於: position: fixed; top: 0px; , 也就是固定在距離畫面上方為 0, 看起來就是浮在原來的內容之上, 若還沒有捲動, 就移除這個 class, 會跟著捲動.

很有意思的一個排版特效.

範例頁: http://sample.diary.tw/29/1.htm
top

PREV : [1] : [2] : [3] : [4] : [5] : [6] : NEXT



Patriot美商博帝 BURST 960G 2.5吋 SSD固態硬碟
TEAM十銓 L5 Lite 3D 1TB 2.5吋 SSD固態硬碟
統一 番茄汁(6入/組)
UNITEK TYPE-C 轉VGA/HDMI/PD充電/HUB 鋁合金多功能轉接器
亞果元素 CASA Hub VH1 Type-C 轉 VGA - HDMI二合一顯示轉接器
realme XT (8G/128G) 6.4吋6400萬畫素 四鏡頭鷹眼猛獸


 Waiting...