深圳傲冠在线笔试小结
刚刚做完深圳奥冠软件的在线笔试题， 由于是在实习公司上班做其他公司的笔试题，心里总有点放不开，生怕被抓住，好吧，结果做得确实不好~ : (
其实题目都很简单，基本上都做过，只是隔得太久远都生疏了， 看来我很有必要花点时间把这些都来个“温故而知新”。好吧，就废话这么多吧， 来看看题目：
1.请实现一个效果， 如下图所示：
点击“start”按钮时，红色的小方块，做匀减速运动，知道速度为0的时候停下来。 这里需要考虑初始速度和加速度的可能取值，我理解的题意是初始速度v0>0，还有一个为负的加速度a。当然，如果要想物理学里面那样把速度、加速度考虑成一个矢量的话那就更复杂一点了。
下面是我对这个题的code:
<!DOCTYPE html>
<html>
<head>
<title>DIV</title>
<meta charset="utf-8">
<style type="text/css">
#box1{
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: red;
}
#btn1{
position: absolute;
top:120px;
left:0;
}
</style>
<script>
/*
@iSpeed:当前速度
@a: 加速度
*/
var oBtn1 = document.getElementById("btn1");
var iSpeed = 35.33;
var a = -2.222;
function startMove(){
var oBox1 = document.getElementById("box1");
var time = setInterval(function(){
iSpeed = iSpeed>0? Math.ceil(iSpeed): Math.floor(iSpeed);
iSpeed+=a;
if(iSpeed <= 0){
clearInterval(time);
}
else{
oBox1.style.left = oBox1.offsetLeft + iSpeed + 'px';
}
}, 30);
}
</script>
</head>
<body>
<div id="box1">
</div>
<input id="btn1" type="button" value="start" onclick = "startMove()">
</body>
</html>
上面的iSpeed表示速度，a很显然就是加速度了。。 点击"start"按钮后每隔30微妙我调用一次function，直到速度小于等于零的时候才关闭定时器。在这个函数当中，微妙首先对这个速度进行一个取整，因为后面我的要在偏移量oBox1.offsetLeft的基础上加上这个速度的大小，这个大小当然要是一个整数，难道你见过半个像素的偏移么？:-)
2.一个文本输入框输入一条字符串，验证这个字符串是否是一个合法的邮箱地址，如果是，把旁边的一个div编程可拖动的！
这个题目我自己理解错了，以为可以用HTML5的拖放属性，不用去管兼容性，但是我错了。 当我做完事，监考老师告诉我：“同学，你想得太简单了” : ( -【尴尬】，下面这是我做了兼容性之后的代码：
<!DOCTYPE html>
<html>
<head>
<title>DIV</title>
<meta charset="utf-8">
<style type="text/css">
#box1{
position: absolute;
top: 50px;
left: 100px;
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script>
function allowDrag(oDiv){
oDiv.onmousedown = function(ev){
var oEvent = ev||event;
var disX = oEvent.clientX - oDiv.offsetLeft;
var disY = oEvent.clientY - oDiv.offsetTop;
document.onmousemove = function(ev){
var oEvent = ev||event;
oDiv.style.left = oEvent.clientX - disX + 'px';
oDiv.style.top = oEvent.clientY - disY + 'px';
};
document.onmouseup = function(ev){
document.onmousemove = null;
document.onmouseup = null;
}
}
}
function check(str){
var oRule = /^[a-zA-Z0-9]+@(([a-zA-Z0-9]+)[.])+[a-z]{2,4}$/i;
return oRule.test(str);
}
window.onload = function(){
var oEmail = document.getElementById("email");
var oBox1 = document.getElementById("box1");
oEmail.onblur = function(){
var string = oEmail.value;
if(check(string)){
allowDrag(oBox1);
}
}
}
</script>
</head>
<body>
<input id="email" type="text">
<div id="box1"></div>
</body>
</html>
逻辑非常简单，首先用正则来验证邮箱（这里验证邮箱我没有考虑下划线，后来想想这个东西还是加上去比较靠谱，要是你的BOSS讨厌那些不支持下划线邮箱你就惨了），如果验证通过，那么调用allowDrag函数，通过mousedown里面嵌入mousemove,mouseup来实现拖放效果。 这里的clientX,clientY还有offsetLeft, offsetTop你可要搞懂是嘛意思，别说你不知道。
3.用HTML5 canvas实现一个小画板
OMG~ 玩过一点HTML5的同学我相信你们都实现过这个吧！
<!DOCTYPE html>
<html>
<head>
<title>DIV</title>
<meta charset="utf-8">
<style type="text/css">
body{ background : gray;}
#c1{background: white;}
</style>
<script>
window.onload = function(){
var oC = document.getElementById("c1");
var oGC = oC.getContext('2d');
oC.onmousedown = function(ev){
var ev = ev || window.event;
oGC.moveTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);
document.onmousemove = function(ev){
var ev = ev || window.event;
oGC.lineTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);
oGC.stroke();
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
};
}
</script>
</head>
<body>
<canvas id="c1" width="400" height = "400">
</canvas>
</body>
</html>
在第二题的基础上，只要你懂moveTo, lineTo和stroke这几个方法你就可以把它拿下了， 是不是很简单呢？
好吧，最后来一个总结。 傲冠是个好公司，服务态度很不错，做完笔试还悉心的指出你存在的问题，给我的感觉是这个公司的人都很棒，公司应该很有活力！ 算了， 不说多了， 估计我是没戏了... 没有好好准备下今天的笔试挺后悔的，斌哥，谢谢你！
