例题复习

代码如下：

Document

#table{

border:1pxsolid black;

table-layout: fixed;

}

td{

border:1pxsolid black;

padding:30px;

}

input[type=number] {

width:60px;

}

背景图套入栅格

载入带有若干小图的大背景图，改变栅格行列数，使得栅格可以完好切分各小图。

选择背景图：

栅格大小：行，列

单元格宽：, 高：

varimgWidth,imgHeight;

$(function(){

//$('#table')

//assertEqual(1, 2)

assertEqual(genTRTD(1,1),'',genTRTD(1,1));

assertEqual(genTRTD(2,2),'');

fillTable();

$('#tu').change(getPic);

$('#rows, #cols').change(fillTable);

});

functiongetPic(){

//取出 tu 中的 文件名，放入 table 中作背景

console.log('getPic')

varfileName=$('#tu').val();

fileName=fileName.slice(fileName.lastIndexOf('\\')+1);

varimg=newImage();//创建一个图对象

img.src=fileName;

img.onload=function() {

// 当 img.src 的图像文件调入后，执行这里

varw=img.width,h=img.height;

imgWidth=w;

imgHeight=h;

calcDim();

$('#table').css({

'background-image':'url('+fileName+')',

width:w,

height:h

});

}

}

functioncalcDim() {

if(!imgWidth) {

return;

}

varrows=$('#rows').val();

varcols=$('#cols').val();

$('#w').html(parseInt(imgWidth/cols) );

$('#h').html(parseInt(imgHeight/rows) );

}

functionfillTable() {

varrows=$('#rows').val();

varcols=$('#cols').val();

vartrtd=genTRTD(rows,cols);//'...'

$('#table').html(trtd);

calcDim();

}

functiongenTRTD(rows, cols) {

varbuf=[]

for(varr=;r

buf.push('');

for(varc=;c

buf.push('');

}

buf.push('')

}

returnbuf.join('');

}