每日一题:一题比较刁的面试题来源: 发布时间:星期六, 2010年1月9日 浏览:0次 评论:0
昨天晚上看到群里在聊面试题
 回想最近几个月 面试经历很是感慨 10月底从昆山回到苏州 直到11月底才找到工作跑到哪都是有没有工作经验没有好吧回去等通知吧2009年11月19日来到苏州热线面试(苏州比较大 门户网站WebSite)面试结束后带回去了  个题、要求: 1.任何语言 任何形式(web,winform,flash,flex,silverlight)等等 2.实现内容 a.  化个面板面板内随机分布着些按钮 按钮上有些随机数字b.有 个按钮 名字叫“新增节点” 点击 该按钮后 可以向面板内随机添加新 按钮c.任意顺序点击面板内 按钮按顺序将所点按钮用线条连接并且将按钮 数值进行累加 显示到 文本框d.回放 功能 有个名叫 “回放按钮” 点击该按钮后 将所有操作慢动作回放包括增加节点 和 连接 切操作完整再现这题拿回家做了3个班小时 水平不行啊花了很长时间在想用什么技术好结果用了 JavaScript (jQuery)在中间遇到了 些难点1.画线问题 开始想到是 vml 但是由于浏览器兼容问题最后在网上找啊找使用了别人写 个 用JavaScript 画线 主要思路是 利用 3角 画出该线每个像素点(非常占资源)2.记录和回放问题 如何记录下每个操作并回放这个问题也想了很久 记录:最后是这样 在全局存放个对象该对象是个 button dom 用来保存上次点击按钮对象当点击 个按钮时首先将该按钮存放到个再将判断上次是否存在点击如果存在则将这两个按钮连接当添加按钮时 首先将随机产生 按钮添加至 回放:当点击回放时 首先是要 化板面中按钮和线条等 策略是:线条全部删除中途添加按钮 全部隐藏回放 过程实际是 个 遍历过程判断 状态当Button 为显示时 Button click 思路方法否则 将Button设置为可见这就是基本思路 贴出我 实现代码Test.js /** * @author 汤晓华 * * @copyright 2009 汤晓华 * * */ /*** * 用于绘制线条 * @param {Object} x1 第 点X坐标
* @param {Object} y1 第点Y坐标
* @param {Object} x2 第 2点X坐标
* @param {Object} y2 第 2点Y坐标
* @param {Object} color 颜色
*/
function line(x1, y1, x2, y2, color){
var html = "";
var tmp
 (x1 >= x2) {
tmp = x1;
x1 = x2;
x2 = tmp;
tmp = y1;
y1 = y2;
y2 = tmp;
}
for (var i = x1; i <= x2; i ) {
x = i;
y = (y2 - y1) / (x2 - x1) * (x - x1) + y1;
html  " <img border='1'  ='line' style='border-color: "+color+";position:absolute;left:" + (x + 20) + "px;top:" + (y + 20) + "px;background-color:" + color + "' width=1 height=1>";
}
 html;
}
/**
* 全局变量
*/
//容器对象
var container = null;
//被点击过按钮
var clickedBtn = null;
//化按钮数量
var InitBtnNum = 5;
//按钮最大ID
var maxId = InitBtnNum;
//存放依次点击按钮IdArray对象
var BtnArray =  Array ;
//是否在回放
var IsPlayBack = false;
/**
* 产生随机数
* @param {Object} min
* @param {Object} max
*/
var random = function(min, max){
max = max  null ? 50 : max;
min = min null ? 1 : min;
Math.floor(Math.random * max + min);
}
/**
* 化容器中按钮
*/
function InitButton{
for (var i = 0; i < InitBtnNum; i) {
CreateBtn(i);
}
}
/**
* 创建按钮
* @param {Object} id
*/
function CreateBtn(id){
var value = random;
var top = random(60, 400);
var left = random(60, 700);
var button = "<button id=\"btn" + id + "\" isClick=\"false\" =\"btn\" _disibledevent=>
index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; char  =utf-8" />
<title>面试题</title>
<script type="text/javascript" src="lib/jquery/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" src="lib/Test.js">
</script>
<style type="text/css">
div#container {
width: 800px;
height: 500px;
border: 1px red solid
}
button.btn {
position: absolute;
BACKGROUND: #ff8901;
PADDING-BOTTOM: 0px;
CURSOR: po er;
COLOR: #fff;
BORDER-TOP-STYLE: none;
LINE-HEIGHT: 20px;
PADDING-TOP: 0px;
BORDER-RIGHT-STYLE: none;
BORDER-LEFT-STYLE: none;
LETTER-SPACING: 1px;
BORDER-BOTTOM-STYLE: none;
width: 30px;
height: 20px;
}
button.btn1 {
position: relative;
BACKGROUND: #ff8901;
PADDING-BOTTOM: 0px;
CURSOR: poer;
COLOR: #fff;
BORDER-TOP-STYLE: none;
LINE-HEIGHT: 20px;
PADDING-TOP: 0px;
BORDER-RIGHT-STYLE: none;
BORDER-LEFT-STYLE: none;
LETTER-SPACING: 1px;
BORDER-BOTTOM-STYLE: none;
width: 80px;
height: 24px;
}
</style>
</head>
<body>
<div>
累加结果:<input type="text" readonly="true" id="countResult" style="width:70px" value="0" />
<button id="AddButton" ="btn1">
增加节点
</button>
<button id="Playback" ="btn1">
回 放
</button>
</div>
<div id="container">
</div>
</body>
</html>
效果图   点击下载源代码 0
相关文章读者评论发表评论 |
|
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
