2016年腾讯校招在线笔试UI开发总结

1.

当你在浏览器地址栏输入一个URL后回车,将会发生的事情?

http://www.360doc.com/content/14/0917/10/10096004_410111504.shtml

HTML head 头标签

http://fex.baidu.com/blog/2014/10/html

http://caibaojian.com/mobile-meta.html

http://blog.jobbole.com/78592/

JS抛物线动画与购物车效果实例页面

http://www.zhangxinxu.com/study/201312/js-parabola-shopping.html

JS代码：

<span class="comment comment-multiline" style="color: rgb(204, 34, 34);"><span class="before" style="color: rgb(187, 170, 170);">/*</span> 本demo演示脚本基于ieBetter.js, 项目地址：<a target=_blank href="https://github.com/zhangxinxu/ieBetter.js" style="color: rgb(52, 83, 139); text-decoration: none;">https://github.com/zhangxinxu/ieBetter.js</a> <span class="after" style="color: rgb(187, 170, 170);">*/</span></span>

<span class="comment comment-line" style="color: rgb(153, 153, 153);"><span class="before" style="color: rgb(187, 170, 170);">//</span> 元素以及其他一些变量</span>
<span class="operand keyword" style="color: rgb(0, 0, 255);">var</span> <span class="operand">eleFlyElement</span> <span class="operator" style="color: rgb(0, 119, 119);">=</span> <span class="operand builtin" style="color: rgb(34, 34, 204);">document</span>.<span class="operand">querySelector</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>#flyItem<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="paren" style="color: rgb(0, 0, 153);">)</span><span class="comma">,</span> <span class="operand">eleShopCart</span> <span class="operator" style="color: rgb(0, 119, 119);">=</span> <span class="operand builtin" style="color: rgb(34, 34, 204);">document</span>.<span class="operand">querySelector</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>#shopCart<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="paren" style="color: rgb(0, 0, 153);">)</span>;
<span class="operand keyword" style="color: rgb(0, 0, 255);">var</span> <span class="operand">numberItem</span> <span class="operator" style="color: rgb(0, 119, 119);">=</span> <span class="operand">0</span>;
<span class="comment comment-line" style="color: rgb(153, 153, 153);"><span class="before" style="color: rgb(187, 170, 170);">//</span> 抛物线运动</span>
<span class="operand keyword" style="color: rgb(0, 0, 255);">var</span> <span class="operand">myParabola</span> <span class="operator" style="color: rgb(0, 119, 119);">=</span> <span class="operand">funParabola</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="operand">eleFlyElement</span><span class="comma">,</span> <span class="operand">eleShopCart</span><span class="comma">,</span> <span class="paren" style="color: rgb(0, 0, 153);">{</span>
    <span class="operand hashkey" style="color: rgb(170, 85, 17);">speed</span><span class="hasharrow" style="color: rgb(255, 0, 0);">:</span> <span class="operand">400</span><span class="comma">,</span>
    <span class="operand hashkey" style="color: rgb(170, 85, 17);">curvature</span><span class="hasharrow" style="color: rgb(255, 0, 0);">:</span> <span class="operand">0</span>.<span class="operand">002</span><span class="comma">,</span>    
    <span class="operand hashkey defun" style="color: rgb(170, 85, 17);">complete</span><span class="hasharrow" style="color: rgb(255, 0, 0);">:</span> <span class="operand keyword" style="color: rgb(0, 0, 255);">function</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="paren" style="color: rgb(0, 0, 153);">)</span> <span class="paren" style="color: rgb(0, 0, 153);">{</span>
        <span class="operand">eleFlyElement</span>.<span class="operand">style</span>.<span class="operand">visibility</span> <span class="operator" style="color: rgb(0, 119, 119);">=</span> <span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>hidden<span class="after" style="color: rgb(0, 68, 0);">"</span></span>;
        <span class="operand">eleShopCart</span>.<span class="operand">querySelector</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>span<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="paren" style="color: rgb(0, 0, 153);">)</span>.<span class="operand">innerHTML</span> <span class="operator" style="color: rgb(0, 119, 119);">=</span> <span class="operator" style="color: rgb(0, 119, 119);">++</span><span class="operand">numberItem</span>;
    <span class="paren" style="color: rgb(0, 0, 153);">}</span>
<span class="paren" style="color: rgb(0, 0, 153);">}</span><span class="paren" style="color: rgb(0, 0, 153);">)</span>;
<span class="comment comment-line" style="color: rgb(153, 153, 153);"><span class="before" style="color: rgb(187, 170, 170);">//</span> 绑定点击事件</span>
<span class="operand keyword" style="color: rgb(0, 0, 255);">if</span> <span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="operand">eleFlyElement</span> <span class="operator" style="color: rgb(0, 119, 119);">&&</span> <span class="operand">eleShopCart</span><span class="paren" style="color: rgb(0, 0, 153);">)</span> <span class="paren" style="color: rgb(0, 0, 153);">{</span>
    <span class="paren" style="color: rgb(0, 0, 153);">[</span><span class="paren" style="color: rgb(0, 0, 153);">]</span>.<span class="operand">slice</span>.<span class="operand">call</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="operand builtin" style="color: rgb(34, 34, 204);">document</span>.<span class="operand">getElementsByClassName</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>btnCart<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="paren" style="color: rgb(0, 0, 153);">)</span><span class="paren" style="color: rgb(0, 0, 153);">)</span>.<span class="operand">forEach</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="operand keyword" style="color: rgb(0, 0, 255);">function</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="operand">button</span><span class="paren" style="color: rgb(0, 0, 153);">)</span> <span class="paren" style="color: rgb(0, 0, 153);">{</span>
        <span class="operand">button</span>.<span class="operand">addEventListener</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>click<span class="after" style="color: rgb(0, 68, 0);">"</span></span><span class="comma">,</span> <span class="operand keyword" style="color: rgb(0, 0, 255);">function</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="paren" style="color: rgb(0, 0, 153);">)</span> <span class="paren" style="color: rgb(0, 0, 153);">{</span>
            <span class="comment comment-line" style="color: rgb(153, 153, 153);"><span class="before" style="color: rgb(187, 170, 170);">//</span> 滚动大小</span>
            <span class="operand keyword" style="color: rgb(0, 0, 255);">var</span> <span class="operand">scrollLeft</span> <span class="operator" style="color: rgb(0, 119, 119);">=</span> <span class="operand builtin" style="color: rgb(34, 34, 204);">document</span>.<span class="operand">documentElement</span>.<span class="operand">scrollLeft</span> <span class="operator" style="color: rgb(0, 119, 119);">||</span> <span class="operand builtin" style="color: rgb(34, 34, 204);">document</span>.<span class="operand">body</span>.<span class="operand">scrollLeft</span> <span class="operator" style="color: rgb(0, 119, 119);">||</span> <span class="operand">0</span><span class="comma">,</span>
                <span class="operand">scrollTop</span> <span class="operator" style="color: rgb(0, 119, 119);">=</span> <span class="operand builtin" style="color: rgb(34, 34, 204);">document</span>.<span class="operand">documentElement</span>.<span class="operand">scrollTop</span> <span class="operator" style="color: rgb(0, 119, 119);">||</span> <span class="operand builtin" style="color: rgb(34, 34, 204);">document</span>.<span class="operand">body</span>.<span class="operand">scrollTop</span> <span class="operator" style="color: rgb(0, 119, 119);">||</span> <span class="operand">0</span>;

            <span class="operand">eleFlyElement</span>.<span class="operand">style</span>.<span class="operand">left</span> <span class="operator" style="color: rgb(0, 119, 119);">=</span> <span class="operand">event</span>.<span class="operand">clientX</span> <span class="operator" style="color: rgb(0, 119, 119);">+</span> <span class="operand">scrollLeft</span> <span class="operator" style="color: rgb(0, 119, 119);">+</span> <span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>px<span class="after" style="color: rgb(0, 68, 0);">"</span></span>;
            <span class="operand">eleFlyElement</span>.<span class="operand">style</span>.<span class="operand">top</span> <span class="operator" style="color: rgb(0, 119, 119);">=</span> <span class="operand">event</span>.<span class="operand">clientY</span> <span class="operator" style="color: rgb(0, 119, 119);">+</span> <span class="operand">scrollTop</span> <span class="operator" style="color: rgb(0, 119, 119);">+</span> <span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>px<span class="after" style="color: rgb(0, 68, 0);">"</span></span>;
            <span class="operand">eleFlyElement</span>.<span class="operand">style</span>.<span class="operand">visibility</span> <span class="operator" style="color: rgb(0, 119, 119);">=</span> <span class="string" style="color: rgb(34, 136, 34);"><span class="before" style="color: rgb(0, 68, 0);">"</span>visible<span class="after" style="color: rgb(0, 68, 0);">"</span></span>;
            
            <span class="comment comment-line" style="color: rgb(153, 153, 153);"><span class="before" style="color: rgb(187, 170, 170);">//</span> 需要重定位</span>
            <span class="operand">myParabola</span>.<span class="operand">position</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="paren" style="color: rgb(0, 0, 153);">)</span>.<span class="operand">move</span><span class="paren" style="color: rgb(0, 0, 153);">(</span><span class="paren" style="color: rgb(0, 0, 153);">)</span>;  
        <span class="paren" style="color: rgb(0, 0, 153);">}</span><span class="paren" style="color: rgb(0, 0, 153);">)</span>;
    <span class="paren" style="color: rgb(0, 0, 153);">}</span><span class="paren" style="color: rgb(0, 0, 153);">)</span>;
<span class="paren" style="color: rgb(0, 0, 153);">}</span>

<span class="paren" style="color: rgb(0, 0, 153);"></span><h2 style="margin: 0px; padding: 6px 5px 7px 35px; font-size: 13.6pt; font-weight: normal; line-height: 22px; font-family: 'Microsoft YaHei', 微软雅黑, Verdana !important; background: url("/images/arrpwa.gif") no-repeat rgb(249, 217, 120);">JavaScript生成随机数并自动排序</h2>

http://www.codefans.net/jscss/code/1747.shtml

<title>JavaScript生成随机数并自动排序</title>
<script>
var baseNum=[];
for(var i= 0;i<100;i++){
    random = Math.floor(Math.random()*i);
    baseNum.push(random);
}
Array.prototype.cleanSort = function(){
var clean = [];
this.sort(function(a,b){return a-b;});
for(var i=0;i<this.length;i++){
if(this[i]==this[i+1]){
continue;
}else{
clean.push(this[i]);
}
}
return clean;
}
document.write(baseNum.cleanSort().join('<br/>'));
</script>