14_jquery练习

最新推荐文章于 2024-08-12 23:44:43 发布

Ayui.

最新推荐文章于 2024-08-12 23:44:43 发布

阅读量42

点赞数

分类专栏： 02_javaee 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_61569709/article/details/132683826

版权

02_javaee 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1购物车

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery练习01购物车</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<style type="text/css">
    table{
      width:800px;
      margin:10px auto;
      border:1px solid blue;
      border-collapse: collapse;
    }
    td,th{
      border:1px solid blue;
      padding:10px;
      text-align: center;
    }
    #font_count{
       background-color: #aaaaaa;
       color:red;
       font-weight: bold;
    }
</style>
</head>
<body>
    <table id="tab_goods">
       <tr>
          <th colspan="6" style="text-align: left;">
             <input type="button" value="添加商品" id="but_add"/> |
             <input type="button" value="反选商品" id="but_fan"/>  |
             <input type="button" value="删除选中" id="but_del"/> |
             <span>商品的总价：<font id="font_count">0元</font></span>
          </th>
       </tr>
       <tr>
          <th>顺序</th><th>名称</th><th>数量</th><th><a href="javascript:sortPrice();">单价</a></th><th>厂家</th><th><input type="checkbox" name="box_all"/></th>
       </tr>
    </table>
    <script type="text/javascript">
        //延伸练习：单价可以点击 点击可以排序：正序和倒序
        function sortPrice(){
        	alert("排序");
        }
        //给id="but_del"注册事件：删除选中的商品
        $(function(){
        	$("#but_del").click(function(){
        		$.each($("input[name='box_goods']:checked"),function(i,n){
        			 $(n).parents("tr").remove();
        			 //parents方法获取所有的祖先标签
        			 //remove方法 删除标签
        		});
        		//重新计算总价格
				setFontText();
        	});
        });
        
        //当有商品选中时：显示总价格在id="font_count"中
        function setClickEvent(){
        	$("input[name='box_goods']").unbind();
        	$("input[name='box_goods']").click(setFontText);
        }
        //创建一个方法 统计被选中的checkbox的总价格
        function setFontText(){
        	var sum=0;
    		$.each($("input[name='box_goods']:checked"),function(i,n){
    			//找到当前input的tr祖先标签
    			var $tr=$(n).parents("tr");
    			//获取tr的所有td子标签
    			var collTd=$tr.children("td");
    			var num=collTd[2].innerText;
    			var price=collTd[3].innerText;
    			sum+=parseFloat(num)*parseFloat(price);
    		});
    		//把sum设置为id="font_count"的文本内容
    		$("#font_count").text(parseInt(sum*100)/100+"元");
        }
        
        //给box_all注册点击事件：box_all被选中 所有的name='box_goods'都别选中 
		// box_all取消选中 所有的name='box_goods'都取消选中
		$(function(){
			$("input[name='box_all']").bind("click",function(){
				//alert($(this).attr("checked"));
				var bchecked=$(this).attr("checked");
				$("input[name='box_goods']").attr("checked",bchecked);
				//重新计算总价格
				setFontText();
			});
		});
        
        //反选
        $(function(){
        	$("#but_fan").bind("click",function(){
        		$.each($("input[name='box_goods']"),function(i,n){
        			$(n).attr("checked",!$(n).attr("checked"));
        		});
        		//重新计算总价格
				setFontText();
        	});
        });
        
        //通过js在tab_goods添加5个商品
        $(function(){
        	var arr=[["铅笔","上海"],["笔记本","新华"],["橡皮","中原"],["皮鞋","意尔康"],["上衣","森马服饰"],["铅笔","上海"],["笔记本","新华"],["橡皮","中原"],["皮鞋","意尔康"],["上衣","森马服饰"]];
        	
        	for(var i=0;i<arr.length;i++){
        		//创建tr
        		var $tr=$("<tr></tr>");
        		$tr.append($("<td>"+(i+1)+"</td>"));
        		$tr.append($("<td>"+arr[i][0]+"</td>"));
        		$tr.append($("<td>"+(parseInt(Math.random()*10))+"</td>"));
        		$tr.append($("<td>"+(parseInt(Math.random()*100)/10)+"</td>"));
        		$tr.append($("<td>"+arr[i][1]+"</td>"));
        		$tr.append($("<td><input type='checkbox' name='box_goods'/></td>"));
        		$("#tab_goods").append($tr);
        	}
        	
        	//设置form_add默认是隐藏的
        	$("#form_add").hide();
        	
        	//点击but_add时 form_add显示
        	$("#but_add").bind("click",function(){
        		$("#form_add").show();
        	});
        	
        	//给form_add注册提交事件
        	$("#form_add").submit(function(){
        		//获取表单的信息 把信息添加到tab_add_goods表格中
        		var $tr=$("<tr></tr>");
        		$tr.append($("<td>"+($("#tab_goods tr").length-1)+"</td>"));
        		$tr.append($("<td>"+($("#tab_add_goods input[name='gname']").val())+"</td>"));
        		$tr.append($("<td>"+($("#tab_add_goods input[name='gprice']").val())+"</td>"));
        		$tr.append($("<td>"+($("#tab_add_goods input[name='gnum']").val())+"</td>"));
        		$tr.append($("<td>"+($("#tab_add_goods input[name='gaddress']").val())+"</td>"));
        		$tr.append($("<td><input type='checkbox' name='box_goods'/></td>"));
        		$("#tab_goods").append($tr);
        		
        		setTrColor();//各行变色
            	gaoLiang();//高亮
            	setClickEvent();//给所有的checkbox添加点击事件
        		return false;//阻止表单提交
        		
        	});
        	
        	//各行变色
        	setTrColor();
        	
        	//高亮
        	gaoLiang();
        	
        	//给所有的checkbox添加点击事件
        	setClickEvent();
        });
        //定义一个全局变量记录 鼠标移入的tr的当前背景颜色
        var vbgcolor="";
        //方法实现鼠标悬停 高亮
        function gaoLiang(){
        	$("#tab_goods tr:gt(1)").unbind();//移除以前所有的事件
        	$("#tab_goods tr:gt(1)").hover(function(){
        		    vbgcolor= $(this).css("background-color");//先记录背景颜色的值
        		    $(this).css("background-color","#aa6666");//更改
        		},function(){
        			 $(this).css("background-color",vbgcolor);//更改为原来的值
        	});
        }
        //方法实现各行变色
        function setTrColor(){
        	$("#tab_goods tr:even").css("background-color","#aacc99");
        	$("#tab_goods tr:odd").css("background-color","#99aacc");
        }
    </script>
    <hr/>
    <form id="form_add" >
        <table id="tab_add_goods">
            <tr>
               <th>商品名称</th><td><input type="text" name="gname"/></td>
            </tr>
            <tr>
               <th>商品单价</th><td><input type="text" name="gprice"/></td>
            </tr>
            <tr>
               <th>商品数量</th><td><input type="text" name="gnum"/></td>
            </tr>
            <tr>
               <th>商品厂家</th><td><input type="text" name="gaddress"/></td>
            </tr>
            <tr>
               <th colspan="2">
                   <input type="submit" value="添加"/>
               </th>
            </tr>
        </table>
    </form>
</body>
</html>

2 实现按单价排序

//定义一个全局变量 记录倒序还是正序
var n=0;
//延伸练习：单价可以点击 点击可以排序：正序和倒序
function sortPrice(){
    //获取tab_goods中tr索引大于1的tr 就是所有的商品
    var $collTr=$("#tab_goods tr:gt(1)");
    //把jquery对象转化为数组对象
    var arrTr=$collTr.toArray();
    //根据tr的第四个td的文本内容进行排序
    //使用顺序排序
    /*
        	for(var i=0;i<arrTr.length-1;i++){
        		for(var j=i+1;j<arrTr.length;j++){
        			 //获取tri的单价 和trj的单价
        			 //var pricei=parseFloat(arrTr[i].getElementsByTagName("td")[3].innerText);
        			 var pricei=parseFloat($(arrTr[i]).children("td:eq(3)").text());
        			 var pricej=parseFloat($(arrTr[j]).children("td:eq(3)").text());
       				 if((n==1&&pricei>pricej)||(n==0&&pricei<pricej)){
           				 var tr=arrTr[i];arrTr[i]=arrTr[j];arrTr[j]=tr;
           			 }
        		}
        	}*/
    //使用js中的方法进行排序
    arrTr.sort(function(tri,trj){
        var pricei=parseFloat($(tri).children("td:eq(3)").text());
        var pricej=parseFloat($(trj).children("td:eq(3)").text());
        return pricei==pricej?0:(pricei>pricej?1:-1);
    });
    if(n==1){
        arrTr.reverse();
    }
    //把数组再重新装入数组中
    for(var i=0;i<arrTr.length;i++){
        $(arrTr[i]).children("td:first").text(i+1);//设置第一列顺序的值
        $("#tab_goods").append($(arrTr[i]));//把tr重新装入table中
    }
    //重新隔行变色
    setTrColor();

    //下次在点击是反照排序
    n=(n+1)%2;
}

3 日历

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery练习02日历插件</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<style type="text/css">
    #div_date{
        width:350px;
        border:1px solid blue;
        padding:2px;
        margin-top:10px;
        text-align: center;
        font-weight: bold;
    }
    #tab_date{
        border:1px solid blue;
        width:345px;
        border-collapse: collapse;
        margin:2px auto;
    }
    
   #tab_date th,#tab_date td{
      text-align: center;
      border:1px solid blue;
      padding:4px;
   }
   #tab_date th{
      background: #cccccc;
      color:blue;
   }
</style>
</head>
<body>
     <input type="date" name="birth"/><br/>
     <input type="text" name="birth" id="input_date"/>
     <script type="text/javascript">
        //定义一个全局变量记录时间
        var date=new Date();
        var year=date.getFullYear(),month=date.getMonth()+1;
        $(function(){
        	//文档加载时给input_date注册事件
        	$("#input_date").focus(function(){
        		//删除div
            	$("#div_date").remove();
        		$(this).after("<div id='div_date'></div>");
        		//创建一个表格：
        		createTable(date);
        	});
        	$("#input_date").blur(function(){
        		//删除table
        		//$("#tab_date").remove();
        	});
        });
        function createTable(date){
        	
        	//创建表格
        	var $tab=$("<table id='tab_date'></table>");
        	//创建第一行
        	var $tr1=$("<tr><th colspan='7'></th></tr>");
        	$tr1.children("th:first").append("<input type='button' value='<<' id='but_year_reduce'/>&nbsp;");
        	$tr1.children("th:first").append("<input type='button' value='<' id='but_month_reduce'/>&nbsp;");
        	$tr1.children("th:first").append("<input type='text'  id='text_date'/>&nbsp;");
        	$tr1.children("th:first").append("<input type='button' value='>' id='but_month_add'/>&nbsp;");
        	$tr1.children("th:first").append("<input type='button' value='>>' id='but_year_add'/>");
        	
        
        	
        	//创建第二行
        	var weekStr="日一二三四五六";
        	var $tr2=$("<tr></tr>");
        	for (var i = 0; i < weekStr.length; i++) {
        		$tr2.append("<th>"+(weekStr.charAt(i))+"</th>");
			}
        	$tab.append($tr1); $tab.append($tr2);
        	
        	//创建其他行
        	var daysTotal=getMyDays(year,month);
        	//alert(daysTotal);
        	//alert(date.getFullYear()+"::::"+date.getMonth()+1);
        	var n=0;
        	for(var i=1;true;i++){
        		//创建行
        		var $tr=$("<tr></tr>");
        		//tr中创建列
        		for(var j=0;j<=6;j++){
        			var $td=$("<td></td>");
        			if((n==0&&i==1&&j==getFirstDayWeek(year,month))||(n!=0)){
        				n++;
        			}
        			if(n!=0&&n<=daysTotal){
        				$td.text(n);
        			}
        			$tr.append($td);
        		}
        		$tab.append($tr);
        		if(n>=daysTotal){
        			break;
        		}
        	}
        	$("#div_date").append($tab);
        	
        	
        	//text_date不能输入
        	$("#text_date").attr("disabled","disabled");
        	//在text_date中显示年月
        	$("#text_date").css({"width":"100px","text-align":"center"});
        	$("#text_date").val(year+"年"+month+"月");
        	
        	//给所有有文本的td添加鼠标移入和移除事件
        	$("#tab_date tr:gt(1) td:parent").hover(function(){
        		  $(this).css("background-color","#cc6699");
        	},function(){
        		  $(this).removeAttr("style");
        	});
        	
        	//给所有有文本的td添加点击事件
        	$("#tab_date tr:gt(1) td:parent").bind("click",function(){
        		  $(this).css("background-color","#aaaaaa");
        		  //更改时间
        		  date.setDate($(this).text());
        		  //把年月日写入input_date中
        		  $("#input_date").val(year+"年"+month+"月"+date.getDate()+"日");
        	});
        	
        }
        // 根据年月 判断天数
        function getMyDays(year,month){
        	switch(month){
        	case 4:
        	case 6:
        	case 9:
        	case 11:
        		 return 30;
        	case 2:
        		 return ((year%400==0)||(year%4==0&&year%100!=0))?29:28;
            default:
            	 return 31;
        	}
        }
        
        //根据年月日 判断指定年月的1号是星期几
        function getFirstDayWeek(year,month){
        	var dateFirst=new Date(year,month-1,1);
        	return dateFirst.getDay();//0-6对应日-六
        }
     </script>
</body>
</html>

4 日历补充

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery练习02日历插件</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<style type="text/css">
    #div_date{
        width:350px;
        border:1px solid blue;
        padding:2px;
        margin-top:10px;
        text-align: center;
        font-weight: bold;
    }
    #tab_date{
        border:1px solid blue;
        width:345px;
        border-collapse: collapse;
        margin:2px auto;
    }
    
   #tab_date th,#tab_date td{
      text-align: center;
      border:1px solid blue;
      padding:4px;
   }
   #tab_date th{
      background: #cccccc;
      color:blue;
   }
</style>
</head>
<body>
     <input type="date" name="birth"/><br/>
     <input type="text" name="birth" id="input_date"/>
     <script type="text/javascript">
        //定义一个全局变量记录时间
        var date,year,month;
        $(function(){
        	 date=new Date();year=date.getFullYear();month=date.getMonth()+1;
        	//文档加载时给input_date注册事件
        	$("#input_date").toggle(function(){
        		$(this).after("<div id='div_date'></div>");
        		//创建一个表格：
        		createTable();
        	},function(){
            	$("#div_date").remove();//删除div
        	});
        });
        //方法更改年
        function changeYear(m){
    		date.setFullYear(date.getFullYear()+m);
    		year=date.getFullYear();month=date.getMonth()+1;
    		createTable();//重新画表格
        }
        //方法更改月
         function changeMonth(m){
    		date.setMonth(date.getMonth()+m)
    		year=date.getFullYear();month=date.getMonth()+1;
    		createTable();//重新画表格
        }
        
        
        //定义一个变量记录被点击的td
        var checkTd;
        function createTable(){
        	//删除原理的表格
        	$("#div_date").empty();
        	//创建表格
        	var $tab=$("<table id='tab_date'></table>");
        	//创建第一行
        	var $tr1=$("<tr><th colspan='7'></th></tr>");
        	$tr1.children("th:first").append("<input type='button' value='<<' οnclick='changeYear(-1)'/>&nbsp;");
        	$tr1.children("th:first").append("<input type='button' value='<' οnclick='changeMonth(-1)'/>&nbsp;");
        	$tr1.children("th:first").append("<input type='text'  id='text_date'/>&nbsp;");
        	$tr1.children("th:first").append("<input type='button' value='>' οnclick='changeMonth(1)'/>&nbsp;");
        	$tr1.children("th:first").append("<input type='button' value='>>' οnclick='changeYear(1)'/>");
        	
        
        	
        	//创建第二行
        	var weekStr="日一二三四五六";
        	var $tr2=$("<tr></tr>");
        	for (var i = 0; i < weekStr.length; i++) {
        		$tr2.append("<th>"+(weekStr.charAt(i))+"</th>");
			}
        	$tab.append($tr1); $tab.append($tr2);
        	
        	//创建其他行
        	var daysTotal=getMyDays();
        	//alert(daysTotal);
        	//alert(date.getFullYear()+"::::"+date.getMonth()+1);
        	var n=0;
        	for(var i=1;true;i++){
        		//创建行
        		var $tr=$("<tr></tr>");
        		//tr中创建列
        		for(var j=0;j<=6;j++){
        			var $td=$("<td></td>");
        			if((n==0&&i==1&&j==getFirstDayWeek())||(n!=0)){
        				n++;
        			}
        			if(n!=0&&n<=daysTotal){
        				$td.text(n);
        			}
        			$tr.append($td);
        			//判断当前td的文本内容是不是当前时间
        			if(n==date.getDate()){
        				checkTd=$td[0];
        				$td.css("background-color","#aaaaaa");
        			}
        		}
        		$tab.append($tr);
        		if(n>=daysTotal){
        			break;
        		}
        	}
        	$("#div_date").append($tab);
        	
        	
        	//text_date不能输入
        	$("#text_date").attr("disabled","disabled");
        	//在text_date中显示年月
        	$("#text_date").css({"width":"100px","text-align":"center"});
        	$("#text_date").val(year+"年"+month+"月");
        	
        	//给所有的代文本的特点注册鼠标移入和移除事件
        	$("#tab_date tr:gt(1) td:parent").hover(function(){
        		$(this).css("background-color","#cc6699");
        	},function(){
        		if(this==checkTd){
        			$(this).css("background-color","#aaaaaa");
        		}else{
        			$(this).css("background-color","#ffffff");
        		}
        	});
        	
        	//给所有有文本的td添加点击事件
        	$("#tab_date tr:gt(1) td:parent").bind("click",function(){
        		  //当前td被点击
        		  checkTd=this;
        		  //全部td回复成原来的颜色
      		      $("#tab_date tr:gt(1) td:parent").css("background-color","#ffffff");
        		  //当前td更改背景颜色
        		  $(this).css("background-color","#aaaaaa");
        		  //更改时间
        		  date.setDate($(this).text());
        		  //把年月日写入input_date中
        		  $("#input_date").val(year+"年"+month+"月"+date.getDate()+"日");
        	});
        	
        	//文档打开 文本框中默认显示当前时间  并且当前时间对应的td默认被选中
        	$("#input_date").val(year+"年"+month+"月"+date.getDate()+"日");
        	
        }
        // 根据年月 判断天数
        function getMyDays(){
        	switch(month){
        	case 4:
        	case 6:
        	case 9:
        	case 11:
        		 return 30;
        	case 2:
        		 return ((year%400==0)||(year%4==0&&year%100!=0))?29:28;
            default:
            	 return 31;
        	}
        }
        
        //根据年月日 判断指定年月的1号是星期几
        function getFirstDayWeek(){
        	var dateFirst=new Date(year,month-1,1);
        	return dateFirst.getDay();//0-6对应日-六
        }
     </script>
</body>
</html>

5 扫雷

5.1 扫雷规则

展示信息：总雷数 剩余雷数(总雷数-插旗数) 用时
规格：难度增加=雷数增加+类概率增加： 10%  15% 20%
状态：被点击(触雷+周围0雷+周围n雷+插旗)+未点击
规则：点击到雷 结束
     点击到周围n雷的 显示n即可
     点击到周围0雷的 周围的全展示----

5.2 扫雷代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery练习03扫雷</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<style type="text/css">
    #div_0{
       border:1px solid blue;
       margin:10px auto;
       padding:10px;
       width:520px;
       height:560px;
       text-align: center;
    }
    table{
       width:500px;
       margin:10px auto;
       border:1px solid blue;
       border-collapse: collapse;
    }
     #tab_lei{
       height:500px;
    }
    td{
       width:45px;
       height:45px;
       background-color: #aaaaaa;
       background-repeat: none;
       background-position: center;
    }
    td,th{
       border:3px double #cccccc;
       text-align: center;
    }
    span{
      font-weight: bold;
      color:red;
    }
    .cla{
       background-color: #ffffff;
    }
    
</style>
</head>
<body>
     <div id="div_0">
        <table id="tab_num">
            <tr>
               <th>总数：<span id="span_total"></span></th>
               <th>剩余：<span id="span_sheng_yu"></span></th>
               <th>时间：<span id="span_time"></span></th>
            </tr>
        </table>
        <table id="tab_lei"></table>
     </div>
     <script type="text/javascript">
        $(function(){
        	createTable(10,10,10);
        	setSpan();
        });
        //定义全家变量记录id
        var setTimeSpanId;
        //定义数组装是类的tr
        var collLei=[];
        //定义一个二维数组 装所有的td
        var collTd=[];
        //写一个方法 给span赋值
        function setSpan(){
        	//设置span_total
        	$("#span_total").text("10");
        	//设置span_sheng_yu
        	$("#span_sheng_yu").text("10");
        	//"span_time"每1秒钟+1
        	$("#span_time").text("0");
        	setTimeSpanId=window.setInterval("$('#span_time').text(parseInt($('#span_time').text())+1)",1000);
        }
        //类表格创建tr
        function createTable(hang,lie,num){
        	for(var i=0;i<hang;i++){
        		var $tr=$("<tr></tr>");//创建行
        		for(var j=0;j<lie;j++){
        			var $td=$("<td></td>");//创建单元格
        			$tr.append($td);
        		}
        		collTd.push($tr[0].cells);
        		$("#tab_lei").append($tr);
        		
        	}
        	//随机num个雷
        	//alert($("#tab_lei")[0].rows[0].cells.length);
        	for(var n=0;n<num;){
        		var hangNum=parseInt(Math.random()*hang);
        		var lieNum=parseInt(Math.random()*lie);
        		var $td=$("#tab_lei tr:eq("+hangNum+") td:eq("+lieNum+")");
        		//先判断$td是否已经在collLei中
        		if(!arrContains(collLei,$td[0])){
        			collLei.push($td[0]);
        			$td.text("雷");
        			n++;
        		}
        	}
        	
        	//给所有的td添加点击事件
        	$("#tab_lei td").bind("click",function(){
        		//判断当前td是不是雷
        		if(arrContains(collLei,this)){
        			alert("触雷了！！！游戏结束！");
        			$(this).css("background-image","url('01.png')");
        			window.clearInterval(setTimeSpanId);
        			$("#tab_lei td").unbind();
        			return;
        		}
        		//显示周围的雷数
        		showNum(this);
        	});
        	
        	//给所有的按钮添加点击右键的事件  插旗
        	$("#tab_lei td").bind("mousedown",function(e){
        		//alert(e.button);//2为右键 0 为左键 1 为滚动轴
        		if(e.button==2){
        			if(parseInt($("#span_sheng_yu").text())<=0){
        				alert("旗子的数量大于雷数了！！！！");
        				return;
        			}
        			if($(this).css("background-image")=="none"){
        				$(this).css("background-image","url('02.png')");
            			//设置span_sheng_yu
                    	$("#span_sheng_yu").text(parseInt($("#span_sheng_yu").text())-1);
        			}else{
        				$(this).css("background-image","none");
            			//设置span_sheng_yu
                    	$("#span_sheng_yu").text(parseInt($("#span_sheng_yu").text())+1);
        			}
        		}
        	});
        }
        //写一个方法显示当前单元格的雷数
        function showNum(td){
        	//alert($(td).css("background-color"));
        	//判断当前td是不是已经是展开的
        	if($(td).attr("class")){
        		return;
        	}
        	//获取当前单元格所有的朋友
    		var collFriends=getFriends(td);
    		//判断朋友的雷到个数
    		var count=0;
    		for(var i=0;i<collFriends.length;i++){
    			count+=arrContains(collLei,collFriends[i])?1:0;
    		}
    		$(td).addClass("cla");
    		if(count!=0){
    			$(td).text(count);
    		}
    		$(td).unbind();
    		//判断count是不是0
    		if(count==0){
    			//对所有的朋友展示
    			for(var i=0;i<collFriends.length;i++){
    				showNum(collFriends[i]);
    			}
    		}
    		
        }
        //写一个方法判断 参数数组 是否包含参数元素
        function arrContains(arr,td){
        	for(var i=0;i<arr.length;i++){
        		if(arr[i]==td){
        			return true;
        		}
        	}
        	return false;
        }
        //写一个方法 计算参数td的周围的td
        function getFriends(td){
        	var i,j;
        	//获取参数td在collTd中的下标
        	//alert(collTd.length+"::"+collTd[1].length);
        	for(var ki=0;ki<collTd.length;ki++){
        		for(var kj=0;kj<collTd[ki].length;kj++){
        			if(collTd[ki][kj]==td){
        				i=ki;j=kj;
        			}
        		}
        	}
        	var collFriends=[];
        	for(var ii=i-1;ii<=i+1;ii++){
        		for(var jj=j-1;jj<=j+1;jj++){
        			if(collTd[ii]&&collTd[ii][jj]){
        				if(!(ii==i&&jj==j)){
        					collFriends.push(collTd[ii][jj]);
        				}
        			}
        		}
        	}
        	return collFriends;
        }
     </script>
</body>
</html>

Ayui.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
14_jquery练习

1购物车<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jquery练习01购物车</title><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script><style type="te
复制链接

扫一扫

专栏目录