某公司测评编程题：简单网页点阵液晶屏
2013-10-10 17:39 杨泽川 阅读(479) 评论(0) 编辑 收藏 举报某公司测评编程题：简单网页点阵液晶屏
翻滚的字母
实现一个简单的网页点阵液晶屏，液晶屏上有2个字母：DP
第一问：写出你觉得最合适的html结构及对应的CSS。
第二问：请用JavaScript实现如下效果：每隔一秒交换2个字母的位置。
第三问：请用JavaScript实现如下效果：字母DP一起向左不停滚动，循环显示这2个字母
可以使用jQuery等任何前端框架，为节省时间，推荐采用：http://jsfiddle.net直接进行编码和调试。
此题一开始看，就想到用8*16个div元素来实现方块。定义一个css样式类为black，把字母所经过的方块添加black类。
因此，设计html结构如下：
<div>
<divclass="row1 row">
<divclass="col1"></div>
<divclass="col2"></div>
<divclass="col3"></div>
<divclass="col4"></div>
<divclass="col5"></div>
<divclass="col6"></div>
<divclass="col7"></div>
<divclass="col8"></div>
<divclass="col9"></div>
<divclass="col10"></div>
<divclass="col11"></div>
<divclass="col12"></div>
<divclass="col13"></div>
<divclass="col14"></div>
<divclass="col15"></div>
<divclass="col16"></div>
</div>
<divclass="row2 row">
<divclass="col1"></div>
<divclass="col2"></div>
<divclass="col3"></div>
<divclass="col4"></div>
<divclass="col5"></div>
<divclass="col6"></div>
<divclass="col7"></div>
<divclass="col8"></div>
<divclass="col9"></div>
<divclass="col10"></div>
<divclass="col11"></div>
<divclass="col12"></div>
<divclass="col13"></div>
<divclass="col14"></div>
<divclass="col15"></div>
<divclass="col16"></div>
</div>
<divclass="row3 row">
<divclass="col1"></div>
<divclass="col2"></div>
<divclass="col3"></div>
<divclass="col4"></div>
<divclass="col5"></div>
<divclass="col6"></div>
<divclass="col7"></div>
<divclass="col8"></div>
<divclass="col9"></div>
<divclass="col10"></div>
<divclass="col11"></div>
<divclass="col12"></div>
<divclass="col13"></div>
<divclass="col14"></div>
<divclass="col15"></div>
<divclass="col16"></div>
</div>
<divclass="row4 row">
<divclass="col1"></div>
<divclass="col2"></div>
<divclass="col3"></div>
<divclass="col4"></div>
<divclass="col5"></div>
<divclass="col6"></div>
<divclass="col7"></div>
<divclass="col8"></div>
<divclass="col9"></div>
<divclass="col10"></div>
<divclass="col11"></div>
<divclass="col12"></div>
<divclass="col13"></div>
<divclass="col14"></div>
<divclass="col15"></div>
<divclass="col16"></div>
</div>
<divclass="row5 row">
<divclass="col1"></div>
<divclass="col2"></div>
<divclass="col3"></div>
<divclass="col4"></div>
<divclass="col5"></div>
<divclass="col6"></div>
<divclass="col7"></div>
<divclass="col8"></div>
<divclass="col9"></div>
<divclass="col10"></div>
<divclass="col11"></div>
<divclass="col12"></div>
<divclass="col13"></div>
<divclass="col14"></div>
<divclass="col15"></div>
<divclass="col16"></div>
</div>
<divclass="row6 row">
<divclass="col1"></div>
<divclass="col2"></div>
<divclass="col3"></div>
<divclass="col4"></div>
<divclass="col5"></div>
<divclass="col6"></div>
<divclass="col7"></div>
<divclass="col8"></div>
<divclass="col9"></div>
<divclass="col10"></div>
<divclass="col11"></div>
<divclass="col12"></div>
<divclass="col13"></div>
<divclass="col14"></div>
<divclass="col15"></div>
<divclass="col16"></div>
</div>
<divclass="row7 row">
<divclass="col1"></div>
<divclass="col2"></div>
<divclass="col3"></div>
<divclass="col4"></div>
<divclass="col5"></div>
<divclass="col6"></div>
<divclass="col7"></div>
<divclass="col8"></div>
<divclass="col9"></div>
<divclass="col10"></div>
<divclass="col11"></div>
<divclass="col12"></div>
<divclass="col13"></div>
<divclass="col14"></div>
<divclass="col15"></div>
<divclass="col16"></div>
</div>
<divclass="row8 row">
<divclass="col1"></div>
<divclass="col2"></div>
<divclass="col3"></div>
<divclass="col4"></div>
<divclass="col5"></div>
<divclass="col6"></div>
<divclass="col7"></div>
<divclass="col8"></div>
<divclass="col9"></div>
<divclass="col10"></div>
<divclass="col11"></div>
<divclass="col12"></div>
<divclass="col13"></div>
<divclass="col14"></div>
<divclass="col15"></div>
<divclass="col16"></div>
</div>
</div>
给每一行定义为rowN 类，每一列定义为colN类，到时候根据所创建的js二维数组，即可对每个正方形元素进行控制。
CSS样式如下：
<styletype="text/css">
div > div > div {
width:30px;
height:30px;
float:left;
border:1px gray solid;
}
body > div{
width:520px;
}
.black{
background:black;
}
</style>
由于用到了jquery函数，所以要引用jquery：
<scriptsrc="jquery.js"></script>
接下来定义两个数组：d和p，里面存有字母d和p所对应的二维坐标
如下：
var d=[[1,2],[1,3],[1,4],[1,5],[2,2],[2,6],[3,2],[3,7],[4,2],[4,7],[5,2],[5,7],[6,2],[6,7],[7,2],[7,6],[8,2],[8,3],[8,4],[8,5]];
var p=[[1,10],[1,11],[1,12],[1,13],[1,14],[1,15],[2,10],[2,15],[3,10],[3,15],[4,10],[4,11],[4,12],[4,13],[4,14],[4,15],[5,10],[6,10],[7,10],[8,10]];
然后写一个初始化函数init()，对这两个数组进行遍历，存在二维坐标的元素添加black类。
代码如下：
function init(){
for(i=0;i<d.length;i++)
{
var t=".row"+d[i][0]+"> .col"+d[i][1];
$(t).addClass("black");
}
for(i=0;i<p.length;i++)
{
var t=".row"+p[i][0]+"> .col"+p[i][1];
$(t).addClass("black");
}
}
至此，完成了一开始的页面展现。
现在来实现文字交换的效果。
由于是点阵屏幕，每个字母占据8*8点阵，所以只要将第一个字母中黑点的坐标+8，第二个字母中黑点的坐标-8，即可实现字母位置交换。
对数组进行整体操作，我们可以使用js的map函数进行操作，首先对坐标判断，若大于8，则减8，小于8，则加8，并返回新数组：
function fe(s){
switch(s[1]>8){
casetrue :
s[1]=s[1]-8;
break;
casefalse :
s[1]=s[1]+8;
break;
}
return Array(s[0],s[1]);
}
要注意的是，交换的步骤是：黑点清空——>交换位置——>涂黑。
代码如下：
清空代码：
function erase(){
for(i=0;i<d.length;i++)
{
var t=".row"+d[i][0]+"> .col"+d[i][1];
$(t).removeClass("black");
}
for(i=0;i<p.length;i++)
{
var t=".row"+p[i][0]+"> .col"+p[i][1];
$(t).removeClass("black");
}
}
交换代码：
function exchange(){
erase();
p=p.map(fe);
d=d.map(fe);
init();
}
对于实现移动的代码，也是一样，对列坐标进行-1（左移），也是通过js的map函数执行以下代码：
function fm(s){
--s[1];
if(s[1]<1)
s[1]=16;
return Array(s[0],s[1]);
}
移动步骤和交换步骤一样：
function exchange(){
erase();
p=p.map(fe);
d=d.map(fe);
init();
}
function moveInterval(f,t){
setInterval(f,t);
}
在html中添加两个按钮：
<inputtype="button"value="交换"onclick="exchange()"/>
<inputtype="button"value="移动"onclick="moveInterval(move,10)"/>
