TP Notes: HTML 筆記

顯示具有 HTML 筆記 標籤的文章。顯示所有文章

2026年2月4日星期三

關於 javascript 中 Date 的多語系說明

一直以來在寫多國語言都習慣自己處理，在時間顯示的部份也是，因為只有台灣在用 "民國" 幾年，而日本現在則是 "令和" 幾年，西方國家對於日期的使用習慣也不同，有的用 "日/月/年" ，有的用 "年/月/日" ，無意間發現 Date 這個物件可以用來取得或直接轉換各個國家的日期，所以在這裡整理一下:
  
new Date().toLocaleString(語系,options);
  
利用 options 可以指定想要的國家語言，以及想要的格式，可以只要年/月，或者只要星期幾，格式會自動轉換，雖然沒有台灣用的 "民國" 也沒有日本用的 "令和"，對於多國語系支援上，不用再全部自己寫了，省下了非常多的時間。

Available Options Properties

You can mix and match the following properties within the options object to achieve the desired output:

<table border=1>
<tr><td style='width:9ch'>
Property</td><td style='width:15ch'>Values</td><td>Description</td></tr>

<tr><td>weekday	</td><td>'narrow', 'short', 'long'</td><td>The day of the week (e.g., "M", "Mon", "Monday").</td></tr>

<tr><td>year	</td><td>'numeric', '2-digit'	</td><td>The year (e.g., "2025", "25").</td></tr>

<tr><td>month	</td><td>'numeric', '2-digit', 'narrow', 'short', 'long'	</td><td>The month (e.g., "2", "02", "F", "Feb", "February").</td></tr>

<tr><td>day	</td><td>'numeric', '2-digit'	</td><td>The day of the month (e.g., "15", "01").</td></tr>

<tr><td>dateStyle	</td><td>'full', 'long', 'medium', 'short'	</td><td>A style shortcut for the date format that expands to a specific combination of properties. Note: Cannot be used with other date-time component options (e.g., weekday, month).</td></tr>
</table>  
  
```
  $mmcode(r1)
```
<div class="mmresult r1">
<div id="c0204_out">
</div>
<script>
$(function()
{
  let d=new Date();
  let hh="";
  function dodate(s)
  {
    return "<tr><td style='padding:0 0.5ch'>"+s+"</td>"+
           "<td style='padding:0 0.5ch'>"+eval("d."+s)+"</td></tr>";
  } 
  hh+=dodate("toLocaleString()");
  hh+=dodate("toLocaleString('zh-TW')");
  hh+=dodate("toLocaleString('en-US')");
  hh+=dodate("toLocaleString('ja-JP')");
  hh+=dodate("toLocaleString('ko-KR')");
  hh+=dodate("toLocaleString('zh-TW',{dateStyle:'full'})");
  hh+=dodate("toLocaleString('en-US',{dateStyle:'full'})");
  hh+=dodate("toLocaleString('ja-JP',{dateStyle:'full'})");
  hh+=dodate("toLocaleString('ko-KR',{dateStyle:'full'})");
  hh+=dodate("toLocaleString('zh-TW',{year:'numeric',month:'long'})");
  hh+=dodate("toLocaleString('en-US',{year:'numeric',month:'long'})");
  hh+=dodate("toLocaleString('ja-JP',{year:'numeric',month:'long'})");
  hh+=dodate("toLocaleString('ko-KR',{year:'numeric',month:'long'})");
  hh+=dodate("toLocaleString('zh-TW',{weekday:'long'})");
  hh+=dodate("toLocaleString('en-US',{weekday:'long'})");
  hh+=dodate("toLocaleString('ja-JP',{weekday:'long'})");
  hh+=dodate("toLocaleString('ko-KR',{weekday:'long'})");
  $("#c0204_out").html("<table border=1 cellspacing=0>"+hh+"</table>");
})
</script>
</div>

2022年7月24日星期日

掃瞄QRCODE

只靠 HTML 前端技術就可以使用相機，那麼最實用的功能就是掃瞄 QRCODE ，這裡提供一個最簡單易用的方式
  
使用函式庫：https://github.com/mebjas/html5-qrcode
  
  
```
$mmcode(r1)
```
<div class="mmresult r1">
  <button id="b072401_idfront">Front</button>
  <button id="b072401_idback">Back</button>
  <button id="b072401_idstop">Stop</button>
  <input type="file" id="b072401_idfile" accept="image/*">
  <hr>
  <div id="b072401_idresult"></div>
  <hr>
  <div id="b072401_reader" style="display:inline-block;width:320px;" ></div>
  <script>
    $(function()
      {
      const html5QrCode = new Html5Qrcode("b072401_reader");
      const qrCodeSuccessCallback = (decodedText, decodedResult) => 
      {
        $("#b072401_idresult").html(JSON.stringify(decodedResult,"",4))
      };
      const config = 
            { 
              fps: 10, 
              qrbox: { width: 200, height: 200 } 
            };
      $("#b072401_idfront").on("click",function()
                               {
        $("#b072401_idstop").click();
        html5QrCode.start({ facingMode: "user" }, config, qrCodeSuccessCallback);
      })
      $("#b072401_idback").on("click",function()
                              {
        $("#b072401_idstop").click();
        html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);
      })
      $("#b072401_idstop").on("click",function()
                              {
        try
        {
          html5QrCode.stop().then((ignore) => 
                                  {
            console.log("stop ok")
          }).catch((err) => {
            console.log("stop err")
          });
        }
        catch(e){}
      })
      $("#b072401_idfile").on("change",function(e)
                              {
        $("#b072401_idstop").click();
        if (e.target.files.length == 0) {
          // No file selected, ignore 
          return;
        }
        const imageFile = e.target.files[0];
        // Scan QR Code
        html5QrCode.scanFile(imageFile, true)
          .then((decodedText) => {
          $("#b072401_idresult").html(decodedText)
        })
          .catch(err => {
          console.log(`Error scanning file. Reason: ${err}`)
        });
      })
    })
  </script>
  <script src="https://yiharng.github.io/html5-qrcode.min.js"></script>
</div>

2022年7月18日星期一

使用 Webcam

本來要整理 html 的資料，卻覺得這類型的資料太多也太容易取得，決定改變一下方向，只整理 html 相關比較進階實用的小技巧。
  
無意間看到一個令人懷念的東西，getUserMedia()，可以在網頁上使用 Webcam ，好幾年前遇到一個專案，需要利用相機功能實做一個類似 AR 的畫面，而那個專案用的是 cordova ，於是查了查資料，就用 getUserMedia 來取得相機畫面當背景，在前面放個箭頭指向目的地的方向，當實作完成後卻發現 Android 4.x 不支援，還好加上 webkit plugin 後就可以了，然而最麻煩的是 IOS 不支援...... 最後只好用 camera preview plugin 來重寫，而後續的又是另一個故事了。
  
那麼首先先來一個範例
  
```
$mmcode(r1)  
```
  
<div class="mmresult r1">
  <button style="height:4ch;" id="b071801_idfront">前鏡頭</button>
  <button style="height:4ch;" id="b071801_idback">後鏡頭</button>
  <button style="height:4ch;" id="b071801_idstop">stop</button>
  <button style="height:4ch" id="b071801_idgetpic">抓圖</button>
  <br>
  <div id="b071801_ida">
    亮度<input id="b071801_idb" type="range" min="0" max="200" value="100"><br>
    對比<input id="b071801_idc" type="range" min="0" max="200" value="100"><br>
    飽和<input id="b071801_ids" type="range" min="0" max="400" value="100"><br>
  </div>
  <video controls id="b071801_video" playsinline autoplay muted loop>Video stream not available.</video>
  <br>
  <img id="b071801_idimg" src="">
  <script>
    $(()=>
    {
      let b071801_video=$("#b071801_video")[0];
      function stopcam()
      {
        try
        {
	        b071801_video.srcObject.getTracks()[0].stop();
        }
        catch(err){}
      }
      function docam(mode)
      {
        let fmode;
        stopcam();
        if (!mode)
        {
          fmode="user";//前鏡頭
        }
        else
        {
          fmode="environment";//後鏡頭
//          fmode={ exact: "environment" };//後鏡頭
        }
        navigator.mediaDevices.getUserMedia
        (
          {
            audio: false,
            video: 
            {
              width: { min: 320, ideal: 320, max: 1920 },
              height: { min: 240, ideal: 240, max: 1080 },
              facingMode: fmode
            }            
          }
        ).then(function(stream) {
          b071801_video.srcObject = stream;
          b071801_video.play();
        }).catch(function(err) {
          console.log("An error occurred: " + err);
        });
      }
      $("#b071801_idfront").on("click",function()
      {
          docam(0);
      })
      $("#b071801_idback").on("click",function()
      {
          docam(1);
      })
      $("#b071801_idstop").on("click",function()
      {
          stopcam();
      })
      $("#b071801_idgetpic").on("click",function()
      {
          let ca=$("<canvas></canvas>")[0];
          let ct = ca.getContext('2d');
          let w=b071801_video.videoWidth;
          let h=b071801_video.videoHeight;
          ca.width = w;
          ca.height = h;
          ct.drawImage(b071801_video, 0, 0, w, h);
          let data = ca.toDataURL('image/jpeg');
          $("#b071801_idimg").attr("src",data);
      })
      $("#b071801_ida input").on("input",function()
      {
          let f="brightness("+$("#b071801_idb").val()+"%) "
              +"contrast("+$("#b071801_idc").val()+"%) "
              +"saturate("+$("#b071801_ids").val()+"%) ";
          $("#b071801_video").css("filter",f);
          $("#b071801_idimg").css("filter",f);
      })
    })
  </script>
</div>

程式盡量簡化了，可以設定使用前鏡頭還是後鏡頭，也可以抓圖，而且支援 CSS 的 filter ，利用 CSS 來調整亮度對比飽和。
  
在 iphone 上，使用 chrome 或 firefox 都沒有問題，而 safari 似忽不支援，
  
在 MAC 上的 safari 完全正常，Android 上也是完全正常
  
可以用相機預覽，可以抓圖，基本上就是拍照功能了，也可以即時處理影像，例如辨識條碼或證件號碼之類的，光靠網頁就可以做到很多特別的功能

參考資料：https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

2022年4月29日星期五

整理一下所有 input 的型式

無意間看到一些沒用過的 input 型式，查了一下資料，決定開始整理一些 HTML 的技術文件
  
Form 可以用 GET 和 POST 以及用 POST 時可以設定編碼方式用來上傳檔案

```  
<form method="post" enctype="multipart/form-data" action="">
<form method="get" action="">
```  
  
```
  $mmcode(r1)
```
<div class="mmresult r1">
<form method="get" action="">
<fieldset>
<legend>元件</legend>
button <input type="button" name="button" value="button"><br>
checkbox <input type="checkbox" name="checkbox" value="123" checked><br>
radio <input type="radio" name="radio" value="123" checked>
      <input type="radio" name="radio" value="456"><br>
range <input type="range" name="range"><br>
color <input type="color" name="color"><br>
</fieldset>
<fieldset>
<legend>表單</legend>
text <input type="text" name="text"><br>
password <input type="password" name="password"><br>
number <input type="number" name="number"><br>
search <input type="search" name="search"><br>
tel <input type="tel" name="tel"><br>
email <input type="email" name="email"><br>
url <input type="url" name="url"><br>
file <input type="file" name="file" accept="text/plain, image/jpeg"><br>
hidden <input type="hidden" name="hidden" value="hidden"><br>
</fieldset>
<fieldset>
<legend>時間相關</legend>
date <input type="date" name="date"><br>
datetime <input type="datetime-local" name="datetime"><br>
time <input type="time" name="time"><br>
week <input type="week" name="week"> 實測結果在 IPhone 上無法使用<br>
month <input type="month" name="month"><br>
</fieldset>
<fieldset>
<legend>表單提交</legend>
image <input type="image" src="https://yiharng.github.io/bomb.png"><br>
reset <input type="reset"><br>
submit <input type="submit"><br>
</fieldset>
</form>
</div>

Translate

2026年2月4日 星期三