Falleaves'Blog

2011年1月12日星期三

Jquery樂透彩選號程式

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(function(){
 numberTable = new Array("1","2","3","4","5","6","7","8","9","10",
       "11","12","13","14","15","16","17","18","19","20",
       "21","22","23","24","25","26","27","28","29","30",
       "31","32","33","34","35","36","37","38","39");
 var nums = $('#character :input');
 //將按鈕的值放入
 nums.each(function(k){
  $(this).val( numberTable[k] );
 });
 //挷定按鈕的事件
 nums.bind('click',function(){  
  var choVal = $('#choice').val();   
  if(choVal!= ''){
   splitArr = choVal.split(",");
   //禁止重覆選號
   for(i=0;i<splitArr.length;i++){
    if( $(this).val() == splitArr[i] ){    
     return false;
    }
   }
   //禁止超過5個選號
   if(splitArr.length == 5){return false;}
  }
 
  
  if( choVal == ''){
   choVal = $(this).val();
  }else{
   choVal += "," + $(this).val();
  }
  $('#choice').val( choVal );
 });
 
 //自動選號 
 $('#auto').bind('click',function(){
  randomCho(5,39);
 });
 //送出檢查
 $('#send').bind('click',function(){
  var choVal = $('#choice').val(); 
  splitArr = choVal.split(",");
  //檢查數量
  if(splitArr.length != 5){
   alert("選號不足5個!");
   return false;
  }else{
   //排序
   splitArr.sort(myUpSort);
   //加逗號
   popStr = splitArr.join(","); 
     
   if(confirm("親愛的玩家您好:您選的號碼是 "+popStr+" 確認選號確認後，我們將於您的帳戶中扣取10,000點紅利 。") ){
  
   $('#form1').submit();
   }else{
   /* location.reload(); */
   }
  }
 });
 function randomCho(total,maxNum){
  var numberTable = new Array("1","2","3","4","5","6","7","8","9","10",
       "11","12","13","14","15","16","17","18","19","20",
       "21","22","23","24","25","26","27","28","29","30",
       "31","32","33","34","35","36","37","38","39");
  var numArray = new Array();
  var reStr = "";
  for(var i=0;i<total;i++){
   var index = Math.floor(Math.random()*(maxNum-1)); //亂數產生0~38之間的數字
   numArray.push( numberTable[index] );   
   //將選到的數字從陣列中刪掉，避免重覆…
   numberTable.splice(index,1);
   maxNum--;
  }
  //排序
  numArray.sort(myUpSort);
  //加逗號
  reStr = numArray.join(",");
  //console.log( reStr );
  $('#choice').val(reStr)  
 }
 //遞增排序
 function myUpSort(x,y){return x-y}
});
</script>

看範例

2011年1月4日星期二

AMFPHP 連結 PHP時出現 Error #2044 錯誤

剛開始用amfphp連結PHP時就一直有這個問題…
一直找不出原因和解決的方法…
不過用brower去run卻又都很正常，後來就沒有繼續找答案…
今天有上網找了一下，終於看到了答案…

參考的網頁:

http://www.shch8.com/blog/post/72.html
試了一下，發現只要將amfphp的gateway.php裡面的
$gateway->disableStandalonePlayer();
這行註解掉就行了…
其實答案就在gateway.php裡頭的註釋就有了，
卻一直沒有花一點時間去好好看看gateway.php這個檔…orz...
如下：
// Keep the Flash/Flex IDE player from connecting to the gateway.

Used for security to stop remote connections.

原來直接在flash CS5裡面直接run AMFPHP(standalone?)

本來基於安全的理由就會被禁止的，用brower去連就沒有這樣的問題了：)

2010年12月30日星期四

Jquery實現按下Enter鍵時自動跳下一輸入欄位

客戶在輸入資料時會使用BarCode機作掃描…
而掃描時會在最後面送一個enter訊號…
所以希望在掃描後能自動跳一欄位繼續輸入...

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(function(){ 
 //送出表單 
 var focusItem = null; 
 var inputs = $('input[type=text]');
 $('input[type=text]').focus( function(){  
  focusItem = inputs.index( $(this) );
 });
 
 $(document).keydown(function(event){   
   if(event.keyCode==13){  //如果按 enter     
   //跳下一個欄位
   inputs.eq(  (focusItem+1) ).focus();
   }
 });
 //為了不讓按下Enter就送出表單，把原本的submit改成button
 //再自己處理submit的按鈕
 $('input[name=mySubmit]').bind('click',function(){
  $('#form2').submit();
 });
});
</script>
<form id="form2" method="post" action="idsk_check.php">
 <input type="text" value="0" />
    <input type="text" value="1" />
    <input type="text" value="2" />
    <input type="text" value="3" />
    <input type="text" value="4" />
</form>

<input name="mySubmit" type="button"  value="Submit"/>

2010年12月21日星期二

實現兩個多重下拉選單中移動所選的項目

先來看Jquery的部分


 $(function() {
    $('#add').click(function() {
        //將select1所選的項目先移除然後放到select2的最下面
        $('#select1 option:selected').remove().appendTo('#select2');
       });
       $('#remove').click(function() {
        //相反的方向
        $('#select2 option:selected').remove().appendTo('#select1');
       });
    //按下送出時只要是select2有的項目就是選取的項目
    //所以還要先將select2有的項目加上己選取才能送出去…
       $('form').submit(function() {
         $('#select2 option').each(function() {
          $(this).attr("selected", "selected");
         });
    });
});

完整程式範例



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="../scripts/jquery.js"></script>
<script type="text/javascript">
$(function() {
 $('#add').click(function() {
  //將select1所選的項目先移除然後放到select2的最下面
     $('#select1 option:selected').remove().appendTo('#select2');
    });
    $('#remove').click(function() {
  //相反的方向
     $('#select2 option:selected').remove().appendTo('#select1');
    });
 //按下送出時只要是select2有的項目就是選取的項目
 //所以還要先將select2有的項目加上己選取才能送出去…
    $('form').submit(function() {
   $('#select2 option').each(function() {
    $(this).attr("selected", "selected");
   });
 });
});
</SCRIPT>
<style type="text/css">
#data a {
 display: block;
 border: 1px solid #aaa;
 text-decoration: none;
 background-color: #fafafa;
 color: #123456;
 margin: 2px;
 clear:both;
}
.div {
 float:left;
 text-align: center;
 margin: 10px;
}
#arrow {
 float:left;
 margin: 10px;
 padding-top: 200px;
}
.select {
 width: 200px;
 height: 350px;
}
</style>
</head>
<body>
兩個多重下拉選單中移動所選的項目
<div id="data">
  <div class="div">
    <select multiple id="select1" class="select">
      <option>111111111</option>
      <option>222222222</option>
      <option>478795333</option>
      <option>478797444</option>
      <option>478797555</option>
      <option>478795666</option>
      <option>478797777</option>
      <option>478797888</option>
      <option>478795999</option>
      <option>478797126</option>
      <option>478797134</option>
      <option>478795343</option>
    </select>
  </div>
  <div id="arrow"> <a href="#" id="add">&nbsp;&nbsp;&gt;&gt;&nbsp;&nbsp;</a> <br />
    <a href="#" id="remove">&nbsp;&nbsp;&lt;&lt;&nbsp;&nbsp;</a> </div>
  <form action="handle.php" method="post">
    <div class="div">
      <select multiple id="select2" name="selectedArr[]" class="select">
      </select>
    </div>
    <input type="submit" value="submit" />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  </form>
</div>
</body>
</html>

範例圖片:

如何實現不按tab鍵自動跳到下一個input欄位

客戶反應希望可以不按tab鍵，就可以自動跳到下一個欄位，加強一下方便性…
這個例子的輸入是一定要滿足最大輸入，
所以移動焦點的觸發條件是檢查目前輸入的內容的長度是否己經等於maxlength…
一、Jquery的部份…

$(function(){
    $('input:first').focus(); 
    $('input').keyup(function(){
        var inputs = $('input'); //先取得所有input元素
        var maxlen = $(this).attr('maxlength');   //取得目前元素的maxlength
        if( $(this).val().length == maxlen ){ //當滿足maxlength時...
            inputs.eq( inputs.index($(this))+ 1 ).focus(); 
   //利用.index算出目前元素是在所有元素中的索引值，再將索引值+1，指向下一個input
        }
    }); 
});

二、完整的程式碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../js/jquery-1.4.3.min.js"></script>
        <script type="text/javascript">
$(function(){
    $('input:first').focus(); 
    $('input').keyup(function(){
        var inputs = $('input'); //先取得所有input元素
        var maxlen = $(this).attr('maxlength');   //取得目前元素的maxlength
        if( $(this).val().length == maxlen ){ //當滿足maxlength時...
            inputs.eq( inputs.index($(this))+ 1 ).focus(); 
   //利用.index算出目前元素是在所有元素中的索引值，再將索引值+1，指向下一個input
        }
    }); 
});
        </script>
    </head>
    <body>
     
<form id="form1" name="form1" method="post" action="report_check.php">
  <table width="98%" border="1" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center" width="100" height="25">Serial Code:</td>
      <td align="left"><input name="code[]" type="text" size="8" maxlength="4" />
        <input name="code[]" type="text" size="8" maxlength="4" />
        <input name="code[]" type="text" size="8" maxlength="4" />
        <input name="code[]" type="text" size="8" maxlength="4" />
        &nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;
        <input name="code[]" type="text" size="8" maxlength="4" />
        <input name="code[]" type="text" size="8" maxlength="4" />
        <input name="code[]" type="text" size="8" maxlength="4" />
        <input name="code[]" type="text" size="8" maxlength="4" /></td>
    </tr>
    <tr>
      <td align="center" width="100" height="25">Number1:</td>
      <td align="left"><input name="number1" type="text" maxlength="7" /></td>
    </tr>
    <tr>
      <td align="center" width="100" height="25">Number2:</td>
      <td align="left"><input name="number2" type="text" maxlength="10" /></td>
    </tr>
    <tr>
      <td colspan="2" align="center"><input name="bn_submit" type="submit"  value="Submit"/></td>
    </tr>
  </table>
</form></body>
</html>

2009年12月11日星期五

JavaScript 陣列 v.s 物件 v.s. JSON的使用

Jquery也用了好一陣子了，但對javascript的陣列和物件總是不清楚那裡不一樣，跟JSON又有什麼不同?看來想要搞懂JSON之前，要來把陣列和物件分清楚先…

宣告陣列



var arr = [];    //空陣列

var arr = new Array();

var arr = Array();

宣告陣列的同時將資料放入
var arr = ["value1", "value2", "value3"];    //直接給定值
var arr = new Array("value1", "value2", "value3");    //使用new建構子來建立陣列變數
var arr = Array("value1", "value2", "value3");        //使用函數來建立
陣列的存取



arr[0] = "value1";

arr[1] = "value2";

arr.push("value3"); //附加元素至陣列的末端

陣列的取值方式



for (var i = 0; i < arr.length; i++) {

    $('body').append(i +" => "+ arr[i] + " " );

}

$.each(arr,function(index){

   $('body').append( index + " => " + this +" ");

});

發現和PHP不一樣的地方，Javascript的陣列無法在建立時給值時自定索引值,而是一律用預設的索引值0,1,2，如果想要自定索引值，而且是字串型態就得用另一外主角-物件(Object)啦…
不過抱持研究的精神還是自行來try try看到底自定字串的索引行不行…
無法初始化，那就先宣告完，再給值看看



var arr = [];

arr["key1"] = "value1";

arr["key2"] = "value2";

arr["key3"] = "value3";

for (var i = 0; i < arr.length; i++) {

    $('body').append(i +" => "+ arr[i] +" " );

}

似乎是可以捉的到值,但是用length捉總共的筆數時卻得到0,
看來Array還是不承認用字串索引的元素啊，感覺像是私生子啊…^^||



 for (var i = 0; i < arr.length; i++) {

    $('body').append(i +" => "+ arr[i] +" " );

}

結論目前看來只要不用length來捉陣列的長度，用for in或是each的迴圈還是可以正常運作的樣子…
物件(objects):
宣告物件



var obj1 = { key1:'value1',key2:'value2',key3:'value3' }; //以大括弧包起來

var obj2 = { 1:'value1',2:'value2',3:'value3'};

取值的方法有兩種，obj.x或是obj[x]，但是要注意如果索引值是數字的話，用obj.x是無法取值的喔…
取值 for in
$('body').append( obj2[1] );
用for in取值時一定要用obj[x]的方法，用.的方式取值都會是undefined

for (var x in obj1){

    $('body').append(x +" => "+ obj1.x +" " );

}

for (var x in obj2){

    $('body').append(x +" => "+ obj2.x +" " );

}

用Jquery的 $.each 似乎是最方便的方式



$.each(obj1,function(index){

    $('body').append( index + " => " + this +" ");                        

});

$.each(obj2,function(index){

    $('body').append( index + " => " + this +" ");                        

});

最後是JSON了…陣列中的元素可是字串，數字也可以是物件，將物件放入一個陣列中，其實就是JSON啦…
var obj2 = [{ one:1, two:2, three:3, four:4, five:5 },{ 'key1':'Red','key2':'Green','key3':'Blue' }];
取值一
for (var x in obj2){
    for(var y in obj2[x] )
        $('body').append(x+" "+ y + " => "+ obj2[x][y] + " ");
}
取值二
$.each(obj2,function(index){
    $.each(this,function(index){
        $('body').append( index + " => "+ this + " ");
    });

});

訂閱：文章 (Atom)

2011年1月12日 星期三