腾讯《前端突击队》第二季（攻略）

发现这个玩意是偶然的一次使用 web QQ的时候打开控制台发现了这个http://codestar.alloyteam.com/,就玩通了第一季。这不第二季又开始了。

题目范围挺广的，很多都不知道，不过不知道不要紧，可以上网查资料就行。花了一些时间，在一些难点上卡了一段时间，不过还是搞定了。唯独“腐蚀的画”那道始终找不到头绪，根据题目的解释就是找不到相应的字符，看来还另有蹊跷，请大侠赐教！

// start

以下哪个js库是国产的？(D) // 因为没听说过。哈哈

A. jQuery
B. MochiKit
C. MooTools
D. JX

在js数字类型中浮点数的最高精度多少位小数？(C) // 自行搜索

A. 15
B. 16
C. 17
D. 18

下面关于进程跟线程的描述哪个正确？ (C)

A. 一个线程只有一个进程
B. 一个进程只有一个线程
C. 一个进程可以有多个线程
D. 一个线程可以有多个进程

在IOS中大于(不等于)哪个系统版本开始支持position:fixed？(C) //搜索得到

A. 3.2
B. 4.2
C. 4.3
D. 5.0

[]==[] 返回什么？ (B) //控制台一试就知道了

A. true
B. false
C. error
D. 0

在正则表达式中，负向先行断言是？(B) //自行搜索 “正则 负向先行断言”

A. !?)
B. (?!
C. =?)
D. (?=

以下哪个css属性可能会引起移动端（如IOS7等）多行省略号( 利用text-overflow: ellipsis)的样式变异？(D) //自行搜索

A. box-sizing: border-box;
B. word-break: break-all;
C. box-shadow: 1px 0 #fff;
D. text-align:justify;
E. transform: translate3d(0, 0, 0);

Node.js的适用场景是？(B) //呵呵，不会Node.js ,道听途说，瞎蒙的

A. 大循环、聊天、大数据
B. 高并发、聊天、实时推送
C. 高并发、聊天、大数据
D. 实时推送、多进程、大数据

//送分题，用过 jQuery 或者 其他 js 库的 CDN 的都知道。

下列哪个移动端属性可以禁止用户选中文字 (B) //没接触过移动开发，通过搜索

A. -webkit-touch-callout:none
B. -webkit-user-select: none
C. -webkit-text-size-adjust: none
D. -webkit-transform: rotateX(100deg)
E. -webkit-appearance: none

~~520.1314等于什么？(B) //通过控制台

A. -520.1314
B. 520
C. 0.1314
D. 520.1314

以下那个缓存控制方法不会与server校验新鲜度? (C) // http协议里面的

A. Cache-Control: max-age=0
B. Cache-Control: no-cache
C. Cache-Control: no-store
D. Cache-Control: must-revalidate

请填入正确的CSS使子元素2宽度自适应填满整行，父元素及子元素1宽度不确定 // 这个难倒我了，父元素和其中一个子元素的宽度都不确定，css的元素定位和文本流本就是难点不好理解，特别还是这种位置不固定的流体布局。不过最后还是找到了 css3的新属性 flex搞定了。 使用 CSS 弹性盒 CSS box-flex属性，弹性盒子模型简介

.parent{
    display: flex;
}
.child1{
    flex: 1;
}
.child2{
    flex: 1;
}

下面代码，若在同步执行的情况下，得到的结果是? (D) //同步执行！？不太清楚

var countLen = 4;
while(countLen--){
    (function(i){
        setTimeout(function(){
            alert(i);
        },0);
    })(countLen);
    alert(countLen);
}

A. 32103201
B. 32102103
C. 32100123
D. 32103210
E. 32101023

从性能上看，以下哪个效率最低? （D）

A. 使用常量
B. 使用变量
C. 访问数组元素
D. 访问对象属性

//完成上面的题，就可以进入新的地图了！

请补全代码使得输入框在iPhone浏览器上能够呼起图示的键盘

Text: <input type="text" /> <!-- display a standard keyboard -->
Telephone: <input type="tel" /> <!-- display a telephone keypad -->
URL: <input type="url" /> <!-- display a URL keyboard -->
Email: <input type="email" /> <!-- display an email keyboard -->
Zip Code: <input type="text" pattern="[0-9]*" /> <!-- display a numeric keyboard -->

请填入正确的CSS使容器相对父元素垂直水平居中定位(父容器及子元素大小不确定) // 我想很多人都遇到过这种问题，这种应该是是最基础的视觉效果在css中的实现却是这么的麻烦。唉！

.child{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
} 

吃了太多啤酒与炸鸡，产品MM肚子疼得不行，需求根本交不了差，怎么办？来自星星的前端特工，你，只能尝试用超能力停止时间了！据说，当创造出的时间等于地球时间时，就会代替地球时间流逝，使时间静止…

//好像在腾讯前端特工第一季就有这么一道题，我还记得。我折腾了半天，还以为要发送数据到服务器上，哪知道，创建一个提交按钮，手点更新时间就可以了！！！

    <input id="power" type="text" placeholder="超能力创造的时间" value="0:0:0">
    <input type="submit" value="提交" onclick="document.getElementById('power').value = (new Date()).getHours()+':'+(new Date()).getMinutes()+':'+(new Date()).getSeconds()">

请完成如下所示 loading效果: 请在下面空格处补齐代码:输入必要的css: //其实很简单，但是只有当你填进正确的数据才会有动画，坑爹！

.container,#content,.ring{
    border-radius: 75px;
}
#cspan {
    -webkit-animation: fade 1s linear infinite;
}
@-webkit-keyframes fade {
    from {
        opacity: 0;  
    } 50% {
        opacity: 1;  
    } to {
        opacity: 0;
    }
}
.ring {
    -webkit-animation: rotate 1s linear infinite;
}
@-webkit-keyframes rotate {
    0 {
        transform: rotate(0deg);
    } 100% {
        transform: rotate(360deg);
    }
}

// 进入最后的地图了！！

下面是在Android 4.0+设备上Wi-fi网络下以”Transfer-Encoding:chunked”方式返回的页面HTML5 Navigation timing 上报数据图，我们修改了其中一项数据的延时，试找出这项被修改的非正常数据：
测速点上报量延时慢速用户占比 ( M ) // 这个真的是蒙的。

火柴人动画

// 看源码，知道了这么创建动作，根据其他模板套用即可，同步的问题，找到动画对象的同步方法调用即可。可能难住人的是提交答案的方式。我是直接安装源码中的 submit()提交方式提交的。

var answers = {
    naughty1: "naughty1.playTo('gaocha',30,15,true).setPos(880,300).synchto(referObj);",
    naughty2: "naughty2.playTo('gaocha',30,15,true).setPos(80,540).setReverse(false).synchto(referObj)",
    naughty3: "naughty3.playTo('gaocha',30,15,true).setPos(240,540).synchto(referObj)"
}
window.parent.postMessage({
    type : 'checkAnswer',
    data : {answer:answers}
}, '*');

腐蚀的画

// 难点在于，第二步，对rgb的四个信息，想办法让它变成0和1。如果你直接将数值转化为二进制，那么你就将陷进沼泽中。你需要反相的去思考出题人是如何将信息藏到那张图中间去的。最后经人点拨，是使用了图像处理最常见二值化方法，这样答案就一目了然了。

var c = document.getElementById('myCanvas'),
    img = document.getElementById('myImg');
var ctx = c.getContext('2d');
ctx.drawImage(img,0,0);
var imgData = ctx.getImageData(0,0,c.width,c.height);
var data = imgData.data;
var rgb = [];
for(var i=0;i<data.byteLength;i++){
    if((i+1)%4!=0){
        var b = data[i];
        b>127?b=1:b=0;
        rgb.push(b);        
    }
}
var rgbs = rgb.join('')
var str = rgbs.match(/[01]{8}/g)
.map(function(b) { return String.fromCharCode( parseInt(b,2) ) })
.join('');
var end = str.search(/AlloyImage/);
var ascii = str.slice(0,end);
var base64 = btoa(ascii);
var base64img = document.getElementById("base64");
base64img.src = "data:image/png;base64,"+base64;