脚本宝典收集整理的这篇文章主要介绍了

哔哩哔哩2018校招前端笔试

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">前言</h1> <p>前几日,哔哩哔哩在电子科大清水河校区举行了校招宣讲会。B站不用多说,中国最大的同性交友网站<img src="https://static.segmentfault.com/v-5cc2cd8e/global/img/emojis/smile.png" class="emoji" alt="smile" title="smile">,不去工作也能去看看。 <br />当晚便进行了部分笔试,下面是我参加的前端笔试试题和我自己的解答,分享给大家。 <br />博文地址:<a href="http://xiongqi-xq.github.io/2017/10/13/bili/" rel="nofollow noreferrer" target="_blank">哔哩哔哩2018校招前端笔试</a></p> <h2 id="articleHeader1">第一题</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="给定一个整数数组,找到具有最大和的子数组,返回最大和。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code style="word-break: break-word; white-space: initial;">给定一个整数<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="浏览关于“数组”的文章" target="_blank" class="tag_link">数组</a>,找到具有最大和的子数组,返回最大和。</code></pre> <p>比较常见,直接给我的解答:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// es6 function (arr) { //全为负数的情况,要注意 if (arr.every(x => x < 0)) { <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> arr.sort()[0];<br /> }</p> <p> <a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> max = 0;<br /> <a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> sum = 0;<br /> <a href="http://www.js-code.com/tag/for" title="for" target="_blank">for</a> (<a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> i of arr) {<br /> sum += i;<br /> <a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a> (max < sum) max = sum; <a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a> (sum < 0) sum = 0; } return max;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">// <a href="http://www.js-code.com/tag/es6" title="浏览关于“es6”的文章" target="_blank" class="tag_link">es6</a></span> <span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span> (<span class="hljs-params">arr</span>) </span>{ <span class="hljs-comment">//全为负数的情况,要注意</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a></span> (arr.every(<span class="hljs-function"><span class="hljs-params">x</span> =&gt;</span> x &lt; <span class="hljs-number">0</span>)) { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> arr.sort()[<span class="hljs-number">0</span>]; } <span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> max = <span class="hljs-number">0</span>; <span class="hljs-keyword">var</span> sum = <span class="hljs-number">0</span>; <span class="hljs-keyword"><a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a></span> (<span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> i <span class="hljs-keyword">of</span> arr) { sum += i; <span class="hljs-keyword">if</span> (max &lt; sum) max = sum; <span class="hljs-keyword">if</span> (sum &lt; <span class="hljs-number">0</span>) sum = <span class="hljs-number">0</span>; } <span class="hljs-keyword">return</span> max;</code></pre> <h2 id="articleHeader2">第二题</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="要求: 1. 构建一个n*n的格子(n从输入框填写) ,默认背景色都是白色,鼠标指针指上去的格子底色要变 成红色,鼠标移出时复原 2. 鼠标点击格子时背景色固定为蓝色,指针hover时也不变红。再次点击时复原成未点击的状态 3. 格子大小可用css控制,底色变化用js实现" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs markdown"><code>要求: <span class="hljs-bullet">1. </span>构建一个n*n的格子(n从输入框填写) ,默认背景色都是白色,鼠标指针指上去的格子底色要变 成红色,鼠标移出时复原 <span class="hljs-bullet">2. </span>鼠标点击格子时背景色固定为蓝色,指针hover时也不变红。再次点击时复原成未点击的状态 <span class="hljs-bullet">3. </span>格子大小可用css控制,底色变化用js实现</code></pre> <p>个人思路如下:</p> <h3 id="articleHeader3">1. 创建n*n的表格</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<!-- html部分 --><br /> <input id=&quot;in&quot; type=&quot;text&quot; placeholder=&quot;输入n&quot;><br /> <button onclick=&quot;createTable()&quot;>确认n</button></p> <p><!-- css --></p> <style> td{ width:20px; height:20px; border:1px solid; } </style> <p><!-- js --><br /> <script> // 创建n*n表格 <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> createTable(){ var n=<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>cument.getElementById(&quot;<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>&quot;).value;</p> <p> //创建n*n的&quot;table&quot; var str=&quot;</p> <tbody>&quot;; <a href="http://www.js-code.com/tag/for" title="for" target="_blank">for</a>(var i=0;i<n;i++){ str+=&quot; <tr>&quot;; for(var j=0;j<n;j++){ str+=&quot; <td></td> <p>&quot;; } str+=&quot;</tr> <p>&quot;; } str += &quot;</tbody> <p>&quot;; var table = <a href="http://www.js-code.com/tag/document" title="document" target="_blank">document</a>.createElement(&quot;table&quot;); table.<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>ner<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> = str;</p> <p> table.setAttribute(&quot;cellspac<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>g&quot;, 0);//消除表格间的间距 <a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>cument.body.appendChild(table);</p> <p> //调用事件函数,传入表格 colorEvent(table); } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-comment">&lt;!-- html部分 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"in"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"输入n"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a></span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/onclick" title="浏览关于“onclick”的文章" target="_blank" class="tag_link">onclick</a></span>=<span class="hljs-string">"createTable()"</span>&gt;</span>确认n<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span> <span class="hljs-comment">&lt;!-- css --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"> <span class="hljs-selector-tag">td</span>{ <span class="hljs-attribute">width</span>:<span class="hljs-number">20px</span>; <span class="hljs-attribute">height</span>:<span class="hljs-number">20px</span>; <span class="hljs-attribute">border</span>:<span class="hljs-number">1px</span> solid; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> <span class="hljs-comment">&lt;!-- js --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-comment">// 创建n*n表格</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">createTable</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-keyword">var</span> n=<span class="hljs-built_in"><a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a></span>.getElementById(<span class="hljs-string">"in"</span>).value; <span class="hljs-comment">//创建n*n的"table"</span> <span class="hljs-keyword">var</span> str=<span class="hljs-string">"&lt;tbody&gt;"</span>; <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>;i&lt;n;i++){ str+=<span class="hljs-string">"&lt;tr&gt;"</span>; <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> j=<span class="hljs-number">0</span>;j&lt;n;j++){ str+=<span class="hljs-string">"&lt;td&gt;&lt;/td&gt;"</span>; } str+=<span class="hljs-string">"&lt;/tr&gt;"</span>; } str += <span class="hljs-string">"&lt;/tbody&gt;"</span>; <span class="hljs-keyword">var</span> table = <span class="hljs-built_in"><a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>cument</span>.createElement(<span class="hljs-string">"table"</span>); table.inner<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a> = str; table.setAttribute(<span class="hljs-string">"cellspacing"</span>, <span class="hljs-number">0</span>);<span class="hljs-comment">//消除表格间的间距</span> <span class="hljs-built_in">document</span>.body.appendChild(table); <span class="hljs-comment">//调用事件函数,传入表格</span> colorEvent(table); } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h3 id="articleHeader4">2. 颜色变化效果</h3> <p>使用事件委托。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<script> //mouseover与mouseout //不论鼠标指针穿过被选元素或其子元素,都会触发与mouseout。</p> <p>//mouseenter与mouseleave //只有在鼠标指针离开被选元素时,才会触发与mouseout。</p> <p><a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> colorEvent(table) { //指针hover,out以及click监听 table.addEventListener(&quot;mouseover&quot;, colorHover, <a href="http://www.js-code.com/tag/false" title="false" target="_blank">false</a>); table.addEventListener(&quot;mouseout&quot;, colorOut, <a href="http://www.js-code.com/tag/false" title="false" target="_blank">false</a>); table.addEventListener(&quot;click&quot;, colorClick, <a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a>);</p> <p> <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> colorHover(ev) { var e = ev || <a href="http://www.js-code.com/tag/window" title="window" target="_blank">window</a>.<a href="http://www.js-code.com/tag/event" title="event" target="_blank">event</a>; var target = e.target || e.srcElement; if (target.tagName == &quot;TD&quot; &amp;&amp; target.style.background != &quot;blue&quot;) { target.style.background = &quot;red&quot;; //注意&quot;tagName&quot;为大写,写小写&quot;td&quot;会失败 } } <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> colorOut(ev) { var e = ev || <a href="http://www.js-code.com/tag/window" title="window" target="_blank">window</a>.<a href="http://www.js-code.com/tag/event" title="event" target="_blank">event</a>; var target = e.target || e.srcElement; if (target.tagName == &quot;TD&quot; &amp;&amp; target.style.background != &quot;blue&quot;) { target.style.background = &quot;white&quot;; } } function colorClick(ev) { var e = ev || <a href="http://www.js-code.com/tag/window" title="浏览关于“window”的文章" target="_blank" class="tag_link">window</a>.<a href="http://www.js-code.com/tag/event" title="浏览关于“event”的文章" target="_blank" class="tag_link">event</a>; var target = e.target || e.srcElement; if (target.tagName == &quot;TD&quot;) { target.style.background = (target.style.background == &quot;blue&quot; ? &quot;white&quot; : &quot;blue&quot;); } } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-comment">//mouseover与mouseout</span> <span class="hljs-comment">//不论鼠标指针穿过被选元素或其子元素,都会触发与mouseout。</span> <span class="hljs-comment">//mouseenter与mouseleave</span> <span class="hljs-comment">//只有在鼠标指针离开被选元素时,才会触发与mouseout。</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">colorEvent</span>(<span class="hljs-params">table</span>) </span>{ <span class="hljs-comment">//指针hover,out以及click监听</span> table.addEventListener(<span class="hljs-string">"mouseover"</span>, colorHover, <span class="hljs-literal">false</span>); table.addEventListener(<span class="hljs-string">"mouseout"</span>, colorOut, <span class="hljs-literal">false</span>); table.addEventListener(<span class="hljs-string">"click"</span>, colorClick, <span class="hljs-literal">false</span>); <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">colorHover</span>(<span class="hljs-params">ev</span>) </span>{ <span class="hljs-keyword">var</span> e = ev || <span class="hljs-built_in">window</span>.event; <span class="hljs-keyword">var</span> target = e.target || e.srcElement; <span class="hljs-keyword">if</span> (target.tagName == <span class="hljs-string">"TD"</span> &amp;&amp; target.style.background != <span class="hljs-string">"blue"</span>) { target.style.background = <span class="hljs-string">"red"</span>; <span class="hljs-comment">//注意"tagName"为大写,写小写"td"会失败</span> } } <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">colorOut</span>(<span class="hljs-params">ev</span>) </span>{ <span class="hljs-keyword">var</span> e = ev || <span class="hljs-built_in">window</span>.event; <span class="hljs-keyword">var</span> target = e.target || e.srcElement; <span class="hljs-keyword">if</span> (target.tagName == <span class="hljs-string">"TD"</span> &amp;&amp; target.style.background != <span class="hljs-string">"blue"</span>) { target.style.background = <span class="hljs-string">"white"</span>; } } <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">colorClick</span>(<span class="hljs-params">ev</span>) </span>{ <span class="hljs-keyword">var</span> e = ev || <span class="hljs-built_in">window</span>.event; <span class="hljs-keyword">var</span> target = e.target || e.srcElement; <span class="hljs-keyword">if</span> (target.tagName == <span class="hljs-string">"TD"</span>) { target.style.background = (target.style.background == <span class="hljs-string">"blue"</span> ? <span class="hljs-string">"white"</span> : <span class="hljs-string">"blue"</span>); } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>其实此题如果使用<code><a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a></code>会比较方便,其大致思路如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$(document).ready(function(){ $(&quot;#t&quot;).hover(function(){ $(&quot;#t&quot;).css(&quot;background-color&quot;,&quot;red&quot;); },function(){ $(&quot;#t&quot;).css(&quot;background-color&quot;,&quot;white&quot;); }); });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">$(<span class="hljs-built_in">document</span>).ready(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ $(<span class="hljs-string">"#t"</span>).hover(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ $(<span class="hljs-string">"#t"</span>).css(<span class="hljs-string">"background-color"</span>,<span class="hljs-string">"red"</span>); },<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ $(<span class="hljs-string">"#t"</span>).css(<span class="hljs-string">"background-color"</span>,<span class="hljs-string">"white"</span>); }); });</code></pre> <h3 id="articleHeader5">3. 源代码</h3> <p><a href="https://github.com/xiongqi-xq/xiongqi-xq.github.io/blob/master/resources/%E5%93%94%E5%93%A9%E5%93%94%E5%93%A9%E7%AC%94%E8%AF%95%E7%AC%AC%E4%B8%89%E9%A2%98.html.code" rel="nofollow noreferrer" target="_blank">哔哩哔哩笔试第三题.html</a></p> <h2 id="articleHeader6">第三题</h2> <p>此题为还原一张图上的设计,此处无图就不叙述了。</p> <h2 id="articleHeader7">第四题</h2> <p>题目:高铁的玻璃需要有一定的防撞击强度,可以通过不同时速的铝弹撞击玻璃实际测试,可测出不会被击穿的最大时速。现在有两块强度未知的玻璃需要实验验证防撞击最大时速,假设不会被击穿时玻璃都完好无损可以继续实验使用, 一旦被击穿则不能继续使用。如何通过这两块玻璃,用尽量少的实验次数验证出防撞击的最大时速。(可以有微小误差,两块玻璃都可以被击穿) <br />题有点长,我的思路是使用类似于计算机网络拥塞控制的方法,使用<code>先指数增后线性增长</code>的方法。 <br />(使用1,2,3表示时速等级,等级越高,时速越快)</p> <ol> <li>使用 <code>2^n</code> 级时速依次测试玻璃1(n=0,1,2...)。</li> <li>假设 <code>2^m</code> 级时速时穿过玻璃1,记录下当前的时速间隔:( 2^(m-1),2^m )。</li> <li>从 <code>2^(m-1)</code> 开始依次加1级测试玻璃2,直至测出最大时速。</li> </ol> <p></code></p>

总结

以上是脚本宝典为你收集整理的

哔哩哔哩2018校招前端笔试

全部内容,希望文章能够帮你解决

哔哩哔哩2018校招前端笔试

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过