<![CDATA[小小工程師的日常筆記]]> https://xdeath.tw/index.php zh-tw https://xdeath.tw/read.php?29 <![CDATA[jquery 重複修改CSS、value(更動畫面)]]> admin <tszheng@twnic.net.tw> Mon, 27 Apr 2015 08:36:32 +0000 https://xdeath.tw/read.php?29
按下按紐後間隔200ms連續產生亂數，然後改變中籤的顏色

沒想到怎麼做都做不出來，後來發現javascript是一種單執行緒的語言

所以原本我的邏輯是  迴圈 {按下按鈕->等200ms->亂數換色}

產生結果卻是 等n次200ms，最後換色(因為ui會取最後的結果顯示)

有寫過java的ui應該都清楚，背後邏輯在運作的時候要改變UI狀態

就必須要另外拉一條thread同時做，這樣才可以同時計算邏輯與改變UI

因此javascript的function就必須要使用?完整執行完整個邏輯同時包含改變UI?

也就是查詢後必須用setTimeout去重複執行自己，而不能function中等待n秒再重複執行某動作

程式碼如下


var flag = 0;
function start(total)
{
    var i = Math.floor((Math.random() * total));
    for(var j = 0;j < total;j++)
        $("#" + j).css('background-color','white');
    $("#" + i).css('background-color','yellow');
    if(flag %2 == 1)
        setTimeout("start("+total+")", 30);     <---重複執行自己
    else
        {$("#button").attr("disabled",true);}
}


最後加個停止的條件判斷，就可以成功達成任務了 ]]> https://xdeath.tw/read.php?27 <![CDATA[jquery產生facebook捲軸拉到底部自動新增資料效果(二)]]> admin <tszheng@twnic.net.tw> Mon, 02 Mar 2015 03:46:34 +0000 https://xdeath.tw/read.php?27
本篇是直接把整個頁面當捲軸，程式碼更為簡單

如果要嵌入到某個網頁中，用iframe或div即可

程式碼如下

======================Javascript======================


<script>
    $(function()
    {
      start = 0;                                   //起始資料
      range = 50;                               //一次撈出多少筆資料
      $(window).scroll(function()
      {  
        $BodyHeight = $(document).height();  
        //判斷所見範圍的高度
        $ViewportHeight = $(window).height();  
        //偵測目前捲軸頂點
        $ScrollTop=$(this).scrollTop();  
        if($BodyHeight == ($ViewportHeight+$ScrollTop))
        {  
          var end = start + range;
          $.ajax({
            type: "GET",
            url: "data.php",
            data: "start=" + start + "&end=" + end,
            success: function(data)
            {
              $("table tr:last").after(data);            //表格插入新資料
            }
          });  
          start = end + 1;
        }  
      });  
    });
    </script>


======================Javascript======================


<body>
    <table name='table' border='1' width='800'>
      <tr><td>ID</td><td>公司名稱</td><td>網址</td><td>住址</td><td>電話</td></td>
      <div id='data'><?php echo initdata(); ?></div>
    </table>
</body>
]]> https://xdeath.tw/read.php?25 <![CDATA[jquery產生facebook捲軸拉到底部自動新增資料效果(一)]]> admin <tszheng@twnic.net.tw> Thu, 26 Feb 2015 07:36:22 +0000 https://xdeath.tw/read.php?25
原理很簡單，利用javascript去動態判斷捲軸已經到底部

接下來用ajax去另一個網頁撈新的資料，同時修改現在資料的定位點

接著將撈回來的資料用jquery append到原本資料的底部

以下是大概的範例

======================捲軸部分的CSS==========================

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <style>
    #scroll {
    width: 99%;
    height: 97%;
    overflow: auto; /* 讓它有捲軸 */
    border: 1px solid ;
    margin-bottom: 10px;
    padding: 0px;
    }
    .red {
        color: red;
    }
    </style>

======================判斷捲軸與新增資料======================

<script>
    var range = 50;                             //這邊是一次要撈50筆資料放到表格最後
    var start = 0;                                //從第0筆開始顯示
    $(function()
  {
    $('#scroll').scroll(function()
    {
      var $this = $(this);
      var $scroll = $('#scroll'),
      _height = $scroll.height();
      _scrollHeight =  $scroll.prop('scrollHeight');
      _maxScrollHeight = _scrollHeight - _height;
      if(_maxScrollHeight < $this.scrollTop() )
      {
        
        var end = start + range;
        $.ajax({
          type: "GET",
          url: "data.php",
          data: "start=" + start + "&end=" + end,
          success: function(data){
            $("table tr:last").after(data);               //表格最後插入資料，用append會出問題
            sleep(200);
          }
        });  
        start = end + 1;
      }
    });
  });
  function sleep(ms){
    var starttime= new Date().getTime();
    do{
    }while((new Date().getTime()-starttime)<ms)
  }
</script>

======================html==========================

<div id='scroll'>
      <table name='table' border='1' width='800'>
        <tr><td>ID</td><td>公司名稱</td><td>網址</td><td>住址</td><td>電話</td></td>
        <div id='data'><?php echo initdata(); ?></div>                    //起始資料
      </table>
    </div>

======================實際效果==========================

基本上到底是會自動像data.php取得新的資料沒啥問題

不過不知道為什麼一次會取一堆資料回來

猜測可能是還沒取回資料前滾輪繼續往下拉導致程式認定多次到達底部，

這個部分在到達底部時加上alert或讀取畫面應可解決。 ]]>