分類
程式技術

免費的圖表工具-FusionCharts Free

之前介紹過 XML/SWF Charts , 可以參考這篇: XML/SWF Charts好用繪製圖表組件 https://diary.tw/archives/316 , 這裡要介紹另一個好用的組件, FusionCharts Free (http://www.fusioncharts.com/free/), 為什麼說是 Free 呢, 因為, 他也有付費的版本, 而這個 Free 的版本是要免費給大家使用, 並且進一步使用那家公司其他的工具(再來付費), 真是不錯的好方法.

這個組件是用 flash 實作的, 提供了以下種類的圖表,

  1. 3D/2D Column & Bar Charts
  2. Line Charts
  3. 2D/3D Pie & Doughnut Charts
  4. Area Charts
  5. Stacked Charts
  6. Candlestick Charts
  7. Funnel Chart
  8. Gantt Chart

比較特別的是這個 Gantt Chart, 一般的繪圖組件, 比較少見這個類型的圖表, 十分特別, 其他的圖表也都很美觀, 而接下來我們就來進行實作吧.

該元件有支援中文, 不過輸出中文的資料檔要有 BOM, 也就是 UTF-8檔頭, 否則不能輸出正確的中文, 我們以簡單的一個 Line Chart 來看.

基本上, 要畫一個 Line Chart 使用的元件是 FCF_Line.swf 這個 flash 組件, 而餵給他的參數共有 &dataURL=data1.php&chartWidth=640&chartHeight=480, 其中的 dataURL 為另外的一支餵資料的程式, 可以是任何型態的 server 程式碼或是靜態的網頁, 而 chartWidth 及 chartHeight 則是圖表的寬高. 若是要給中文, 一定要用 UTF-8 with BOM 的方式, 才能正常顯示中文.

再來就是這個 data1.php 的內容, 基本上有幾個重點, 先看圖形根節點:

<graph
baseFont="system"
caption="年度銷售"
subcaption="台北地區"
xAxisName="月份"
showNames="1"
showValues="0"
formatNumberScale="0"
decimalPrecision="0" >

其中 baseFont 是指定字型, 若是中文, 儘量用 “system” 這個字型, 而 caption 就是圖表標題, 而 subcaption 是副標, 會在標題下方, xAxisName 是 x 軸說明, showNames 是 x 軸資料的名稱是否要顯示(本例為 1, 2, 3, .. 12), showValues 是指每個資料點上的值是否要秀出, formatNumberScale 是用來表現大數字時, 是否要用 k, m 等來表示, 如 30,000 會顯示為 30K, 而 decimalPrecision 則是指要小數點幾位.

再來是資料內容, 被包在 <graph ></graph> 這組內, 現在要 demo 是簡單版的, 就是只有一個數值要繪製, 可以直接將 name value 放成資料在上面的 graph 裡, 以此例來看, 就是這樣:

<set name="n1" value="12000" hoverText="name1" />
<set name="n2" value="19000" hoverText="name2" />
....

其中 set 是一個一個的資料, 而 name 是在 x 軸上的名稱, hoverText 是當 mouseOver 時, 會在數值點上的名稱, 整個秀出來的結果如下:

可以參考這個 sample: http://sample.diary.tw/19/chart1.php , 資料在此: http://sample.diary.tw/19/data1.php , 其中的 flash 語法如下:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="640" height="480" id="Line" >
  <param name="movie" value="./FCFCharts/FCF_Line.swf?dataURL=data1.php&chartWidth=640&chartHeight=480" />
  <param name="quality" value="high" />
  <embed src="./FCFCharts/FCF_Line.swf?dataURL=data1.php&chartWidth=640&chartHeight=480"  quality="high" width="640" height="480" name="Line" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

這樣就能順利繪出所需要的 Line Chart 折線圖了.

至於多數列的部分, 這裡再整裡一下, 多數列會面臨不能用一個 <set > 將資料標籤和資料值組包在一起, 所以需要分開作, 而且, 重點在於多數列使用的 swf 組件為 FCF_MSLine.swf, 原來的 FCF_Line.swf 只能畫單數列.

graph 的部分不變, 用法相同.

再定義 x 軸, 如下:

<categories>
<category Name="Jan" />
<category Name="Feb" />
...
</categories>

再定義數列, 此例為兩列數列:

<dataset seriesName="PC" color="aabb00" anchorBorderColor="aabb00" anchorRadius="4">
<set value="12000" />
<set value="19000" />
...
</dataset>
<dataset seriesName="NB" color="00aabb" anchorBorderColor="00aabb" anchorRadius="4">
<?php
<set value="17000" />
<set value="22000" />
...
</dataset>

最後一樣用 </graph> 包起來即可, 範例在此: http://sample.diary.tw/19/chart2.php , 其資料在此: http://sample.diary.tw/19/data2.php

PS 注意以上範例的 value 都利用 php 亂數產生的, 所以每次值會不同, 而這組 swf 圖表的好處是若只要用 Line Chart 則使用 FCF_Line.swf , 而多組數列, 則用 FCF_MSLine.swf 都是獨立 swf 組件, 而且, 餵給他的參數中 dataURL=[filename] 的部分, 不需要再自組亂數在後面(避免 cache 問題, 因為他會自己加, 如下:)

那個 curr=80 就是他 flash swf 自行呼叫的加上的亂數, 比較自動一點.

結論是這組繪畫組件也十分輕量好用, 一個 swf 檔 20k 左右, 用哪一種就 embed 哪一種, 個個獨立操作, 而若不想用 dataURL 給 script 的方式, 也可以用 dataXML 將字串直接用 querystring 的方式餵給他, 就不需要再寫 script, 看實際應用方便來調整囉.

而單組和多組數列的圖表繪製使用的 swf 組件也不同, 主要由檔名就看得出來了, 就是多了 MS 的都是多組數列的哦.

有什麼問題, 大家可以一起討論看看.

分類
程式技術

IE6還這麼多人用耶

剛在看這篇文章: IE 6在臺市占率仍超過5成 (http://www.ithome.com.tw/itadm/article.php?c=56054), 發現其實我的想法比較偏向所謂的用戶原始的瀏覽器用什麼, 就會持續用下去的這個狀況, 也就是說, 用戶應該在 XP 就會用 IE6, 在 Vista 就會用 IE7, 在 Windows 7自然用 IE8, 而其中的許多數據也都相當耐人尋味.

用戶自己會選擇使用什麼瀏覽器的, 自然是比較了解電腦, 或是會自己安裝軟體的用家, 而且通常應該要原來固定使用的瀏覽器發生什麼大問題, 或效能不好, 或速度慢等原因, 才會面臨升級或是換瀏覽器的狀況.

不過這也讓我想看一下這個網站的比例狀況(2009/07), 我列出來給大家參考:
狀況如下:

IE6 29.1%
IE7 17.9%
IE8 9.6%
FX3.5 6.8%
FX3.0 10%
SAFARI 3.5%
OTHER 23.1%

其中果然 IE6 佔了大多數, 到 29.1% (相對於上文的報導是沒有那麼高), 而整個 IE 也有 56.6%, 另外 Firefox 則是有 16.8%, Safari 則是 3.5%, 其他的部分包含較小量版本的 IE, FX, 及一些有的沒的, 共有 23.1% (這個也還蠻多的, 真有趣), 整理或圖形如下:

基本上, 網站其實就是要照顧到所有用戶使用的環境來設計功能及呈現, 才不會影響用戶的來訪, 不過, 最重要的是大家都要依照標準來做就對了, 才不會顧此失彼, 這樣也就沒什麼太大的相容性問題!

順便附上 OS 比例也供參考:

分類
.net

String.Substring的Exception

真是很常見的一個 exception, 就是利用 String.Substring 這個函數來取 Left, Mid, Right 的功能, 不過會有 exception 要自行避開的問題.

常常我們用 String.Substring(0, 5) 來當做 Left(string, 5) 的功能, 不過, 若是字串長度本身就短於 5 時, 就會發生一個 ArgumentOutOfRangeException 的 exception, 可以先參閱 msdn 的說明: http://msdn.microsoft.com/zh-tw/library/aka44szs(VS.80).aspx

當然, 我們可以容易地去避免這個問題, 利用字串長度和取出長度的比較較小的值為準, 如下寫法:

string strA = "12345678";
string strB;

strB = strA.Substring(0, strA.Length < 10 ? strA.Length : 10);
// or 
strB = strA.Substring(0, Math.Min(strA.Length, 10));

不過, 無論如何都很妙, 要來先做判斷的事, 但我們可以利用一個更簡單的方式(若不想要用判定法), 可以利用含入 Microsoft.VisualBasic 的 reference 來使用, 可以這樣寫:

strB = Microsoft.VisualBasic.Strings.Left(strA, 10);

其實就已經會處理掉那個 10 會造成參數錯誤的 exception, 而 Mid, Right 也都是一樣的作法, 當然啦, 還是可以利用原來的 String.Length 的判定方式來寫, 不過寫 c# 就是沒辦法有現成的功能, 要嘛自己寫, 要嘛就要比較一下有沒有參數超過的問題, 要嘛, 就是 Microsoft.VisualBasic.Strings 下的方法來用囉!

分類
程式技術

好用的CSS STYLE截圖

基本上, 這是一個小技巧, 早主要是應用在一個計數器圖片下載優化的作用. 以往會利用多個圖片分別製作出 1, 2, 3, 4, 5, …. 9, 0 共十張圖片來進行計數器的圖片結果輸出, 但若是一個 8位數的數字, 將會需要下載 8次(當然, 重覆的話會減少下載次數). 然而, 有一種新的方式, 就是利用 CSS 的 STYLE 將其要輸出的圖檔, 將 1, 2, 3, 4, 5, … 9, 0 做成一張橫的長條圖, 例如:

(圖片引用自: http://counter.fc2.com/tw/point02.html#p2-2)

而利用這個技巧, 將所需要輸出的單一數字部分, 只截出對應的位置即可, 這樣一來便可以有效節省 client 對 server 的 request , 也降低這種小型圖檔在 client 及 server 間的 traffic.

這篇文章將說明如何利用這樣的技巧, 其實很簡單, 主要是利用了 <div></div> 這個 tag, 配合以下 4個屬性即可達成:

  1. background-image
  2. background-position
  3. width
  4. height

也就是將圖檔, 利用 background-image 引入在 div 之中, 而 div 則利用了 width 及 height 指定了長寬, 最後再利用 background-position 來移動圖檔即可, 如下:

 

這個 2 數字, 是利用這個 HTML:

<div style=”width: 17px; height: 21px; background-image: url(https://diary.tw/attach/1/1144413904.gif); background-position: -34px 0px;”>&nbsp;</div>

來達成的, 實際上用圖示來說明就像是這樣:

也就是其中的 width, height 指定為對應這個數字 2 的截圖大小, 為 17*21, 而 backgroud-position 則是將圖的位置由 0, 0, 移動座標為 -34, 0, 也就是往左移 34px (這張圖為 170*21, 所以每個數字佔用 17px, 若要取出 2這個數字, 則往左移動 2*17=34, 因為是往左移 34px, 所以是 position 是 -34px). 而超出 div 的 width, height 的部分, 也自然就不會顯示, 因為這是 div 的 background 背景圖.

若是要秀出 307 則使用如下語法:

<div style=”float: left; width: 17px; height: 21px; background-image: url(https://diary.tw/attach/1/1144413904.gif); background-position: -51px 0px;”>&nbsp;</div>
<div style=”float: left; width: 17px; height: 21px; background-image: url(https://diary.tw/attach/1/1144413904.gif); background-position: 0px 0px;”>&nbsp;</div>
<div style=”float: left; width: 17px; height: 21px; background-image: url(https://diary.tw/attach/1/1144413904.gif); background-position: -119px 0px;”>&nbsp;</div>

如下:

 

上面有多了 float: left; 主要是為了讓這些 div 能 inline 連在一起, 不然會變直的.

接下來可以應用的就很多了, 例如某張大圖, 裡面有4個區域要拿出來做網頁用, 可以利用這個功能, 將其全部的一張大圖, 拿來截切出來放在網頁上, 例如這張大圖:

要取出其中的 4個部分, 可以利用以下語法, 例如:

同步中心:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -231px -198px;”>&nbsp;</div>

Windows CardSpace:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -4px -100px;”>&nbsp;</div>

Java:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -157px -3px;”>&nbsp;</div>

iSCSI啟動器:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -82px -3px;”>&nbsp;</div>

這樣是不是很有趣又很方便呢? client 只需要 download 一次, 便能將所需要的圖檔都下載完成, 配合一點點的 CSS code 作法, 就能有效利用, 真是一舉兩得呢!

[2009/6/17 10:15]
根據高人指點, 這個是 CSS Sprites 的一個技巧, 詳情可以參考: http://waterlily-lsl.com/modules/article/view.article.php/170/c2

[2016/3/30 6:26]

另外可以參考這篇 w3c schools 的教學文章: http://www.w3schools.com/css/css_image_sprites.asp

 

分類
Database

SQL Server取得identity的目前值及下一個

一般來說, 俱有 identity 屬性欄位的 table 的目前值可以很容易地利用 max 函數來取得. 不過, 也很有可能 max 該筆資料已被刪除了, 所以利用 max 查找出來的結果不正確.

但又若是要找出下一個 identity 的值呢? 就一定得知道漸增量 (increment) 為何了, 否則是沒有辦法計算出來的.

請先參考這篇文章: SQL Server的Identity欄位使用/複製/重設 https://diary.tw/archives/457 , 這篇文章中也有提到有關取得目前的 identity 值的方式, 是利用 dbcc checkident(‘table_name’, NORESEED) 來取回, 不過取回來的是文字訊息 (text message), 而不是很方便程式化, 若要滿足前面的需求, 包含取回 identity 目前值及下一個, 則有現成的函數可用:

  1. IDENT_CURRENT: 取出 identity 欄位的目前值
  2. IDENT_INCR: 取出 identity 欄位的漸增值
  3. IDENT_SEED: 取出 identity 欄位的起始種子

使用方式如下:

select IDENT_CURRENT('table_name')

 

這樣可以取出該 table_name table 中的 identity 欄位的目前值, 而下一個呢? 可以利用:

select IDENT_CURRENT('table_name') + IDENT_INCR('table_name')

 

這樣就可以順利取出來, 也就是拿目前值加上漸增值. 而且回傳的結果是一個 resultset 的方式將值傳回, 很方便應用於程式化的需求.

不過無論如何, 也請特別注意, 這種應用需求, 並非是要 developer 將值取出後再塞回去的, 因為 identity 欄位是由系統維護的, 而不是 developer (或說程式) 維護的, 所以這樣取出是可以拿來觀察, 而不是要塞回去用的, 請特別注意一下.

參考資料: http://social.msdn.microsoft.com/forums/zh-TW/240/thread/ba6ff915-99be-42ee-831c-21d7532f3c47/

分類
Database

SQL Server 在資料庫中找出有 identity 的欄位及table

SQL Server 2005 中, 若想要找出所有有 identity 的欄位及 table , 可以利用系統表, sys.columns 及 sys.objects 來個來查詢.

其中的 sys.columns 的 is_identity 就可以判定該 column 是否是 identity 欄位. 所以在 SQL Server 2005 要判定這些 table 及欄位時, 可以使用以下查詢:

select o.name, c.name
from sys.columns c inner join sys.objects o 
on c.object_id=o.object_id 
where c.is_identity = 1 and o.type='U'

當然, 應該會有人問, 那 SQL Server 2000 怎麼辦呢? 因為 SQL Server 2000 並沒有像 SQL Server 2005 有 sys.columns , 而 sys.objects 還可以用 sysobjects 取代, 但麻煩的是那個在 sys.columns 裡的 is_identity 欄位, 要怎麼找出有 identity 的欄位呢? 可以利用 syscolumns 中的 status 欄位, 其中的 0x80 就是 identity 屬性, 詳情可以參考這篇: http://msdn.microsoft.com/en-us/library/aa260398(SQL.80).aspx 其中的 status 欄位.

根據這樣的資料, 我們就不難組合出 SQL Server 2000 查找出有 identity 欄位的 table 了, 如下:

select o.name, c.name
from syscolumns c inner join sysobjects o on c.id=o.id 
where c.status & 0x80 = 0x80 and o.type='U'

整理出來的結果就會是 table / column , 很方便大家能快速地將資料表及欄位含有 identity 屬性的部分找出來.

ps. sysobjects 中的 type=’U’ 是指 user table .

繼續閱讀:
syscolumns: http://msdn.microsoft.com/en-us/library/aa260398(SQL.80).aspx
sysobjects: http://msdn.microsoft.com/en-us/library/aa260447(SQL.80).aspx
SQL Server的Identity欄位使用/複製/重設: https://diary.tw/tim/65

分類
Database

如何移動已存在的SQL Server 2005中的user database

有時候主機的硬碟空間不足或是因為要調整硬碟配置, 會動到資料庫的存放位置, 這裡有一篇 kb 在處理這個作業.

移動使用者資料庫

內容說明蠻詳細的, 我這裡簡單列出操作的方式:

1. 先找出該 db 的所有檔案, 利用以下指令(其中USERDB是假設的使用者資料庫名稱):

SELECT name, physical_name AS CurrentLocation, state_desc
FROM sys.master_files
WHERE database_id = DB_ID(N'USERDB')

(基本上至少會有兩個, 一個是放 data 的 mdf, 一個是放 log 的 ldf 檔案的所在位置)

2. 接下來將資料庫先離線:

ALTER DATABASE USERDB SET OFFLINE;

(可能會花一些時間)

3. 再來就是將資料庫的實體檔案搬移到指定位置, 這裡假設是 d:\sqldata\

分類
Javascript

jQuery traverse元件屬件

traverse 是程式寫作上一個還算蠻重要的 runtime information. 尤其在 web 上, jQuery 的概念整個就是建立在這樣概念上. 利用 selector 將要找的東西找出來, 再進行更動或讀取這樣的狀況.

現在利用一個小案例來說明這個 case. 我要找出頁面上所有有 onclick 屬性的 anchor, 並加以標註出來, 語法是這樣的:

$("a[onclick]").addClass("highlight1");

是的, 你沒看錯, 就是這樣一句而已. 這句語法的解釋是這樣的:

  1. $(“a”) 是找出所有的 anchor
  2. $(“a[onclick]”) 是找出所有的 anchor 而且有 onclick 屬性的
  3. addClass 就是加上一個 css class

就只是這樣而已. 我們來看看範例吧: http://sample.diary.tw/17/j1.html 其中的 button: [find anchor with onclick attr.] 按下後, 會將有 onclick 屬性的 anchor 用 highlight1 的 lightgreen 的背景色加上, 就很清楚了. 其中只有 f1(), f2() 會呈現出來效果, 而其他的 anchor 沒有下 onclick 屬性的, 都不會被影響.

接下來找出 anchor 的連結屬性, 開頭是 http://www 的, 這個也很有趣, 語法如下:

$("a[href^='http://www']").addClass("highlight2");

也是一樣, 一行搞定, 語法說明如下:

  1. $(“a[href^=’http://www’]”)是指 anchor 中, href 屬性開頭為 http://www 的.
  2. addClass 就是加上一個 css class

(在1.2版時, 還可以使用 @在 href 前, 也就是 @href^=’xxx’ 這樣, 不過在 1.2 已不推薦使用, 1.3 時已不支援了, 要特別注意 @ 這個符號囉)

一樣來看範例, http://sample.diary.tw/17/j1.html 其中的 button: [find anchor start with http://www] 按下後, 其中開頭為 http://www 的 anchor 會套用 lightblue 的背景色, 是不是很方便呢?

其中的 ^= 是開頭為, 而 $= 是結束為, 而 *= 是含有, 所以若是要找連結為 .pdf 結尾的, 可以使用:

$("a[href$='.pdf']")

再來就是談 traverse 的語法, 其實也很單純, 是利用 each 這個方法, 再利用匿名函數取得陣列代號, 就可以將符合條件的元素陣列逐一列舉出來, 如下:

var elements = $("a[href^='http://www']");
var message = "";
$(elements).each(function(e){
    message += elements[e].href+"\n";
});
alert(message);

程式碼說明如下:

  1. 先將符合條件的 objects 都放入 elements 陣列
  2. 再利用 each 方法, 配合匿名函數, 將 elements 陣列內的 object 的 href 屬性結合成產生的字串訊息
  3. 最後再將訊息秀出

參考範例: http://sample.diary.tw/17/j1.html 其中的 button: [traverse anchor start with http://www] 就會將所有開頭為 http://www 的 object 的 href 屬性 alert 出來囉.

相信對於使用 jQuery 的朋友們, 能更清楚整個運作的邏輯..

分類
.net

.net下enum列舉與string文字間的轉換

有時會用到這樣的功能, 就是列舉的名稱和列舉的值做轉換. 這個在 delphi 裡是利用 RTTI (Runtime Type Information)來達成, 在 .net 裡的作法也很單純, 利用 Enum 的 CLASS 方法(靜態方法)就可以做到了.

先來看看由 enum 轉回字串, 是使用 Enum.GetName 方法, 要傳入的是 enum 的 type 及該 enum object 即可, 程式碼如下:

public enum enumMyFruit  
{  
    Apple, Lemon, Orange  
}  
....  
enumMyFruit fruit1 = enumMyFruit.Apple;  
string result = Enum.GetName(fruit1.GetType(), fruit1);

再來是利用 string value 轉入 enum 的方法, 使用 Enum.Parse , 傳入一樣是 enum 的 type, 及傳入 string 的值, 最後有個參數是是否忽略區分大小寫的真值, 範例如下:

 public enum enumMyFruit  
{  
   Apple, Lemon, Orange  
}  
....  
enumMyFruit fruit1 =  Enum.Parse(typeof(enumMyFruit), "Apple", true);

其中關於第一個部分, 使用 Enum.GetName 其實可以直接用 fruit1.ToString() 就拿到了, 不過根據這篇文章: http://www.cnblogs.com/smalldust/archive/2007/02/27/384657.html 提到了, 效率不太一樣, 就我個人覺得, ToString() 還是少用吧, 用 GetName 還是比較正規一點, 再加上效率有差的話, 其實還是用 GetName 好.

後面利用 string 轉入 enum 則要注意一下, 若發生找不到的狀況時, 將會有 exception 發生, 這個是需要注意的, 因為本來就有可能會發生這個問題, 要處理好這個部分的程式碼囉.

參考資料:
http://snipplr.com/view/3585/enum-to-string-and-string-to-enum/
http://www.cnblogs.com/smalldust/archive/2007/02/27/384657.html

分類
程式技術

13號星期五的機率

今天是 2009/2/13 的 13號星期五, 13號星期五, 也是黑色星期五, 印象中, 應該一年平均會有兩次, 不過為了驗證這件事, 我們利用 vbs 寫個小程式來驗證一下就知道了..

這裡會用到的重要 vbs 函數有兩個 DateSerial 及 WeekDay 這兩個, 程式碼如下:

counts = 0  
  
For i = 1 to 2000  
  For j = 1 to 12  
    If WeekDay(DateSerial(i, j, 13), vbSunday) = 6 Then  
      counts = counts + 1  
    End If  
  Next  
Next  
  
WScript.Echo counts

計算西元1年至2000年的13號星期五有幾次, 來平均一下應該就很公平了吧.. 這樣計算出來的結果是 3439 次, 平均下來就是 1.7195 次 (3439 / 2000) 這樣就和印象中的 13號星期五的機會很接近了. (若用 3000年來算是 1.7196 次 (5159 / 3000), 9000年來算是 1.7198 (15479 / 9000))

再來列出最近10年的 13號星期五:
2001/4/13 2001/7/13
2002/9/13 2002/12/13 2003/6/13
2004/2/13 2004/8/13
2005/5/13 2006/1/13
2006/10/13 2007/4/13
2007/7/13
2008/6/13
2009/2/13 2009/3/13 2009/11/13
2010/8/13

很有趣的, 今年吃掉了2007, 2008, 2010 三年的 quota 耶, 哈哈..

相關討論:
一年中最多有幾個黑色星期五?最少有幾個黑色星期五?
上面文章內, 即使碰到閏年的 2月 29日, 算出的結果仍是介於1~3日之間, 所以也不會有超過3日或少於1日的沒有13號星期五的日子.

[2017/10/13 10:16]
補上 codepen 的 javascript 程式碼結果.

(https://codepen.io/timhuang/pen/pWZXYL)