web前端面试题

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.5333251953125px; 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; "><embed id="ZeroClipboardMovie_1" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="18" height="18" name="ZeroClipboardMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=18&height=18" wmode="transparent" /></div></div></div><ol start="1" class="dp-xml" style="margin: 0px 0px 1px 45px !important; padding: 0px; border: none; list-style-position: initial; list-style-image: initial; background-color: rgb(255, 255, 255); color: rgb(92, 92, 92); "><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">            div:not(.outer) p { color: purple; }   </span></li><li style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">            div.outer p { color: orange; }  </span></li><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">  </span></li><li style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">                我是 outer 里面的字  </span></li><li style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">                    我是 inner 里面的字  </span></li><li style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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

1. function Event() {}  
2. Event.prototype.on = function(eventName, callback) {  
3. //注册事件监听  
4. }  
5. Event.prototype.trigger = function(eventName, data) {  
6. //触发事件  
7. }  

<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

1. <!DOCTYPE html>  
2. <html>  
3.   
4. <head>  
5.     <title>文本框换行</title>  
6.     <meta charset="utf-8">  
7.     <style>  
8.         .txt {  
9.             border: 1px solid #CCC;  
10.             width: 200px;  
11.             padding: 3px;  
12.             font: 12px/16px Simsun;  
13.             outline: none;  
14.             resize: none;  
15.             word-wrap: break-word;  
16.             word-break: break-all;  
17.             overflow: hidden;  
18.         }  
19.     </style>  
20.   
21.     <script>  
22.         window.addEventListener('load', function () {  
23.   
24.             (function (o, e, t) {  
25.                 //创建一个pre标签，用来计算文字应有高度  
26.                 e = document.createElement("pre");  
27.                 //给pre添加上和文本域一样的样式  
28.                 e.className = "txt";  
29.                 //设置绝对定位到屏幕外来隐藏它  
30.                 e.style.position = "absolute";  
31.                 e.style.left = "-9999px";  
32.                 //创建一个文本节点来操作，避免直接操作HTML  
33.                 e.appendChild(t = document.createTextNode(""));  
34.                 //给pre的末尾添加一个换行，因为pre会吞掉末尾的一个换行  
35.                 e.appendChild(document.createTextNode("\n"));  
36.                 //把pre放入文档中  
37.                 document.body.appendChild(e);  
38.                 //文本域键盘事件时计算高度  
39.                 o.onkeydown = o.onkeyup = function () {  
40.                     //IE8下\r\n在PRE标签中会被解析为两行，所以需要一个替换  
41.                     //如果觉得这样会影响效率可以先判断浏览器  
42.                     t.data = o.value.replace(/\r\n/g, "\n");  
43.                     o.style.height = e.offsetHeight - 8 + "px";  
44.                 };  
45.                 //初始时计算一次  
46.                 o.onkeydown();  
47.                 //为了避免换行时闪的太厉害，稍微阻止下滚动  
48.                 o.onscroll = function () {  
49.                     o.scrollTop = 0  
50.                 };  
51.             })(document.getElementById("o"));  
52.   
53.         }, false);  
54.     </script>  
55. </head>  
56.   
57. <body>  
58.     <textarea id="o" class="txt">来呀，来编辑我呀～</textarea>  
59. </body>  
60.   
61. </html>  

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

4、

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

[javascript] view plaincopy

1. function getDescendants(node, n) {  
2. // return an Array  
3. }  

[javascript] view plaincopy

1. <script type="text/javascript" >  
2.     function getDescendants(node, n) {   
3.         //node, n  
4.         var childArr = [];  
5.         var len,tempArr,childNodelist;                
6.         childArr.push(node);  
7.   
8.         for(var i = 0; i<n ; i++){   
9.             len = childArr.length;  
10.             tempArr = [];  
11.             for(var j = 0;j<len;j++){  
12.                 childNodeList = makeArray(childArr[j].childNodes);  
13.                 tempArr = tempArr.concat(childNodeList);  
14.             }  
15.             childArr = tempArr;  
16.         }  
17.         return childArr;  
18.     }  
19.     var makeArray = function(obj){  
20.         return Array.prototype.slice.call(obj,0);  
21.     }  
22.     var result = getDescendants(document.getElementById("content"),2);  
23.     alert(result);  
24. </script>  

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

[javascript] view plaincopy

1. <script type="text/javascript" charset="utf-8">  
2. //有2个int型已经去重的数组a和b，都是已经从小到大排序好的。要求遍历b数组的数字，  
3. //如果这个数字出现在a中，就将其从a删去；反之将其插入到a的适当位置，使a保持排序状态。  
4. var mySort = {};  
5.   
6. mySort.sortArr = function(a, b) {  
7.     var pos = 0;  
8.     for (var i = 0; i < b.length; i++) {  
9.         pos = mySort.checkRepeat(a, b[i],pos);  
10.     }  
11. }  
12.   
13. mySort.checkRepeat = function(a, v, pos) {  
14.     var isChanged = false;                
15.     if (a != null && a != undefined && a.length > 0) {      
16.         for (var j = pos; j < a.length; j++) {  
17.             if (a[j] == v) {  
18.                 a.splice(j, 1);   
19.                 break;  
20.             } else if (a[j] > v) {  
21.                 a.splice(j, 0, v);  
22.                 break;  
23.             }   
24.         }     
25.         if(j == a.length){  
26.             a.push(v);  
27.         }         
28.         return j;  
29.     }     
30.   
31. }  
32.   
33. var a = [2,7,12,25,36,64];  
34. var b = [2,3,9,32,36,56,87];  
35.   
36. document.write("合并前数组a为："+a.toString()+"<br>");  
37. document.write("合并前数组b为："+b.toString()+"<br>");  
38.   
39. mySort.sortArr(a,b);  
40.   
41. 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.5333251953125px; 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; "><embed id="ZeroClipboardMovie_7" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="18" height="18" name="ZeroClipboardMovie_7" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=7&width=18&height=18" wmode="transparent" /></div></div></div><ol start="1" class="dp-c" style="margin: 0px 0px 1px 45px !important; padding: 0px; border: none; list-style-position: initial; list-style-image: initial; background-color: rgb(255, 255, 255); color: rgb(92, 92, 92); "><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">        el.addEventListener(type, listener, useCapture);  </span></li><li style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">    };  </span></li><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">                listener.apply(el);  </span></li><li style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">            });  </span></li><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">    };  </span></li><li style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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.5333251953125px; 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; "><embed id="ZeroClipboardMovie_8" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="18" height="18" name="ZeroClipboardMovie_8" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=8&width=18&height=18" wmode="transparent" /></div></div></div><ol start="1" class="dp-c" style="margin: 0px 0px 1px 45px !important; padding: 0px; border: none; list-style-position: initial; list-style-image: initial; background-color: rgb(255, 255, 255); color: rgb(92, 92, 92); "><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">};  </span></li><li style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">};  </span></li><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">  </span></li><li style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">        }  </span></li><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">    }  </span></li><li style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">  </span></li><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">    }  </span></li><li style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">})();  </span></li><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">  </span></li><li style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">                console.log(dog());  </span></li><li style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">            }  </span></li><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">        },  </span></li><li style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit; ">        1000 * i);  </span></li><li class="alt" style="margin: 0px !important; padding: 0px 3px 0px 10px !important; 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; "><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

1. for (var i = 0; i < 10; i++) {  
2.     (function(a) {  
3.         setTimeout(function() {  
4.             for (var j = 1; j <= a; j++) {  
5.                 document.write(dog()+" "+a+"<br>");  
6.             }  
7.         }, 1000);  
8.     })(i+1);  
9. }