前言
最近过了一遍犀牛书，但是感觉自己好像没什么记得住的，于是决定刷刷各公司的面试题，希望可以有些方向。
试题
1请在触摸屏下实现一个按钮，当按快速触碰按钮并放开手时，立刻弹出“成功”二字的提示框。
这题首先想到的是touch功能，页面上实现了一把
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> 5 <meta name="apple-mobile-web-app-capable" content="yes"> 6 <title>Document</title> 7 </head> 8 <body> 9 <span id="button">点击这里</span> 10 <script> 11 12 var obj = document.getElementById('button'); 13 14 obj.addEventListener('touchend',function (e) { 15 alert('ok');18 }); 19 20 </script> 21 </body> 22 </html>
但是总觉得有点问题，觉得它不仅仅考这些。正巧，读到了叶小钗的博客。有如下的方法
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> 5 <meta name="apple-mobile-web-app-capable" content="yes"> 6 <title>Document</title> 7 </head> 8 <body> 9 <span id="button">点击这里</span> 10 <script> 11 var el = null; 12 var obj = document.getElementById('button'); 13 function getEvent(el,e,type){ 14 e = e.changedTouches[0]; 15 var event = document.createEvent('MouseEvents'); 16 event.initMouseEvent(type,true,true,window,1,e.screenX,e.screenY,false,false,false,false,0,null); 17 event.forwardedToucheEvent = true; 18 return event; 19 } 20 21 obj.addEventListener('touchstart',function (e) { 22 var firstTouch = e.touches[0]; 23 el = firstTouch.target; 24 tl = e.timeStamp; 25 }); 26 obj.addEventListener('touchend',function (e) { 27 e.preventDefault(); 28 var event = getEvent(el,e,'click'); 29 el.dispatchEvent(event); 30 }); 31 obj.addEventListener('click',function(e){ 32 obj.style.display ='none'; 33 setTimeout(function(){ 34 obj.style.display = ''; 35 },1000); 36 }) 37 </script> 38 </body> 39 </html>
解决了在处理移动端快速点击的问题。
2
请封装一个名叫Counter的计数器Class，只有两个公有成员：
a) 完成计数动作
b) 输出计数总数
这道题不多说，直接上代码
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> 5 <meta name="apple-mobile-web-app-capable" content="yes"> 6 <title>Document</title> 7 </head> 8 <body> 9 <button id="button1">点击这里1</button> 10 <button id="button2">点击这里2</button> 11 <span id="sum"></span> 12 <script> 13 var obj1 = document.getElementById('button1'); 14 var obj2 = document.getElementById('button2'); 15 var sum = document.getElementById('sum'); 16 function Counter () { 17 this.sum = 0; 18 } 19 Counter.prototype.add=function(){ 20 this.sum++; 21 } 22 Counter.prototype.output=function(){ 23 return this.sum; 24 } 25 26 var c = new Counter(); 27 obj1.addEventListener('click', function(){ 28 c.add(); 29 sum.innerHTML = c.output(); 30 }); 31 obj2.addEventListener('click', function(){ 32 c.add(); 33 sum.innerHTML = c.output(); 34 }); 35 36 </script> 37 </body> 38 </html>
4
使用原生JavaScript给下面列表中的结点绑定点击事件，点击时创建一个Object对象，兼容IE和标准浏览器。
HTML:
<ul id = “nav”>
<li><a href=”http://ju.taobao.com/tg/brand.htm”>品牌团</a></li>
<li><ahref=”http://ju.taobao.com/tg/point_list.htm”>整点聚</a></li>
<li><ahref=”http://ju.taobao.com/jusp/jiazhuang/tp.htm”>聚家装</a></li>
<li><ahref=”http://ju.taobao.com/jusp/liangfan/tp.htm”>量贩团</a></li>
</ul>
Object:
{
“index” : 1, // 序号
“name” : “品牌团”,
“link” :“http://ju.taobao.com/tg/brand.htm”
}
这题其实就考了闭包的知识点
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> 5 <meta name="apple-mobile-web-app-capable" content="yes"> 6 <title>Document</title> 7 </head> 8 <body> 9 10 11 <p>使用原生JavaScript给下面列表中的结点绑定点击事件，点击时创建一个Object对象，兼容IE和标准浏览器</p> 12 13 <ul id = "nav"> 14 <li><a href="http://ju.taobao.com/tg/brand.html">品牌团</a></li> 15 <li><a href="http://ju.taobao.com/tg/point_list.html">整点聚</a></li> 16 <li><a href="http://ju.taobao.com/jusp/jiazhuang/tp.html">聚家装</a></li> 17 <li><a href="http://ju.taobao.com/jusp/liangfan/tp.html">量贩团</a></li> 18 </ul> 19 <script> 20 var li_class = document.getElementById('nav').getElementsByTagName('li'); 21 22 for (var i = li_class.length - 1; i >= 0; i--) { 23 (function(i){ 24 li_class[i].addEventListener('click',function(e){ 25 console.log({index:i,name:li_class[i].firstElementChild.innerHTML,link:li_class[i].firstElementChild.href}); 26 e.preventDefault(); 27 }); 28 })(i) 29 }; 30 31 </script> 32 </body> 33 </html>
7
有一个int型数组，里面有若干数字。要求统计出一共有多少种不同的数字？每种数字出现的频率从少到多排列，频率相同则从小到大排列。
这道题目最开始想到的是类似php中的关联数组，于是我谢了个｛｝作为数组存放｛key:count｝,但是，js可能自动优化了，排序自动是根据key从小到大排的，查了下一个叫php.js的方法，也没有好的解决方法。后来用个二维数组解决了，但是总觉得有点效率低，代码如下
1 var arr = [1, 3, 2, 4, 2, 4, 9, 7, 2]; 2 //arr.sort(); 3 var obj = []; 4 arr.forEach(function(i, index) { 5 //console.log(i); 6 var count = 0; 7 for (var j = index, len = arr.length; j < len; j++) { 8 if (arr[index] == arr[j]) { 9 count++; 10 } 11 } 12 13 obj.push([i, count]) 14 15 }); 16 obj.sort(function(a,b){ 17 if(a[1] == b[1]){ 18 return a[0]-b[0]; 19 }else{ 20 return a[1]-b[1]; 21 } 22 })