2012年4月7日 星期六

常用的regular expression


這篇會慢慢增加內容,所以我也會更新發布日期。
JavaScript
    var mac = /^\s*([\d[a-f]{2}:){5}[\d[a-f]{2}\s*$/i;
    var ip = /^((\d)|(([1-9])\d)|(1\d\d)|(2(([0-4]\d)|5([0-5]))))\.((\d)|(([1-9])\d)|(1\d\d)|(2(([0-4]\d)|5([0-5]))))\.((\d)|(([1-9])\d)|(1\d\d)|(2(([0-4]\d)|5([0-5]))))\.((\d)|(([1-9])\d)|(1\d\d)|(2(([0-4]\d)|5([0-5]))))$/;


C language
    char *mac =  "([[0-9a-fA-F]{2}:){5}[0-9a-fA-F]{2}";
    char *ip = "^(([0-9])|(([1-9])[0-9])|(1[0-9][0-9])|(2(([0-4][0-9])|5([0-5]))))\\.(([0-9])|(([1-9])[0-9])|(1[0-9][0-9])|(2(([0-4][0-9])|5([0-5]))))\\.(([0-9])|(([1-9])[0-9])|(1[0-9][0-9])|(2(([0-4][0-9])|5([0-5]))))\\.(([0-9])|(([1-9])[0-9])|(1[0-9][0-9])|(2(([0-4][0-9])|5([0-5]))))$";


    參考資料
  1. http://en.wikipedia.org/wiki/Regular_expression



2012年4月1日 星期日

頁面遮罩


我們常常可以在Web上看到,當有事件在背景執行時,Web會跳出半透明的視窗遮住後面的頁面,如:


這裡主要是利用JavaScript控制layer(Z-Index),以及style的opacity和style的display達成,layer控制element之間的stack,也就是MS office裡面常常提到的,"往上/下一層",style.opacity則是透明度,style.display控制顯示或隱藏,這些就可以達成頁面遮罩的功能了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <script type="text/javascript">
//<![CDATA[
    function show() {
      document.getElementById("xie").style.display = "";
      document.getElementById("content1").style.display = "";
      document.getElementById("content1").innerHTML = "內容<br/><input onclick='hide()' type='button' value='確定'/>";
    }

    function hide() {
      document.getElementById("xie").style.display = "none";
      document.getElementById("content1").style.display = "none";
    }
  //]]>
  </script>
  <title>JavaScript Mask</title>
</head>

<body>
  <div style=
  "filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; width: 100%; background-color: White; display: none; height: 100%; position: absolute; left: 0; top: 0;"
       id="xie"></div>

  <div style=
  "width: 100px; background-color: Red; display: none; height: 53px; position: absolute; left: 144px; top: 100px;"
       id="content1"></div>

  <input onclick="show()" type="button" value="顯示" />
</body>
</html>





2012年3月24日 星期六

動態產生HTML element -- document.createElement


我們可以利用document.createElement()動態的產生HTML的element,再利用Node.appendChild()插入某個Node底下,或利用Node.removeChild()自某個Node底下移除,更多資訊可以參考[1]。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>auto table</title>
</head>

<body>
  <table id="brook" summary=""></table>
  <script type="text/javascript">
  //<![CDATA[
    function create_new_row_button(eT, msg) {
        var eR = document.createElement("tr");
        var eC = document.createElement("td");
        var eB = document.createElement("input");
        eB.type = "button"
        eB.value= msg;
        eB.style.width = "100px";

        eT.appendChild(eR);
        eR.appendChild(eC);
        eC.appendChild(eB);
    }
    var station = [
        {name: "CHT"},
        {name: "TW"},
    ];
    for (var i = 0; i < station.length; i++) {
        create_new_row_button(document.getElementById("brook"),
                              station[i].name);
    }
  //]]>
  </script>
</body>
</html>






熱門文章