2014阿里巴巴WEB前端实习生在线笔试题

最新推荐文章于 2024-08-08 15:32:29 发布

it_zujun

最新推荐文章于 2024-08-08 15:32:29 发布

阅读量1k

点赞数

分类专栏：编程文章标签：面试

编程专栏收录该内容

55 篇文章 0 订阅

订阅专栏

2014年3月31日晚，我怀着略微忐忑的心情（第一次在线笔试^_^!!）进行了笔试，阿里巴巴的笔试题共有10道，几乎包含了Web前端开发的各个方面，有程序题、有叙述题，时间非常紧张，只完成了大概6道题。下面把遇到的题目跟大家分享一下！

1、

<div class="dp-highlighter bg_html" style="font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 12px; background-color: rgb(231, 229, 220); width: 936.53125px; overflow: auto; padding-top: 1px; margin: 18px 0px !important;"><div class="bar" style="padding-left: 45px;"><div class="tools" style="padding: 3px 8px 10px 10px; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; background-color: rgb(248, 248, 248); border-left-width: 3px; border-left-style: solid; border-left-color: rgb(108, 226, 108);"><strong>[html]</strong> <a target=_blank href="http://blog.csdn.net/javascriptcoder/article/details/22910827#" class="ViewSource" title="view plain" style="color: rgb(160, 160, 160); text-decoration: none; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_plain.gif); background-color: inherit; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">view plain</a><a target=_blank href="http://blog.csdn.net/javascriptcoder/article/details/22910827#" class="CopyToClipboard" title="copy" style="color: rgb(160, 160, 160); text-decoration: none; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_copy.gif); background-color: inherit; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">copy</a><a target=_blank href="https://code.csdn.net/snippets/274217" target="_blank" title="在CODE上查看代码片" style="color: rgb(160, 160, 160); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; background-position: 0% 0%; background-repeat: no-repeat no-repeat;"><img src="https://code.csdn.net/assets/CODE_ico.png" width="12" height="12" alt="在CODE上查看代码片" style="border: none; max-width: 100%; position: relative; top: 1px; left: 2px;" /></a><a target=_blank href="https://code.csdn.net/snippets/274217/fork" target="_blank" title="派生到我的代码片" style="color: rgb(160, 160, 160); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; background-position: 0% 0%; background-repeat: no-repeat no-repeat;"><img src="https://code.csdn.net/assets/ico_fork.svg" width="12" height="12" alt="派生到我的代码片" style="border: none; max-width: 100%; position: relative; top: 2px; left: 2px;" /></a><div style="position: absolute; left: 438px; top: 546px; width: 18px; height: 18px; z-index: 99;"></div></div></div><ol start="1" class="dp-xml" style="padding: 0px; border: none; list-style-position: initial; list-style-image: initial; background-color: rgb(255, 255, 255); color: rgb(92, 92, 92); margin: 0px 0px 1px 45px !important;"><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"><!doctype html</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">html</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">      </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">    <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">head</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">        <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">style</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">type</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"text/css"</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">            div:not(.outer) p { color: purple; }   </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">            div.outer p { color: orange; }  </span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">        <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">style</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">    <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">head</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">  </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">    <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">body</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">        <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">div</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">class</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"outer"</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">            <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">p</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">                我是 outer 里面的字  </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">            <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">p</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">            <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">div</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="attribute" style="margin: 0px; padding: 0px; border: none; color: red; background-color: inherit;">class</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">=</span><span class="attribute-value" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"inner"</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">                <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;"><</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">p</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">                    我是 inner 里面的字  </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">                <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">p</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">            <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">div</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">        <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">div</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">    <span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">body</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;"></</span><span class="tag-name" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">html</span><span class="tag" style="margin: 0px; padding: 0px; border: none; color: rgb(153, 51, 0); background-color: inherit; font-weight: bold;">></span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li></ol></div>

问：为什么以上两个<p> 标签中的文字颜色都是橙色的？

这里涉及到了CSS中的层叠和特殊性问题，首先按照上下顺序，第一个<p>元素它的样式很明显是由div.outer p 定义的，所以是橙色。第二个<p>元素的样式是由样式表中的两个样式同时定义，而且同样是color样式。根据《CSS权威指南》中的介绍，当CSS样式发生层叠时，要通过层叠规则来安排最终元素匹配的样式。

CSS2.1的层叠规则中的规定，在没有!important标志时，要按照特殊性排序，如果还不能比较完，就后面覆盖前面。
可以参考：CSS层叠规则

2、请实现一个Event类，继承自此类的对象都会拥有两个方法on和trigger，类声明如下，请写出完整代码：

[javascript]view plaincopy 
   
 function Event() {}  
 Event.prototype.on = function(eventName, callback) {  
 //注册事件监听  
 }  
 Event.prototype.trigger = function(eventName, data) {  
 //触发事件  
 }  

<span style="font-family: Arial, Helvetica, sans-serif;">参考:<a target=_blank target="_blank" href="http://html5ify.com/eventproxy/eventproxy.html" style="color: rgb(255, 153, 0); text-decoration: none;">http://html5ify.com/eventproxy/eventproxy.html</a>
</span>

<span style="font-family: Arial, Helvetica, sans-serif;">3、</span>

要求实现一个多行文本输入框，固定宽度。可根据用户输入的内容多少进行高度自适应变化。如，用户输入了1行文字，则输入框显示为1行，而有2行文字，就显示2行。如微博的评论回复。

[javascript]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
   
 <head>  
     <title>文本框换行</title>  
     <meta charset="utf-8">  
     <style>  
         .txt {  
             border: 1px solid #CCC;  
             width: 200px;  
             padding: 3px;  
             font: 12px/16px Simsun;  
             outline: none;  
             resize: none;  
             word-wrap: break-word;  
             word-break: break-all;  
             overflow: hidden;  
         }  
     </style>  
   
     <script>  
         window.addEventListener('load', function () {  
   
             (function (o, e, t) {  
                 //创建一个pre标签，用来计算文字应有高度  
                 e = document.createElement("pre");  
                 //给pre添加上和文本域一样的样式  
                 e.className = "txt";  
                 //设置绝对定位到屏幕外来隐藏它  
                 e.style.position = "absolute";  
                 e.style.left = "-9999px";  
                 //创建一个文本节点来操作，避免直接操作HTML  
                 e.appendChild(t = document.createTextNode(""));  
                 //给pre的末尾添加一个换行，因为pre会吞掉末尾的一个换行  
                 e.appendChild(document.createTextNode("\n"));  
                 //把pre放入文档中  
                 document.body.appendChild(e);  
                 //文本域键盘事件时计算高度  
                 o.onkeydown = o.onkeyup = function () {  
                     //IE8下\r\n在PRE标签中会被解析为两行，所以需要一个替换  
                     //如果觉得这样会影响效率可以先判断浏览器  
                     t.data = o.value.replace(/\r\n/g, "\n");  
                     o.style.height = e.offsetHeight - 8 + "px";  
                 };  
                 //初始时计算一次  
                 o.onkeydown();  
                 //为了避免换行时闪的太厉害，稍微阻止下滚动  
                 o.onscroll = function () {  
                     o.scrollTop = 0  
                 };  
             })(document.getElementById("o"));  
   
         }, false);  
     </script>  
 </head>  
   
 <body>  
     <textarea id="o" class="txt">来呀，来编辑我呀～</textarea>  
 </body>  
   
 </html>  

来自网络： http://www.web-tinker.com/article/20151.html

4、

编写一个JavasSript函数，给定一个DOM节点node和一个正整数n,返回node的所有第n代后代节点（直接子节点为第1代）

[javascript]view plaincopy 
   
 function getDescendants(node, n) {  
 // return an Array  
 }  

[javascript]view plaincopy 
   
 <script type="text/javascript" >  
     function getDescendants(node, n) {   
         //node, n  
         var childArr = [];  
         var len,tempArr,childNodelist;                
         childArr.push(node);  
   
         for(var i = 0; i<n ; i++){   
             len = childArr.length;  
             tempArr = [];  
             for(var j = 0;j<len;j++){  
                 childNodeList = makeArray(childArr[j].childNodes);  
                 tempArr = tempArr.concat(childNodeList);  
             }  
             childArr = tempArr;  
         }  
         return childArr;  
     }  
     var makeArray = function(obj){  
         return Array.prototype.slice.call(obj,0);  
     }  
     var result = getDescendants(document.getElementById("content"),2);  
     alert(result);  
 </script>  

5、有2个int型已经去重的数组a和b，都是已经从小到大排序好的。要求遍历b数组的数字，如果这个数字出现在a中，就将其从a删去；反之将其插入到a的适当位置，使a保持排序状态。

[javascript]view plaincopy 
   
 <script type="text/javascript" charset="utf-8">  
 //有2个int型已经去重的数组a和b，都是已经从小到大排序好的。要求遍历b数组的数字，  
 //如果这个数字出现在a中，就将其从a删去；反之将其插入到a的适当位置，使a保持排序状态。  
 var mySort = {};  
   
 mySort.sortArr = function(a, b) {  
     var pos = 0;  
     for (var i = 0; i < b.length; i++) {  
         pos = mySort.checkRepeat(a, b[i],pos);  
     }  
 }  
   
 mySort.checkRepeat = function(a, v, pos) {  
     var isChanged = false;                
     if (a != null && a != undefined && a.length > 0) {      
         for (var j = pos; j < a.length; j++) {  
             if (a[j] == v) {  
                 a.splice(j, 1);   
                 break;  
             } else if (a[j] > v) {  
                 a.splice(j, 0, v);  
                 break;  
             }   
         }     
         if(j == a.length){  
             a.push(v);  
         }         
         return j;  
     }     
   
 }  
   
 var a = [2,7,12,25,36,64];  
 var b = [2,3,9,32,36,56,87];  
   
 document.write("合并前数组a为："+a.toString()+"<br>");  
 document.write("合并前数组b为："+b.toString()+"<br>");  
   
 mySort.sortArr(a,b);  
   
 document.write("合并后数组a为："+a.toString());  

//结果是:

合并前数组a为：2,7,12,25,36,64
合并前数组b为：2,3,9,32,36,56,87
合并后数组a为：3,7,9,12,25,32,56,64,87

6、请描述一下从用户输入网址开始，到网页最后呈现出来的全过程，越详细越好，包括各种事件等。

7、8、请评价以下代码并给出改进意见。

<div class="dp-highlighter bg_javascript" style="font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 12px; background-color: rgb(231, 229, 220); width: 936.53125px; overflow: auto; padding-top: 1px; margin: 18px 0px !important;"><div class="bar" style="padding-left: 45px;"><div class="tools" style="padding: 3px 8px 10px 10px; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; background-color: rgb(248, 248, 248); border-left-width: 3px; border-left-style: solid; border-left-color: rgb(108, 226, 108);"><strong>[javascript]</strong> <a target=_blank href="http://blog.csdn.net/javascriptcoder/article/details/22910827#" class="ViewSource" title="view plain" style="color: rgb(160, 160, 160); text-decoration: none; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_plain.gif); background-color: inherit; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">view plain</a><a target=_blank href="http://blog.csdn.net/javascriptcoder/article/details/22910827#" class="CopyToClipboard" title="copy" style="color: rgb(160, 160, 160); text-decoration: none; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_copy.gif); background-color: inherit; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">copy</a><a target=_blank href="https://code.csdn.net/snippets/274217" target="_blank" title="在CODE上查看代码片" style="color: rgb(160, 160, 160); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; background-position: 0% 0%; background-repeat: no-repeat no-repeat;"><img src="https://code.csdn.net/assets/CODE_ico.png" width="12" height="12" alt="在CODE上查看代码片" style="border: none; max-width: 100%; position: relative; top: 1px; left: 2px;" /></a><a target=_blank href="https://code.csdn.net/snippets/274217/fork" target="_blank" title="派生到我的代码片" style="color: rgb(160, 160, 160); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; background-position: 0% 0%; background-repeat: no-repeat no-repeat;"><img src="https://code.csdn.net/assets/ico_fork.svg" width="12" height="12" alt="派生到我的代码片" style="border: none; max-width: 100%; position: relative; top: 2px; left: 2px;" /></a><div style="position: absolute; left: 475px; top: 4970px; width: 18px; height: 18px; z-index: 99;"></div></div></div><ol start="1" class="dp-c" style="padding: 0px; border: none; list-style-position: initial; list-style-image: initial; background-color: rgb(255, 255, 255); color: rgb(92, 92, 92); margin: 0px 0px 1px 45px !important;"><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">if</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> (window.addEventListener) {  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">    <span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">var</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> addListener = </span><span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">function</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> (el, type, listener, useCapture) {  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">        el.addEventListener(type, listener, useCapture);  </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">    };  </span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">} <span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">else</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">if</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> (document.all) {  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">    addListener = <span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">function</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> (el, type, listener) {  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">        el.attachEvent(<span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">"on"</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> + type,  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">            <span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">function</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> () {  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">                listener.apply(el);  </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">            });  </span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">    };  </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">}  </span></li></ol></div>

参考答案：(网友提供)
a) 功能：事件注册
b) 优点：跨浏览器，特性探测，性能优化。缺点：document.all
c) 作用：使得IE中listener的this 为 el，与其它浏览器一致
d) 改进：document.all改成window.attachEvent; useCapture的默认值

9、你最近看的前端相关技术书是什么？常关注的博客是哪些？你觉着哪个网站的交互做的好，为什么？

《JavaScript权威指南》、《JavaScript语言精粹》

W3cfuns、阮一峰、前端前沿、WebHek、前端开发，等等

当时就写了淘宝的交互，从购物车、商品分类、响应式设计等方面讲了一下。

10、阅读如下代码：

<div class="dp-highlighter bg_javascript" style="font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 12px; background-color: rgb(231, 229, 220); width: 936.53125px; overflow: auto; padding-top: 1px; margin: 18px 0px !important;"><div class="bar" style="padding-left: 45px;"><div class="tools" style="padding: 3px 8px 10px 10px; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; background-color: rgb(248, 248, 248); border-left-width: 3px; border-left-style: solid; border-left-color: rgb(108, 226, 108);"><strong>[javascript]</strong> <a target=_blank href="http://blog.csdn.net/javascriptcoder/article/details/22910827#" class="ViewSource" title="view plain" style="color: rgb(160, 160, 160); text-decoration: none; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_plain.gif); background-color: inherit; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">view plain</a><a target=_blank href="http://blog.csdn.net/javascriptcoder/article/details/22910827#" class="CopyToClipboard" title="copy" style="color: rgb(160, 160, 160); text-decoration: none; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_copy.gif); background-color: inherit; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">copy</a><a target=_blank href="https://code.csdn.net/snippets/274217" target="_blank" title="在CODE上查看代码片" style="color: rgb(160, 160, 160); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; background-position: 0% 0%; background-repeat: no-repeat no-repeat;"><img src="https://code.csdn.net/assets/CODE_ico.png" width="12" height="12" alt="在CODE上查看代码片" style="border: none; max-width: 100%; position: relative; top: 1px; left: 2px;" /></a><a target=_blank href="https://code.csdn.net/snippets/274217/fork" target="_blank" title="派生到我的代码片" style="color: rgb(160, 160, 160); text-decoration: none; background-image: none; background-color: inherit; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; background-position: 0% 0%; background-repeat: no-repeat no-repeat;"><img src="https://code.csdn.net/assets/ico_fork.svg" width="12" height="12" alt="派生到我的代码片" style="border: none; max-width: 100%; position: relative; top: 2px; left: 2px;" /></a><div style="position: absolute; left: 475px; top: 5515px; width: 18px; height: 18px; z-index: 99;"></div></div></div><ol start="1" class="dp-c" style="padding: 0px; border: none; list-style-position: initial; list-style-image: initial; background-color: rgb(255, 255, 255); color: rgb(92, 92, 92); margin: 0px 0px 1px 45px !important;"><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">var</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> dog = </span><span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">function</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> () {  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">    <span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">return</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">'汪'</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">;  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">};  </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">var</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> cat = </span><span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">function</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> () {  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">    <span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">return</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">'喵'</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">;  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">};  </span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">  </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">(<span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">function</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> () {  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">    <span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">if</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> (cat() === </span><span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">'喵喵'</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">) {  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">        dog = <span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">function</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> () {  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">            <span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">return</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">'汪汪'</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">;  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">        }  </span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">    }  </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">  </span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">    <span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">function</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> cat() {  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">        <span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">return</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> </span><span class="string" style="margin: 0px; padding: 0px; border: none; color: blue; background-color: inherit;">'喵喵'</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">;  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">    }  </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">})();  </span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">  </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">for</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> (</span><span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">var</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> i = 0; i < 10; i++) {  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">    setTimeout(<span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">function</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> () {  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">            <span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">for</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> (</span><span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); background-color: inherit; font-weight: bold;">var</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> j = 1; j <= i; j++) {  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">                console.log(dog());  </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">            }  </span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">        },  </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; background-color: rgb(248, 248, 248); line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">        1000 * i);  </span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">}  </span></li></ol></div>

问：1、为什么最终小狗叫了200声汪？请详细说明为什么。2、修改代码setTimeout部分代码，实现每隔1秒调用i（从1到10递增）次dog()。

1、第一题重点在于函数作用域的问题。

2、修改后的setTimeout函数是

[javascript]view plaincopy 
   
 for (var i = 0; i < 10; i++) {  
     (function(a) {  
         setTimeout(function() {  
             for (var j = 1; j <= a; j++) {  
                 document.write(dog()+" "+a+"<br>");  
             }  

it_zujun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2014阿里巴巴WEB前端实习生在线笔试题

2014年3月31日晚，我怀着略微忐忑的心情（第一次在线笔试^_^!!）进行了笔试，阿里巴巴的笔试题共有10道，几乎包含了Web前端开发的各个方面，有程序题、有叙述题，时间非常紧张，只完成了大概6道题。下面把遇到的题目跟大家分享一下！1、[html] view plaincopy> html> head> style type="text/css"
复制链接

扫一扫

专栏目录