示警網頁元件
何謂示警元件?
示警元件是以JAVSCRIPT元件庫的方式進行設計,可提供網站開發者、網站管理者於網站首頁掛載,以顯示示警平台所提供的最新示警訊息。
使用方式
建立一個網頁資源檔案(.htm、.html),  <head> </head>內引入示警元件的資源檔案 (Javascrit資源檔),然後在  <body> </body>網頁區塊內建立一個 <div> </div>區塊,給予該div的一個有命名規則的ID,此ID將影響你在網頁上呈現的大小以及的示警類類別的選擇
樣式說明
  • 版面說明 示警元件提供寬高版面格式有下列5種、分別為300 X 100、300 X 250、180 X 110、180 X 155、180 X 350 等樣式。
  • 類型說明 "共通示警協議標準"中定義嚴重代碼程度 <severity>區分為5種嚴重程度等級,包括 Extreme(非常嚴重的威脅)、Severe(嚴重的威脅)、Moderate(有威脅)、Minor(很小的威脅)、Unknown(未知) 示警元件由這5大類的代碼程度區分為2種類型,再由此2種類型劃分成2種不同地域性質的示警訊息(全台灣)、(各縣市)。
    1. 一般示警
      全台灣:
      包含嚴重代碼為Extreme、Severe、Moderate、Minor、Unknown等全台灣的示警訊息。
      縣市別:
      包含嚴重代碼為Extreme、Severe、Moderate、Minor、Unknown等各縣市別的示警訊息。
    2. 高嚴重示警
      全台灣:
      包含嚴重代碼為Extreme等全台灣的示警訊息。
      縣市別:
      包含嚴重代碼為Extreme等各縣市別的示警訊息。
  • 版面、類型命名規則 不同的版面指派給 <div> </div>區塊的ID也不一樣,參考的  <head> </head>內引入示警元件的資源檔案 (Javascrit資源檔)命名規則也不一樣,請參照以下規則:
    1. 一般示警(全台灣):
      <div> </div>區塊的ID命名規則為capInfo300250,而參考的  <head> </head>內引入示警元件的資源檔案 (Javascrit資源檔)命名規則為CAP300250_CapInfo.js,其中300250為樣版寬高規則,可自行至換寬高為 (300100、180110、180155、180350)。
    2. 高嚴重示警(全台灣):
      <div> </div>區塊的ID命名規則為capInfo300250_Extreme,而參考的  <head> </head>內引入示警元件的資源檔案 (Javascrit資源檔)命名規則為CapInfoExtreme_300250.js,其中300250為樣版寬高規則,可自行至換寬高為 (300100、180110、180155、180350)。
    3. 一般示警(縣市別):
      <div> </div>區塊的ID命名規則為capInfo300250_Normal_66,而參考的  <head> </head>內引入示警元件的資源檔案 (Javascrit資源檔)命名規則為CapInfoNormal_66_300250.js,其中300250為樣版寬高規則,可自行至換寬高為 (300100、180110、180155、180350)。66為縣市代碼(代碼說明表)
    4. 高嚴重示警(縣市別):
      <div> </div>區塊的ID命名規則為capInfo300250_Extreme_66,而參考的  <head> </head>內引入示警元件的資源檔案 (Javascrit資源檔)命名規則為CapInfoExtreme_66_300250.js,其中300250為樣版寬高規則,可自行至換寬高為 (300100、180110、180155、180350)。66為縣市代碼(代碼說明表)
元件參照表
一般示警 高嚴重示警
300X100 全台灣
script CAP300100_CapInfo.js
DIV capInfo300100
台北市
script CapInfoNormal_63_300100.js
DIV capInfo300100_Normal_63
全台灣
script CapInfoExtreme_300100.js
DIV capInfo300100_Extreme
台北市
script CapInfoExtreme_63_300100.js
DIV capInfo300100_Extreme_63
300X250 全台灣
script CAP300250_CapInfo.js
DIV capInfo300250
台北市
script CapInfoNormal_63_300250.js
DIV capInfo300250_Normal_63
全台灣
script CapInfoExtreme_300250.js
DIV capInfo300250_Extreme
台北市
script CapInfoExtreme_63_300250.js
DIV capInfo300250_Extreme_63
180X110 全台灣
script CAP180110_CapInfo.js
DIV capInfo180110
台北市
script CapInfoNormal_63_180110.js
DIV capInfo180110_Normal_63
全台灣
script CapInfoExtreme_180110.js
DIV capInfo180110_Extreme
台北市
script CapInfoExtreme_63_180110.js
DIV capInfo180110_Extreme_63
180X155 全台灣
script CAP180155_CapInfo.js
DIV capInfo180155
台北市
script CapInfoNormal_63_180155.js
DIV capInfo180155_Normal_63
全台灣
script CapInfoExtreme_180155.js
DIV capInfo180155_Extreme
台北市
script CapInfoExtreme_63_180155.js
DIV capInfo180155_Extreme_63
180X350 全台灣
script CAP180350_CapInfo.js
DIV capInfo180350
台北市
script CapInfoNormal_63_180350.js
DIV capInfo180350_Normal_63
全台灣
script CapInfoExtreme_180350.js
DIV capInfo180350_Extreme
台北市
script CapInfoExtreme_63_180350.js
DIV capInfo180350_Extreme_63
縣市名 縣市代碼
連江縣 09007
金門縣 09020
宜蘭縣 10002
彰化縣 10007
南投縣 10008
雲林縣 10009
屏東縣 10013
臺東縣 10014
花蓮縣 10015
澎湖縣 10016
基隆市 10017
新竹市 10018
臺北市 63
新北市 65
臺中市 66
臺南市 67
桃園市 68
苗栗縣 10005
新竹縣 10004
嘉義市 10020
嘉義縣 10010
高雄市 64

範例
  • 一般示警(全台灣)元件介接範例
    一般示警(全台灣)元件介接範例程式:
    <html>
      <head>
       <script type="text/javascript" src="https://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CAP300250_CapInfo.js"></script>
      <!--   如果你的網站不需要SSL驗證請引用底下前置詞為http 的script資源   -->
       <script type="text/javascript" src="http://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CAP300250_CapInfo.js"></script>
      </head>
      <body>
       <div id="capInfo300250" >
       </div>
      </body>
    </html>

    DEMO 畫面

    • 降雨
      降雨
      2018-08-15,10:45│中央氣象局
      對流雲系發展旺盛及西南風影響,易有短時強降雨。今(15)日南部地區有局部大雨發生的機率,請注意雷擊、強陣風及溪水暴漲,低窪地區請慎防淹水。 more...
    • 淹水
      淹水
      2018-08-15,08:10│水利署
      水利署訊:高雄市梓官區淹水二級警戒(梓官站1小時雨量40.5mm) ,如持續降雨轄內易淹水村里及道路可能3小時內開始積淹水(如:梓官區-中崙里,梓信里,同安里,典寶里,信蚵里,大舍里,中正路,梓和里,同安里,梓平里,梓義里),建請即時注意淹水通報及應變。 more...
    • 道路封閉
      道路封閉
      2018-08-15,07:00│交通部公路總局
      台東縣 海端鄉 台20線158K+300~158K+300,因 道路落石災害封閉。 災害發生時間:2018/8/15 上午 07:00:00;預計搶通時間:2018/8/15 下午 02:00:00 more...
    • 水庫放流
      水庫放流
      2018-08-15,07:20│水利署
      水利署訊:(洩洪至鏡面溪):調節性放水,影響範圍:臺南市:山上區、左鎮區、南化區 more...
    • 道路封閉
      道路封閉
      2018-07-13,17:30│交通部公路總局
      南投縣 信義鄉 台21線 110K+509~144K+385 預警性封閉。自107年7月13日17時30分起至危害因素解除止,台21線110K~144K(草坪頭至塔塔加路段)每日17時30分至隔日7時... more...
    • 道路封閉
      道路封閉
      2014-05-26,17:30│交通部公路總局
      南投縣 信義鄉 台16臨29線 000K+000~011K+834 預警性封閉。因0602地震、豪大雨、蘇力、康芮、潭美等颱風侵害影響,造成沿線邊坡坍滑、且不時仍有零星落石、邊坡路基坍... more...
    • 道路封閉
      道路封閉
      2018-03-31,07:00│交通部公路總局
      南投縣 信義鄉 台21線 110K+000~144K+385 預警性封閉。南投縣信義鄉新中橫公路台21線110K~145K(草坪頭至塔塔加路段)目前因101 年度颱風豪雨災害、102 年0327 地... more...
  • 高嚴重示警(全台灣)元件介接範例
    高嚴重示警(全台灣)元件介接範例程式:
    <html>
      <head>
       <script type="text/javascript" src="https://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CapInfoExtreme_180110.js"></script>
      <!--   如果你的網站不需要SSL驗證請引用底下前置詞為http 的script資源   -->
       <script type="text/javascript" src="http://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CapInfoExtreme_180110.js"></script>
      </head>
      <body>
       <div id="capInfo180110_Extreme" >
       </div>
      </body>
    </html>

    DEMO 畫面

    • 道路封閉
      2018-08-15,07:00
      台東縣 海端鄉 台20線158K+300~158K+300,因 道路落... more...
  • 一般示警(縣市別)元件介接範例
    一般示警(縣市別)元件介接範例程式:
    <html>
      <head>
       <script type="text/javascript" src="https://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CapInfoNormal_66_180155.js"></script>
      <!--   如果你的網站不需要SSL驗證請引用底下前置詞為http 的script資源   -->
       <script type="text/javascript" src="http://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CapInfoNormal_66_180155.js"></script>
      </head>
      <body>
       <div id="capInfo180155_Normal_66" >
       </div>
      </body>
    </html>

    DEMO 畫面

  • 高嚴重示警(縣市別)元件介接範例
    高嚴重示警(縣市別)元件介接範例程式:
    <html>
      <head>
       <script type="text/javascript" src="https://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CapInfoExtreme_66_300100.js"></script>
      <!--   如果你的網站不需要SSL驗證請引用底下前置詞為http 的script資源   -->
       <script type="text/javascript" src="http://alerts.ncdr.nat.gov.tw/temp/StaticFiles/Immediately/CapInfoExtreme_66_300100.js"></script>
      </head>
      <body>
       <div id="capInfo300100_Extreme_66" >
       </div>
      </body>
    </html>

    DEMO 畫面

    • 現無示警 現無示警
      現在沒有示警。 more...
      2018-08-15,11:09 │ 更新