<!DOCTYPE html><head> <title>前端工程師面試題</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <script type="text/javascript" src="http://files.cnblogs.com/darkangle/list.js"></script> <style>*{padding:0;margin:0;}a{outline:none;text-decoration:none;}body{font: 14px/1.5 arial}.w960{width:560px;margin:0 auto;}.hd{background: #059ed3;color:#fff;}.hd,.ft{padding:5px;}.ft{background:#ccc;text-align:right;}.row{padding:5px;border-bottom:solid 1px #eee;}.row div{display:inline}.row a{float:right;}.ft a{color:green;font-weight:bold}code{display:block;border:solid 1px #666;padding:10px;background:#ffffc0;}h3{margin:10px 0;color:#ff9900;}input{border:solid 1px #c0c0c0;line-height:1.5em;height:1.5em} </style></head><body><div class="w960"><h3>第一題:請使用Javascript實現以下動態效果</h3><p>可以使用任何你喜歡的方式和庫,盡量使用你認為優雅的實現,並在程式碼完成說簡要說明此方案的優點和不足。<p><div id="datalist"> <div class="hd">現在一共有:<strong class="item_count"></strong> 個條目</div> <div class="list"><div class="row"><div>這是第一條</div><a href="javascript:;">修改</a></div><div class="row"><div>這是第二條</div><a href="javascript:;">修改</a></div><div class="row"><div>花兒為什麼這樣紅?</div><a href="javascript:;">修改</a></div><div class="row"><div>你知道小月月是哪個不?</div><a href="javascript:;">修改</a></div><div class="row"><div>人生就是一個杯具</div><a href="javascript:;">修改</a></div> </div> <div class="ft"><a href="javascript:;">新增條目</a></div></div><h3>第二題:請說明要輸出正確的myName的值要如何修改程式?並解釋原因</h3><code>foo = function(){this.myName = "Foo function.";}foo.prototype.sayHello = function(){alert(this.myName);}foo.prototype.bar = function(){setTimeout(this.sayHello, 1000);}var f = new foo;f.bar();</code><h3>第三題:請按下列要求寫出相應的 Html 和 CSS </h3><p>現有並列的三列布局結構,從左至右依次為 A, B, C, 寬度分別為180px, 600px, 180px。要求在不改變 Html 結構的情況下用CSS實現:ABC,CBA,BAC 三種布局及在CBA排列下使B寬度自適應(三列總寬度100%),不能使用針對瀏覽器的CSS Hack.</p></div><script type="text/javascript">m();</script>