一，单选题：
有以下ES6代码
function * gen(){
yield 1;
yield 2;
yield 3;
}
下面选项描述正确的是：
A：gen()执行后返回2
B：gen()执行后返回一个undefined
C：gen()执行后返回一个Generator对象
D：gen()执行后返回1
解答：C、这是ES6的新feature（特性），function后面带*号的叫做generator函数，函数运行时返回一个迭代器
二、多选题： 语句var arr=[a,b,c,d];执行后，数组arr中每一项都是整数，下面得到其中最大整数语句正确的是几项
A:Math.max(arr);
B:Math.max(arr[0],arr[1],arr[2],arr[3]);
C:Math.max.call(arr[0],arr[1],arr[2],arr[3]);
D:Math.max.apply(Math,arr);
答案：B、C、D
函数Math.max(x);的参数是Number类型，可以使小数，整数，正数，负数或者是0，如果不是上面所描述类型就会返回NaN。
三、问答题
写一个traverse函数，输出所有页面宽度和高度大于50像素的节点
<script language="javascript">
function traverse() {
var arr = [];//定义空数组
var elements = [];
if (document.all) {
elements = document.all;//该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。
} else {
elements = document.getElementsByTagName("*")//作用同document.all一致
}
// console.log(elements.length);
for (var i = 0; i < elements.length; i++) {
var ele = elements[i];//遍历elements，获得里面的元素
// console.log(ele.tagName);
// width 返回的是字符串 offsetWidth返回的是带边框的Number型的数字||clientWidth返回的是不带边框的number数字
var width = parseFloat(ele.style.width) || ele.offsetWidth;
// console.log(width);
var height = parseFloat(ele.style.height) || ele.offsetHeight;
// console.log(height);
if (width > 50 || height > 50) {
arr.push(elements[i].tagName);
}
}
return arr;
}
window.onload = function () {//注意onload的使用方式
console.log(traverse());
console.log('a');
console.log('a');
}
<script>
四、问答题
请写一个表格以及对应的css，使表格奇数行为白色背景，偶数行为灰色背景，鼠标悬浮上去为黄色背景。
<table class="table">
<tr>
<td>第1行</td>
</tr>
<tr>
<td>第2行</td>
</tr>
<tr>
<td>第3行</td>
</tr>
</table>
<style>
.table tr:nth-child(odd){
background-color: white;
}
.table tr:nth-child(even){
background-color: gray;
}
.table tr:hover{
background-color: yellow;
}
</style>
五、写一个求和的函数sum，达到下面的效果
//Should equal 15 译文：应该等于15
sum(1,2,3,4,5);
//Should equal 0
sum(5,null,-5);
//Should equal 10
sum(‘1.0’,false,1,true,1,‘A’,1,‘B’,1,‘C’,1,‘D’,1,‘E’,1,‘F’,1,‘G’,1);
//Should equal 0.3,not 0.3000000000000004
function sum(){
var nResult = 0;
for(var i = 0,l=arguments.length;i<l;i++){
nResult+=window.parseFloat(arguments[i])||0;
}
return nResult.toFixed(3)*1000/1000;//toFixed(),把数字转换为字符串，结果的小数点后有指定位数的数字
}
六、填空题
删除给定数组中的第二项和第三项，并且在得到的新的数组中第二项后面添加一个新的值：
var arr1=['a','b','c','d','e'];
var arr2 = arr1._(_,_,'newvalue');
答：var arr2 = arr1.splice(1,2,‘newvalue’);
注意：splice() 方法用于插入、删除或替换数组的元素。注意：**这种方法会改变原始数组！。
七、填空题
在空白处填入适当的代码使输出结果成立
function showMoney(){
____
};
var personA = new Object();
var personB = new Object();
personA.money='100';
personB.money='150';
personA.showMoney = showMoney;
personB.showMoney = showMoney;
console.log(personA.showMoney());//100
console.log(personB.showMoney());//150
答案：return this.money;
八、填空题
使用for in 循环数据中的元素会美剧原型链上的所有书信那个，过滤这些属性的方式是使用__函数
答案：hasOwnProperty
九、问答题
请实现一个fibonacci（斐波那契数列）函数，要求其参数和返回值如下所示：
/**
*@desc: fibonacci
*@param: count {Number}
*@return: result {Number} 第 count 个 fibonacci 值，计数从 0 开始
fibonacci 数列为：[1, 1, 2, 3, 5, 8, 13, 21, 34 „]
则 getNthFibonacci(0)返回值为 1
则 getNthFibonacci(4)返回值为 5
*/
function getNthFibonacci(count) {
}
答案：
//使用递归
function getNthFibonacci(count){
if(count<=1){
return 1;
}
return getNthFibonacci(count-1)+getNthFibonacci(count - 2);
}
//使用循环
function getNthFibonacci(count) {
if(count<0) return;
if(count === 0) return 1;
//将 x 初始值设为 0，表示当前项的前一项，y 初始值设为 1，表示当前项。
var x = 0,y = 1,result = 1;
for(var i = 0;i<count;i++){
//当 x = y 时，y = x+y
[x,y] = [y,x+y];
result = y;
}
return result;
}
十、填空题
输出对象中值大于2的key的数组
var data={a:1,b:2,c:3,d:4}
Object.keys(data).filter(function(x) { return _ ;})
期待输出：[‘c’,‘d’]
答案：data[x]>2;
十一、填空题
填写内容让下面代码支持a.name=‘name1’;b.name=‘name2’
function obj(name){
___
}
obj._='name2';
var a = obj('name1');
var b=new obj;
答案：if(name){this.name=name;}return this; prototype.name
十二、填空题
javascript语言特性中，有很多方面和我们接触的其他变成语言不太一样，比如说，js实现继承机制的核心就是，而不是java那样的类式继承。js解析引擎在读取一个Object的属性的值时，会沿着向上寻找，如果最终没有找到，则该属性值为；如果找到该属性的值，则返回结果。与这个过程不同的时，当js解析引擎执行“给一个Object的某个属性赋值”的时候，如果当前Object存在该属性，则改写该属性的值，如果当前的Object本身并不存在该属性，则赋值该属性的值。
答案：prototype 原型链 undefined
十三、单选题
下面有关html的描述，不推荐的是？
A：在页面顶部添加doctype声明
B：在…中间插入HTML代码
C：避免使用font标签
D：使用table元素展现学生成绩表等数据
答案：B
十四、单选题
下面关于CSS布局的描述，不正确的是？
A：块级元素实际占用的宽度与他的width属性有关
B：块级元素实际占用的宽度与他的border属性有关
C：块级元素实际占用的宽度与他的padding属性有关
D：块级元素实际占用的宽度与他的background属性有关
答案：D
十五、单选题
下列事件哪个不是由鼠标触发的事件（）
A：click
B：contextmenu //目前所有的主流浏览器都不支持，当用户右击元素时将显示上下文菜单
C：mouseout
D：keydown
答案：D
十六、问答题
js如何获取和设置cookie
答案：
//写入cookie
function setCookie(name, value, expires, path, domain, secure) {
//name:名称,value:属性，expires：有效期，path：路径，domain：域，secure：安全性
//encodeURIComponent() 函数可把字符串作为 URI 组件进行编码
var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
//instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上
if (expires instanceof Date) {
cookieText += ';expires=' + expires;
}
if (path) {
cookieText += ';expires=' + expires;
}
if (domain) {
cookieText += ';expires=' + domain;
}
if (secure) {
cookieText += 'secure';
}
//写入cookie
document.cookie = cookieText;
}
// 获取cookie
function getCookie(name) {
var cookieName = encodeURIComponent(name) + '=';
// 用cookie.indexOf检测cookieName存在不，不存在返回-1
var cookieStart = document.cookie.indexOf(cookieName);
var cookieValue = null;
if (cookieStart > -1) {
// 从上一步的位置开始查找的，直到";"的位置
var cookieEnd = document.cookie.indexOf(';', cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
// substring() 方法用于提取字符串中介于两个指定下标之间的字符。
// substring() 方法返回的子串包括 开始 处的字符，但不包括 结束 处的字符。
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
}
return cookieValue;
}
// 删除cookie
function unsetCookie(name){
document.cookie=name+'=;expires='+new Date(0);
}
十七、问答题
请说说cache-control是怎么回事
答案：
网页的缓存时由HTTP消息头中的“Cache-control”来控制的，常见的取值有private、no-cache、max-age、must-revalidate等，默认为private。Expires头部字段提供一个日期和时间，响应在该日期和时间后被认为失效。允许客户端在这个事件之前不去检查（发请求），等同于max-age的效果。但是如果同时存在，则被Cache-Control的max-age覆盖。
Expires=“Expires”":"HTTP-date
例如：Expires：Thu,01 Dec 1994 16:00:00 GMT(必须是GMT格式)，如果把他设置成-1，则表示立即过期。
Expires 和 max-age 都可以用来指定文档的过期事件，但是二者有一些细微差别
1，Expires在HTTP/1.0中已经定义，Cache-Control:max-age在HTTP/1.1中才有定义，为了向下兼容，仅使用 max-age不够
2，Expires指定一个绝对的过期事件（GMT格式），这么做会导致至少两个问题
2.1 客户端和服务器时间不同步导致Expires的配置出现问题
2.2 很容易在配置后忘记具体的过期时间，导致过期来临出现浪涌现象
3，max-age指定的是从文档被访问后的存活时间，这个时间是个相对值（比如：3600s），相对的是文档第一次被请求时服务器记录的Request_time（请求时间）
4，Expires指定的时间可以是相对文件的最后访问时间（Atime）或者修改时间（Mtime），而max-age相对对的是文档的请求时间（Atime）
5，如果值为no-cache，那么每次都会访问服务器，如果值为max-age，则在过期之前不会重复访问服务器
十八、问答题
介绍一下HTTP状态码
| 状态码 | 描述 |
|---|---|
| 100 Continue | 继续，一般在发送post请求时，已发送了http header之后服务器端返回此信息，表示确认，之后发送具体参数信息 |
| 200 OK | 正常返回信息 |
| 201 Created | 请求成功并且服务器创建了新的资源 |
| 202 Accepted | 服务器已接受请求，但尚未处理 |
| 302 Found | 临时性重定向 |
| 301 Moved Permanently | 请求的网页已永久移动道新位置 |
| 303 See Other | 临时性重定向，且总是使用GET请求新的URL |
| 304 Not Modified | 自从上次请求后，请求的网页未修改过 |
| 400 Bad Request | 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求 |
| 401 Unauthorized | 请求未授权 |
| 403 Forbidden | 禁止访问 |
| 404 Not Found | 找不到如何与URI相匹配的资源 |
| 500 Internal Server Error | 最常见的服务器端错误 |
| 503 Service Unavaillable | 服务器端暂时无法处理请求（可能是过载或维护） |
十九、问答题
js数组去重
答案：
// 有两个地方需要注意：1、返回值是否是当前引用，2、“重复”的判断条件
Array.prototype.uniq=function(){
// 长度只有1，则返回当前的拷贝
if(this.length<=1){
// slice() 方法可从已有的数组中返回选定的元素。
return this.slice(0);
}
var aResult=[];
for(var i = 0,l=this.length;i<l;i++){
if(!_fExist(aResult,this[i])){
aResult.push(this[i]);
}
}
return aResult;
// 判断是否重复
function _fExist(aTmp,o){
if(aTmp.length===0){
return false;
}
var tmp;
for(var i=0,l=aTmp.length;i<l;i++){
tmp=aTmp[i];
if(tmp===o){
return true;
}
// NaN 需要特殊处理
if(!o&&!tmp&&tmp !==undefined&& o!==isNaN(tmp)&&isNaN(o)){
return true;
}
}
return false;
}
}
二十、问答题
如何获取UA //User Agen得简写，意思为用户代理
答案：
function whatBrowser(){
//Navigator 对象包含有关浏览器的信息
document.Browser.Name.value=navigator.appName;
document.Browser.Version.value=navigator.appVersion;
document.Browser.Code.value=navigator.appCodeName;
document.Browser.Agent.value=navigator.userAgent;
}
二十一、问答题
说说对网站重构得理解
答案：网站重构：在不改变外部行为得前提下，简化解构，添加可读性，而在网站前端保持一致得行为。也就是说在不改变UI得情况下，对网站进行优化，在扩展得同时保持一致得UI。对于传统得网站来说重构通常是：
| 序列号 | 描述 |
|---|---|
| 1 | 表格（table）布局改为DIV+CSS |
| 2 | 使网站前端兼容于现代浏览器（针对于不合规范得css，如对IE6有效得） |
| 3 | 对于移动平台得优化 |
| 4 | 针对于SEO进行优化 |
| 5 | 深层次得网站重构应该考虑得方面 |
| 6 | 减少代码见得耦合 |
| 7 | 让代码保持弹性 |
| 8 | 严格按照规范编写代码 |
| 9 | 设计可扩展得API |
| 10 | 代替旧有得框架、语言（如VB） |
| 11 | 增强用户体验 |
| 12 | 通常来说对于速度得优化也包括在重构中 |
| 13 | 压缩JS、CSS、image等前端资源（通常是由服务器来解决） |
| 14 | 程序得性能优化（如数据读写） |
| 15 | 采用CDN来加速资源加载 |
| 16 | 对于JS DOM得优化 |
| 17 | HTTP服务器得文件缓存 |
二十二、问答题
js对象得深度克隆代码实现
答案：
function clone(Obj){
var buf;
if(Obj instanceof Array){
// 创建一个空数组
buf=[];
var i=Obj.length;
while(i--){
buf[i]=clone(Obj[i]);
}
return buf;
}else if(Obj instanceof Object){
// 创建一个空对象
buf={};
// 为这个对象添加新的属性
for(var k in Obj){
buf[k]=clone(Obj[k]);
}
return buf;
}else{
return Obj;
}
}
二十三、问答题
Ajax是什么？Ajax得交互模型？同步和异步得区别？如何解决跨域问题?
答案：
1，AJAX得全称是异步得Javascript和XML，是一种快速创建动态得技术，通过在后台与服务器进行少量数据交互，实现网页得也不更新，在不重新加载整个页面得情况下，做到网页得部分书信；
2，AJAX得交互模型（AJAX得过程）
2.1，用户发出异步请求；
2.2，创建XMLHttpRequest对象；
2.3，告诉XMLHttpRequest对象哪个函数会处理XMLHttpRequest对象状态得改变，为此要把对象得onReadyStateChange属性设置为响应该事件得Javascript函数得引用
2.4，创建请求，用open()指定get还是post，是否异步，url地址；
2.5，发送请求，send()方法；
2.6，接受结果并分析
2.7，实现刷新
3，同步：脚本会停留并等待服务器发送回复后再继续
异步：脚本允许页面继续其进程，并处理可能得回复
4，跨域问题得结局：
4.1，使用document.domain+iframe 解决跨子域问题
4.2，使用window.name
4.3，使用flash
4.4，使用iframe+location.hash
4.5，使用html5得postMessage
4.6，使用jsonp（动态创建script）
二十四、问答题
事件、IE与火狐得事件机制有什么区别？如何阻止冒泡？
答案：1，我们在网页中得某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被js侦测到得行为。
2，事件处理机制：IE是事件冒泡、firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件
3，ev.stopPropagetion();
二十五、问答题
WEB应用从服务器主动推送Data到客户端有哪些方式？
答案：1，html5 websoket
2，WebSocket 通过flash
3，XHR 长时间连接
4，XHR Multipart Streaming
5，不可见得Iframe
6，script标签得长时间里按揭（可跨域）
二十六、问答题
怎么重构页面？
答案：1，编写CSS 2，让页面结构更合理化，提升用户体验 3，
二十七、问答题：
js原型，原型链？有什么特点
答案：1，原型对象也是普通得对象，是对象一个自带隐式得_proto_属性，原型也有可能有自己得原型，如果一个原型对象得原型不为null得话，我们就称之为原型链
2，原型链是由一些用来继承和共享属性得对象组成得（有限得）对象链。
二十八、问答题
node.js得适用场景
答案：1，高并发 2，聊天 3，实时消息推送
二十九、问答题
写一个通用得事件侦听器函数
答案：
// event(事件)工具集
markyun.Event={
// 页面加载完成后
readyEvent:function(fn){
if(fn==null){
fn=document;
}
var oldonload=window.onload;
if(typeof window.onload !='function'){
window.onload=fn;
}else{
window.onload=function(){
oldonload();
fn();
};
}
},
// 视能力分别使用demo0||demo2||IE方式来绑定事件
// 参数：操作得元素，事件名称，事件处理程序
addEvent:function(element,type,handler){
if(element.addEventListener){
// 事件类型、需要执行得函数、是否捕捉
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,function(){
handler.call(element);
});
}else{
element['on'+type]=handler;
}
},
// 移除事件
removeEvent:function(element,type,handler){
if(element.removeEnentListener){
element.removeEnentListener(type,handler,false);
}else if(element.datachEvent){
element.datachEvent('on'+type,handler);
}else{
element['on'+type]=null;
}
},
// 阻止事件（主要是事件冒泡，因为IE不支持事件捕获）
stopPropagetion:function(ev){
if(ev.stopPropagetion){
ev.stopPropagetion();
}else{
ev.cancelBubble=true;
}
},
// 取消事件得默认行为
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
// 获取事件目标
getTarget:function(event){
return event.target||event.srcElement;
},
// 获取Event对象得引用，取到事件得所有信息，确保随时能使用event；
getEvent:function(e){
var ev=e||window.event;
if(!ev){
var c = this.getEvent.caller;
while(c){
ev=c.arguments[0];
if(ev&&Event==ev.constructor){
break;
}
c=c.caller;
}
}
return ev;;
}
};
三十、问答题 eval是做什么得，有什么建议？ 答案：1，他的功能是把对应得字符串解析成JS代码并运行 2，应该避免使用Eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）
三十一、问答题
哪些地方会出现css阻塞，哪些地方会出现js阻塞？
答：
js得阻塞特性：所有浏览器在下载JS得时候，会阻止一切其他活动，比如其他资源得下载，内容得呈现等等，知道js下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验，新一代浏览器其都支持并行下载js，但是js下载仍然会阻塞其他资源得下载（例如图片，css文件等）。
由于浏览器为了防止出现js修改dom树，需要重新构建dom得情况，所以会阻塞其他得下载和呈现
嵌入js会阻塞所有得内容呈现，而外部js只会阻塞其后内容得显示，两种方式哦都会阻塞其后资源得下载。也就说外部样式不会阻塞外部脚本得加载。但会阻塞外部脚本得执行。
Css怎么会阻塞加载了？
css本来是可以并行下载得，在什么情况下会出现阻塞加载了（在测试观察中，ie6下css都是阻塞加载）
当css后面跟着嵌入得js得时候，该css就会出现阻塞后面资源下载得情况。而当把嵌入js放到css前面，就不会出现阻塞得情况了。
根本原因：因为浏览器会维持html中css和js得顺序吗，样式表必须在嵌入得js执行前加载、解析完。而嵌入得js会阻塞后面得资源加载，所以就会出现上面css阻塞下载得情况。
嵌入js应该放在什么位置？
1，放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载
2，如果嵌入js放在head中，请把去嵌入js放在css头部
3，使用defer(只支持ie)
4，不要再嵌入得js中调用运行时间较长得函数，如果一定要用，可以用setTimeout来调用。
js无阻塞加载具体方式：
1，将脚本放在底部，还是放在中，用以保证在js加载前，能加在出正常显示得页面，script标签放在前。
2，阻塞脚本：由于每个script标签下载时阻塞页面解析过程，所以限制页面得script总数也可以改善性能。适用于内联脚本和外部脚本。
3，非阻塞脚本：等页面加载完成后，再加载js代码。也就是，在window.onload事件发出后开始下载代码
4，defer属性：支持ie4和fierfox3.5更高版本浏览器
5，动态脚本元素：文档对象模型（dom）允许你使用js动态创建HTML 得几乎全部文档内容。代码如下：
var script = doucment.reateElement('script');
script.type='text/javascript';
script.scr='file.js';
document.getElementByTagName('head')[0].appendChild(script);
此技术得重点在于：无论在何处启动下载，文件下载和运行都不会阻塞其他页面处理过程，即使在head里（除了用于下载文件得http链接）
三十二、
GET和POST得区别，什么时候使用POST
答：
get一般用于信息获取，使用url传递参数，对所发送信息得数量也有限制，一般在2000个字符
get方式需要使用Request.QueryString来取得变量得值
get通过地址栏来传值
post一般用于修改服务器上得资源，对所发送得信息没有限制
post方式通过Request.Form来获取变量得值
post通过提交表单来传值
在一下情况中，请使用POST请求：
1，无法使用缓存文件（更新服务器上得文件或数据库）
2，向服务器发送大量数据（Post没有数据量限制）
3，发送包含位置字符串得用户输入时，post比get更稳定也更可靠
三十三、
什么是"use strict"（严格模式）？使用他得好处和坏处分别是
答案：ECMAscript 5 添加了第二种运行模式：“严格模式”（strict mode）。顾名思义，这种模式使得 Javascript 在更严格的条件下运行。
设立"严格模式"的目的，主要有以下几个：
\1. 消除 Javascript 语法的一些不合理、不严谨之处，减少一些怪异行为;
\2. 消除代码运行的一些不安全之处，保证代码运行的安全；
\3. 提高编译器效率，增加运行速度；
\4. 为未来新版本的 Javascript 做好铺垫。
注：经过测试 IE6,7,8,9 均不支持严格模式。
缺点：
现在网站的 JS 都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来
是严格模式的文件，被 merge 后，这个串就到了文件的中间，不仅没有指示严格模式，反
而在压缩后浪费了字节。
三十四、 请解释一下js得同源策略 答： 概念：同源策略是客户端脚本（尤其是js）得重要得安全度量标准，他最早出自于Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。 这里得同源策略指的是：协议，域名、端口相同、同源策略是一种安全协议，指一段脚本只能读取来自同一来源得窗口和文档得属性。 为什么要有同源限制： 我们举例说明：比如一个黑客程序，他利用 Iframe 把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过 Javascript 读取到你的表单中 input 中的内容，这样用户名，密码就轻松到手了。
三十五、
Flash、Ajax各自得优缺点，在使用中如何取舍？
答：
flash：
1，flash适合处理多媒体，矢量图形，访问机器
2，对CSS、处理文本上不足，不容易被搜索。
Ajax：
1，Ajax对Css、文本支持很好，支持搜索。
2，多媒体、矢量图形、机器访问不足
共同点：
1，与服务器得无刷新传递消息
2，可以检测用户离线和在线状态
3，操作DOM
三十六、
什么叫做优雅降级和渐进增强？
答案：
1，优雅降级：Web站点在所有心事浏览器中都能正常工作，如果用户使用得是老师浏览器，在代码会检查以确认他们是否能正常工作，由于IE独特得盒模型布局问题。真的对不同版本的IE得hack事件过优雅降级了，为哪些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效\
2，渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
三十七、
哪些操作会造成内存泄漏：
答：
内存泄漏指任何兑现那个在您不再拥有或需要她之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收
1，setTimeout得第一个参数使用字符串而非函数得话，会引发内存泄漏
2，闭包
3，控制台日志
4，循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
三十八、
.call()、.apply()得作用？
答案：
动态改变某个类得某个方法得运行环境
三十九、
现有如下html结构
<ul>
<li>clicke me</li>
<li>clicke me</li>
<li>clicke me</li>
<li>clicke me</li>
<li>clicke me</li>
</ul>
var elements=document.getElementsByTagName('li');
var length = elements.length;
for(var i = 0;i<length;i++){
elements[i].onclick=function(){
alert(i);
}
}
依次点击4个li标签，那个选项是正确得运行结果
答案：依次弹出4，4，4，4
四十、
单选题：
function Foo(){
var i = 0;
return function(){
document.write(i++);
}
}
var f1=Foo();
var f2=Foo();
f1();
f1();
f2();
请问以上程序的输出是（）
A.010
B.012
C.000
D.011
答案：答案：A
这是一个闭包，闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。这里的局部变量 i，对 f1()来说是全局变量，对 f2()来说也是全局变量，但是 f1()的 i 跟f2()的 i 又是相互独立相互不可见的，f1()每执行一次，f1()的 i 就加 1，f2（）每次执行一次，f2()的 i 就加油，但是相互之间不影响，因此结果是 010。
四十一、
以下 Js 程序的输出是什么（）
var a = "undefined";
var b = "false";
var c = "";
function assert(aVar) {
if (aVar)
alert(true);
else
alert(false);
}
assert(a);//true
assert(b);//true
assert(c);//false
unedfined 和 false 都是 Javascript 的数据类型，但是用双引号引起了就不是本身类型了，这是字符串，空串相当于 false，否则是 true
四十二、
JavaScript 定义 var a=“40”,var b=7,则执行 a%b 会得到()；
答案：5
Javascript 是弱类型语言，但是明显字符串“40”不能用于 % 运算符，所以会根据后面的类型进行转化，最后结果是 5。
四十三、
请实现 javascript 中的 indexOf 功能，判断一个字符串 a 中是否包含另一个字符串 b。
a）如果包含，需要返回匹配字符串 b 的位置。
b）如果不包含，需要返回-1。
如：indexOf(“hello”,“el”) return 1。
function indexOf(str, subStr) {
var result = str.match(subStr);
return result ? result.index : -1;
}
或
function indexOf(a, b) {
return a.search(b);
}
四十四、
var myObject = {
foo: "bar",
func: function () {
var self = this;
console.log(this.foo);
console.log(self.foo);
(function () {
console.log(this.foo);
console.log(self.foo);
}());
}
};
myObject.func();
程序的输出是什么？
A.bar bar bar bar
B.bar bar bar undefined
C.bar bar undefined bar
D.undefined bar undefined bar
答案：C
理解关键：方法/函数是由谁(对象) 调用 的，方法/函数内部的 this 就指向谁(该对象)；注意：被谁调用，不是处于谁的作用域，即使在作用域
1、func 是由 myObject 调用的，this 指向 myObject。
2、self 指向 myObject，相当于 myObject 的 this 的副本。
3、这个立即执行匿名函数表达式（IIFE）是由 window 调用的，this 指向 window 。
4、IIFE 的作用域处于 myObject.func 的作用域中，本作用域找不到 self 变量，沿着作用域链向上查找 self 变量，找到了指向 myObject 对象的 self
四十五、
下面关于 IE、FF 下面脚本的区别描述错误的是？
A.innerText IE 支持，FIREFOX 不支持
B.document.createElement FIREFOX 支持，IE 不支持
C.setAttribute(‘class’，‘styleClass’) FIREFOX 支持，IE 不支持
D.用 setAttribute 设置事件 FIREFOX 不支持，IE 支持
答案：A对，B错，C对，D
四十六、
下面有关 JavaScript 中 call 和 apply 的描述，错误的是？
A.call 与 aplly 都属于 Function.prototype 的一个方法，所以每个 function 实例都有 call、apply 属性
B.两者传递的参数不同，call 函数第一个参数都是要传入给当前对象的对象，apply 不是 C.apply 传入的是一个参数数组，也就是将多个参数组合成为一个数组传入
D.call 传入的则是直接的参数列表。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
答案：B
call（）方法和 apply（）方法的作用相同，他们的区别在于接收参数的方式不同。对于call（），第一个参数是 this 值没有变化，变化的是其余参数都直接传递给函数。（在使用 call（）方法时，传递给函数的参数必须逐个列举出来。使用 apply（）时，传递给函数的是参数数组）如下代码做出解释：
function add(c, d){
return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
四十七、
下面哪些方法可以用作 javascript 异步模式的编程？
A.回调函数
B.事件监听
C.发布/订阅
D.Promises 对象
答案：ABCD
四十八、
下面有关 javascript 常见事件的触发情况，描述错误的是？
A.onmousedown：某个鼠标按键被按下
B.onkeypress：某个键盘的键被按下或按住
C.onblur：元素获得焦点
D.onchange：用户改变域的内容
答案：c
onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后，产生该文件
onchange:当文字值改变时，产生该事件
onselect:当文字加亮后，产生该事件
onClick：当组件被点击时产生的事件
四十九、
下面有关 javascript 内部对象的描述，正确的有？
A.History 对象包含用户（在浏览器窗口中）访问过的 URL
B.Location 对象包含有关当前 URL 的信息
C.Window 对象表示浏览器中打开的窗口
D.Navigator 对象包含有关浏览器的信息
答案：abcd
Navagator：提供有关浏览器的信息。
Window：Window 对象处于对象层次的最顶层，它提供了处理 Navagator 窗口的方法和属性。
Location：提供了与当前打开的 URL 一起工作的方法和属性，是一个静态的对象。
History：提供了与历史清单有关的信息。Document：包含与文档元素一起工作的对象，它将这些元素封装起来供编程人员使用。
五十、[单选题]
下面有关 javascript 系统方法的描述，错误的是？
A.parseFloat 方法：该方法将一个字符串转换成对应的小数
B.isNaN 方法：该方法用于检测参数是否为数值型，如果是，返回 true，否则，反回 false。
C.escape 方法： 该方法返回对一个字符串编码后的结果字符串
D.eval 方法：该方法将某个参数字符串作为一个 JavaScript 执行
答案：B
NaN,即非数值（Not a Number）是一个特殊的数值，这个数值用来表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）。针对 NaN 的特点，ECMAScript 定义了 isNaN（）函数。这个函数接受一个参数，该参数可以是任何类型，而函数会帮我们确定这个参数是否“不是数值”。isNaN（）在接受一个值后，会尝试将这个值转换为数值。某些不是数值的值会直接转换为数值，例如字符串“10” 或 Boolean 值。而任何不能被转换为数值的值都会导致这个函数返回 true。
五十一、
下面符合一个有效的 javascript 变量定义规则的是？ A._ 2 B.with C.a bc D.2a
答案：A
五十二、
下面属于 javascript 基本数据类型的有？ A.字符串 B.数字 C.null D.undefined
答案：abcd
ECMAScript 中有 5 个简单数据类型（也成为基本数据类型）: Undefined、Null、Boolean、Number 和 String。还有一种复杂数据类型-Object，Object 本质上是由一种无序的名值对组成的
五十三、
js 中字符串连接用那个比较高效？ A.a+=b B.a = a+b C.Array.join() D.Array.push()
答案：C，javascript 中字符串连接时用 Array.join()替换 string += “xx”，换来几十倍的速度提升。
五十四、
// 请给出这段代码的运行结果（）
var bb = 1;
function aa(bb) {
bb = 2;
alert(bb);
};
aa(bb);
alert(bb);
A.1 1 B.1 2 C.2 1 D.2 2
答案：C
ECMAScript 中所有函数的参数都是按值传递的。也就是说，把函数外部的值复制给函数内部的参数，就和把一个值从一个变量复制到另外一个变量一样。基本类型的传递如同基本类型变量的复制一样，而引用类型值的传递，则如同引用类型变量的复制一样。在向参数传递基本类型的值时，被传递的值会被复制给一个局部变量（即命名参数，或者用 ECMAScript 的概念来说，就是 arguments 对象中的一个元素）。在向参数传递引用类型的值时，会把这个值在内存中的地址复制给一个局部变量，因此这个局部变量的变化会反映在函数的外部。
五十五、
// 下面这个 JS 程序的输出是什么：
function Foo() {
var i = 0;
return function () {
console.log(i++);
}
}
var f1 = Foo(),
f2 = Foo();
f1();
f1();
f2();
A.0 1 0 B.0 1 2 C.0 0 0 D.0 0 2
答案：A
五十六、单选题
在 文 件 /home/somebody/workspace/somemodule.js 中 第 一 行 引 用 了 一 个 模 块 ：require(‘othermodule‘)，请问 required 的查找模块的顺序
A. /home/somebody/workspace/mode_modules/othermodule/index.js
B. /home/somebody/workspace/mode_modules/othermodule. Js
C.CORE MODULES named othermodule
D./home/somebody/mode_modules/othermodule/index.js
A.C D A B B.C B D A C.C B A D D.C D B A
答案：C
(1):首先，Node 在当前目录下查找 package.json(CommonJS 包规范定义的包描述文件)，通过 JSON.parse()解析出包描述对象，从中取出 main 属性指定的文件名进行定位。如果文件缺少扩展名，将会进入扩展名分析的步骤。 (2):而如果 main 属性制定的文件名错误，或者压根没有 package.json 文件，Node 会将index 当做默认文件名，然后依次查找 index.js、index.node、index.json. (3):如果在目录分析的过程中没有定位成功任何文件，则自定义模块进入下一个模块路径进行查找。如果模块路径数组都被遍历完毕，依然没有查找到目标文件，则会抛出查找失败异常。 按照上面的思路，首先应该查找 package.json 文件，看看里面有没有核心模块，应该是C 最先，othermodule 不是核心模块，那么接着应该进入扩展名分析的步骤，就应该是查找othermodule. js对应 B，紧接着就是以 index 为默认文件名，也就是 A，再接下来就是上一个文件目录 D 了
五十七、
下面哪些方式可以用于 javascript 延迟加载？
A.通过 ajax 下载 js 脚本，动态添加 script 节点
B.通过监听 onload 事件，动态添加 script 节点
C.直接将 script 节点放置在之前，这样 js 脚本就会在页面显示出来之后再加载
D.使用 script 标签的 defer 和 async 属性
答案：ABD
五十八、
如下代码输出的结果是什么：
console.log(1+ “2”+“2”);
console.log(1+ +“2”+“2”);
console.log(“A”- “B”+“2”);
console.log(“A”- “B”+2);
答案：C
1， console.log(1+ “2”+“2”);做加法时要注意双引号，当使用双引号时，JavaScript 认为是字符串，字符串相加等于字符串合并。因此，这里相当于字符串的合并，即为
2.console.log(1+ +“2”+“2”);第一个+"2"中的加号是一元加操作符，+"2"会变成数值 2，因此 1+ +“2"相当于 1+2=3.然后和后面的字符串“2”相合并，变成了字符串"32”.
3.console.log(“A”- “B”+“2”);“A”-“B"的运算中，需要先把"A"和"B"用 Number 函数转换为数值，其结果为 NaN，在剪发操作中，如果有一个是 NaN，则结果是 NaN，因此"A”-"B"结果为 NaN。然后和"2"进行字符串合并，变成了 NaN2.
4.console.log(“A”- “B”+2);根据上题所述，“A”-"B"结果为 NaN，然后和数值 2 进行加法操作，在加法操作中，如果有一个操作数是 NaN，则结果为 NaN。
五十九、
下面有关浏览器中使用 js 跨域获取数据的描述，说法错误的是？
A.域名、端口相同，协议不同，属于相同的域
B.js 可以使用 jsonp 进行跨域
C.通过修改 document.domain 来跨子域
D.使用 window.name 来进行跨域
答案：A只要协议 、域名 、端口有任何一个不同, 都被当作是不同的域。
六十、
// 阅读下列程序， 写出 x， y， z 最后的值。
var x = 1,
y = z = 0;
function add(n) {
return n = n + 1;
}
y = add(x);
function add(n) {
return n = n + 3;
}
z = add(x);
答案：
x=1 y=4 z=4
js 的预编译会将 function add(n){ return n = n + 3;}去覆盖前面的 add 方法。var y = z = 0这里面 z 变量会变为 window.z=0;这里需要注意的
六十一、
如何规避js多人开发函数重名问题
A，根据不同开发人员实现得功能，在函数名加前缀
B，每个开发人员都把自己得函数封装到类中，然后调用得时候即使函数名相同，但是因为是要类.函数名来调用，所以也减少了重复得可能行。
C，以上都不正确
答案：AB
六十二、
下列js可以让一个input得背景颜色变成红色的是？
A，inputElement.style.backgroundColor=‘red’
B，inputElement.backgroundColor=‘red’
C，inputElement.style.backgroundColor=’#0000’
D，inputElemenet.backgoundColor=’#0000’
答案：A
六十三、
下列关于比较Ajax与Falsh得优缺点，相关描述正确得是
A，Ajax得优势在于可搜索行，开放性你，易用性及容易开发
B，Falsh得优势在于多媒体处理，可以更容易得调用浏览器意外得外部资源
C，Ajax最主要得批评就是她可能破坏浏览器得后退功能
D，falsh文件经常会很大，用户第一次使用得时候需要忍耐较长得等待时间
答案：ABCD
1，Ajax得优势：可搜索性，开放性，费用，易用性，易于开发
2，falsh得优势：多媒体处理，兼容性，矢量图形，客户端资源调度
3，Ajax得劣势：可能破坏浏览器得后退功能，使用动态页面更新使得用户难于将某个特定得状态保存到收藏夹中，不过这些都有相关方法解决
4，Falsh得劣势：二进制格式、格式私有、falsh文件经常会很大，用户第一次使用得时候需要忍耐较长得等待时间、性能问题
六十四、
下面哪些语句可以在 JS 里判断一个对象 oStringObject 是否为 String。
A.oStringObject instanceof String
B.typeof oStringObject == ‘string’
C.oStringObject is String
D.以上答案都不正确
答案：A
通常来说判断一个对象的类型使用typeof，但是在new String的情况下的结果会是object 此时需要通过 instanceof 来判断
六十五、
flash 和 js 通过什么类如何交互?
A.ExtensionContex
B.ExternalInterface
C.IInterpolator
D.FlexContentHolder
答案：B
Flash 提供了 ExternalInterface 接口与 JavaScript 通信，ExternalInterface 有两个方法，call和 addCallback，call 的作用是让 Flash 调用 js 里的方法，addCallback 是用来注册 flash 函数让js 调用。
六十六、
Flappy Bird 是风靡一时的手机游戏，玩家要操作一只小鸟穿过无穷无尽的由钢管组成的障碍。如果要你在 HTML 前端开发这个游戏，为了保证游戏的流畅运行，并长时间运行也不会崩溃，请列举开发要注意的性能问题和解决的方法。
答案：
1.长时间运行会崩溃的原因就是‘内存泄漏’。我们在日常的 JS 程序中并不太在意内存泄漏问题，因为 JS 解释器会垃圾回收机制，大部分无效内存会被回收，另一方方面 JS 运行在客户端，即使出现内存泄漏也不是太大的问题，简单的刷新页面即可。但是，如果出现要预防内存泄漏的场景还是要注意一些问题。
2.针对这个场景来说，即时长期运行出现内存泄漏可能还是很低。第一方面，数据量很少，水管维护一个数组即可，然后每隔一段时间更新数组，来达到水管长度不同的效果。小鸟只要维护一个对象即可。通过移动水管检查碰撞来就可以实现游戏逻辑。因为在浏览器端，JS 程序和页面 UI 渲染共用一条线程，如果计算时间过长会使渲染阻塞，在 HTML5 中利用webworker 已经可以开辟一个新线程专门负责计算解决这个问题了。
3.背景的卷轴效果优化。背景不能是无限长的图片拼接，必须有回收已移出的场景的方法。将复杂运算从主 UI 线程中解耦。比如场景中小鸟的运动轨迹、碰撞算法等，需要在空闲时间片运算，不能和 UI 动画同时进行。将比较大的运算分解成不同的时间片，防止阻塞主 UI 线程。最好使用 webworker。注意内存泄漏和回收。使用对象池管理内存，提高内存检测和垃圾回收。进行预处理。将一些常用的过程进行预处理，控制好帧率。将 1 秒分解成多个时间片，在固定间隔时间片进行 UI 动画，其他时间片用在后台运算。通过 GPU 加速和 CSS transition 将小鸟飞行动画和背景动画分离
六十七、
用 javascript 实现用户登录验证的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#" id="form1" method="get">
<input type="text" name="text1" value="" placeholder="name">
<input type="password" name="pwd" value="" placeholder="密码">
<input type="submit" name="text3" value="submit" onclick="submitonclick()">
</form>
<script>
function submitonclick(){
var form1=document.getElementById('form1');
if(form1.text1.value==''){
alert('用户名不能为空');
form1.text1.focus();
return;
}
if(form1.text1.value.length<6||form1.text1.value.length>10){
alert("用户名不能少于六个字符，不能超过十个字符");
form1.text1.focus();
return;
}
if(form1.pwd.value==''){
alert('密码不能为空');
form1.pwd.focus();
return;
}
if(form1.pwd.value.length<6||form1.pwd.value.length>10){
alert("密码不能少于六个字符，不能超过十个字符")
form1.pwd.focus();
return;
}
var str ="用户名："+form1.text1.value+'<br>'+"密码"+form1.pwd.value+'<br>';
document.write(str);
}
</script>
</body>
</html>
六十八、
请说明下面各种情况的执行结果，并注明产生对应结果的理由。
function doSomething() {
alert(this);
}
① element.onclick = doSomething，点击 element 元素后。
② element.onclick = function() {doSomething()}， 点击 element 元素后。
③ 直接执行 doSomething()。
答案：
①弹出 element object，通过函数赋值方式，this 直接指向 element 对象
②弹出 window object，this 是写在 doSomething 这个函数里面的，而这种方式的事件绑定写法并没有将 element 对象传递给 this，而在默认情况下 this 指向 window
③弹出 window object，没有绑定对象的情况下 this 默认指向 window
六十九、
请用 JavaScript 语言实现 sort 排序函数，要求：sort([5, 100, 6, 3, -12]) // 返回 [-12, 3, 5, 6, 100],如果你有多种解法，请阐述各种解法的思路及优缺点。（仅需用代码实现一种解法，其它解法用文字阐述思路即可）
/*快速排序实现方法*/
function quickSort(arr) {
//长度少于 1 直接返回
if (arr.length <= 1) {
return arr;
}
var less = new Array();
var greater = new Array();
//选择一个值做为基准
var pivotIndex = Math.floor(arr.length / 2);
var pivot = arr.splice(pivotIndex, 1)[0];
//遍历数组
for (var i = 0; i < arr.length; i++) {
if (arr[i] < pivot) {
less.push(arr[i]);
} else {
greater.push(arr[i]);
}
}
//递归调用返回排序好的数组
return quickSort(greater).concat([pivot], quickSort(less));
}
七十、
请根据下面的描述，用 JSON 语法编写一个对象: “小明今年 22 岁，来自杭州。兴是看电影和旅游。他有两个姐姐，一个叫小芬，今年 25 岁，职业是护士。还有一个叫小芳，今年 23 岁，是一名小学老师。”
var person = ?
var person = {
name:"小明",
from:"杭州",
interest:["电影","旅游"],
sisters:[
{ name:"小芬", age:25, occupation:"护士"},
{ name:"小芳", age:23, occupation:"小学老师"}
]
}
七十一、
请给Array本地对象增加一个原型方法，它用于删除数组条目中重复的条目(可能有多个)，返回值是一个包含被删除的重复条目的新数组。
Array.prototype.distinct = function () {
var ret = [];
for (var i = 0; i < this.length; i++) {
for (var j = i + 1; j < this.length;) {
if (this[i] === this[j]) {
ret.push(this.splice(j, 1)[0]);
} else {
j++;
}
}
}
return ret;
}
//for test
alert(['a', 'b', 'c', 'd', 'b', 'a', 'e'].distinct());
七十二、
请把以下用于连接字符串的 JavaScript 代码修改为更有效率的方式
var htmlString = "<div class="container">" + "<ul id="news-list">";
for (var i = 0; i < NEWS.length; i++) {
htmlString += "<li><a href=”"
\+ NEWS[i].LINK + ">"
\+ NEWS[i].TITLE + "</a></li>";
}
htmlString += "</ul></div>";
答案：
JavaScript 赋值效率问题
var htmlString = "<div class=”container”>" + "<ul id=”news-list”>";
for (var i = 0; i < NEWS.length; i++) {
var newsItem = NEWS[i];
htmlString += "<li><a href=”" + newsItem.LINK + ">"+ newsItem.TITLE + "</a></li>";
}
七十三、
请编写一个 JavaScript 函数 parseQueryString，它的用途是把 URL 参数解析为一个对象，如：var url = “http://www.taobao.com/index.php?key0=0&key1=1&key2=2…”var obj = parseQueryString(url);alert(obj.key0) // 输出 0
var url="http://www.taobao.com/index.php?key0=0&key1=1&key2=2.............";
var obj=parseQueryString(url);
alert(obj.key2);
function parseQueryString(argu){
var str=argu.split('?')[1];
var result={};
var temp=str.split('&');
for(var i = 0;i<temp.length;i++){
var temp2=temp[i].split('=');
result[temp2[0]]=temp2[1];
}
return result;
}
七十四、 请给 JavaScript 的 String 原生对象添加一个名为 trim 的原型方法，用于截取空白字符。要求 alert(" taobao".trim()); // 输出 "taobao" alert(" taobao ".trim()); // 输出 "taobao
//版本一、速度最快
String.prototype.trim = function () {
var str = this;
var
whitespace = '\n\r\t\f\x0b\xa0\u2001\u2002\u2003\n\u2004\u2005\u2006\u2007\u2008\u
2009 \u200a\u200b\u2028\u2029\u3000 ';
for (var i = 0; i < str.length; i++) {
if (whitespace.indexOf(str.charAt(i)) == -1) {
str = str.substring(i);
break;
}
}
for (i = str.length - 1; i >= 0; i--) {
if (whitespace.indexOf(str.charAt(i)) == -1) {
str = str.substring(0, i + 1);
break;
}
}
return whitespace.indexOf(str.charAt(0)) === -1 ? str : '';
}
//版本二、速度也很快
String.prototype.trim = function () {
var str = this;
str.replace(/^\s+/, '');
for (var i = str.length - 1; i >= 0; i++) {
if (/\S/.test(str.charAt(i))) {
str = str.substring(0, i + 1);
break;
}
}
return str;
}
//版本三 很通用
String.prototype.trim = function () {
var str = this;
return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}
七十五、
下面是个输入框当没有获取焦点时，显示灰色的提示信息：当用户输入时，隐藏提示文字，且恢复为默认色：当输入框失去焦点，如果输入为空，需还原提示信息：要求： a) 写出 HTML 和 CSS 代码 b) 用 JavaScript 实现功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#content {
color: grey;
}
</style>
</head>
<body>
<input type="text" id="content" value="请输入内容">
<script>
var input = document.getElementById("content");
input.onfocus = function () {
if (this.value == "请输入内容") {
this.value = "";
this.style.color = "black";
}
}
input.onblur = function () {
if (this.value == "") {
this.style.color = "grey";
this.value = "请输入内容";
}
}
</script>
</body>
</html>
七十六、
请编写一个通用的事件注册函数（请看下面的代码）。
function addEvent(element, type, handler){
// 在此输入你的代码，实现预定功能
}
答案：
function addEvent(ele,type,handler){
if('addEventLister' in window){
ele.addEventLister(type,handler,lalse);
}else if('attachEvent' in window){
ele.attachEvent('on'+type,function(){
handler.call(ele);
});
}else{
ele['on'+type]=handler;
};
}
七十七、
请编写一段 JavaScript 脚本生成下面这段 DOM 结构。要求：使用标准的 DOM 方法或属性。
<div id=”example”>
<p class='slogan'>
淘，你喜欢
</p>
</div>
window.onload=function(){
var div=document.createElement('div');
div.id='example';
var p=document.createElement('p');
p.className='slogan';
p.innerHTML='讨你喜欢';
div.appendChild(p);
document.body.appendChild(div);
}
七十八、
请分别列出 HTML、JavaScript、CSS、Java、php、python 的注释代码形式。
答案：
<!-- HTML 注释 -->
// JavaScript 注释
/*
* JavaScript 多行注释
*/
/* CSS 注释 */
// Java 注释
/**
* Java 多行注释
*/
// php 单行注释
# php 单行注释
/**
* php 多行注释
*/
# Python 单行注释
'''
Python 多行注释
'''
七十九、
实现一个所见即所得编辑器. 需提供以下功能： 1. 字体加粗； 2. 文本左对齐、右对齐、居中 3. 设置字体； \4. 设置字号； \5. 设置字体颜色； \6. 插入超链接； \7. 插入图片。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>富文本编辑器</title>
<script src="script/dialog.js"></script>
<script>
window.onload = function () {
var editor = document.getElementById("editor").children[0];
function setBtn(id, styleName) {
var elm = document.getElementById(id);
elm.onclick = function () {
editor.style[styleName] = setting[id] = !setting[id] ? id : "";
}
}
//setBtn("bold", "fontWeight");
setBtn("left", "textAlign");
setBtn("center", "textAlign");
setBtn("right", "textAlign");
function setMenu(id, styleName) {
var elm = document.getElementById(id);
function change() {
editor.style[id] = elm.value || elm.children[elm.selectedIndex].innerHTML;
}
change();
elm.onchange = change;
}
setMenu("color");
setMenu("fontSize");
setMenu("fontFamily");
function setChecked(id, styleName) {
var elm = document.getElementById(id);
function change() {
editor.style[elm.name] = elm.checked ? this.value : "";
}
change();
elm.onchange = elm.onpropertychange = change;
}
setChecked("bold");
setChecked("left");
setChecked("center");
setChecked("right");
var link = document.getElementById("link"),
img = document.getElementById("img");
document.getElementById("img").onclick = function () {
var url = prompt("请输入图片 url", "http://"),
img;
if (url) {
img = new Image();
img.src = url;
editor.appendChild(img)
}
}
document.getElementById("lnk").onclick = function () {
var url = prompt("请输入链接 url", "http://"),
lnk;
if (url) {
lnk = document.createElement("a");
lnk.href = url;
lnk.innerHTML = prompt("请输入链接文字或者点击取消", "") || url;
editor.appendChild(lnk)
}
}
};
</script>
<link href="style/base.css" rel="stylesheet" type="text/css">
<style type="text/css">
#wrap {
padding: 100px;
}
#wrap p {
padding-bottom: 20px;
line-height: 30px;
}
#wrap p * {
vertical-align: middle;
}
button {
padding: 0 10px;
}
#editor {
border: 2px inset #ccc;
font-family: SimSun;
overflow: hidden;
cursor: text;
margin: auto;
}
#editor div {
height: 500px;
outline: none;
padding: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<p>
对齐方式：
<input type="radio" id="left" name="textAlign" value="left" checked>
<label for="left">左对齐</label>
<input type="radio" id="center" name="textAlign" value="center">
<label for="center">居中对齐</label>
<input type="radio" id="right" name="textAlign" value="right">
<label for="right">右对齐</label>
<input type="checkbox" id="bold" name="fontWeight" value="bold">
<label for="bold"><b>字体加粗</b></label>
<button id="lnk">插入超链接</button>
<button id="img">插入图片</button>
<br>
设置字体
<select id="fontFamily">
<option value="SimSun" selected>宋体</option>
<option value="NSimSun" selected>新宋体</option>
<option value="SimHei" selected>黑体</option>
<option value="FangSong">仿宋</option>
<option value="FangSong_GB2312">仿宋_GB2312</option>
<option value="KaiTi">楷体</option>
<option value="KaiTi_GB2312">楷体_GB2312</option>
</select>
设置字号
<select id="fontSize">
<option selected>12px</option>
<option>14px</option>
<option>16px</option>
<option>18px</option>
<option>20px</option>
</select>
设置字体颜色:
<select id="color">
<option selected>black
<option>silver</option>
<option>gray</option>
<option>white</option>
<option>maroon</option>
<option>red</option>
<option>purple</option>
<option>fuchsia</option>
<option>green</option>
<option>lime</option>
<option>olive</option>
<option>yellow</option>
<option>navy</option>
<option>blue</option>
<option>teal</option>
<option>aqua</option>
</select>
</p>
<div id="editor">
<div contentEditable></div>
</div>
</div>
</body>
</html>
八十、
请编写一个 JavaScript 函数，它的作用是校验输入的字符串是否是一个有效的电子邮件地址。要求： a) 使用正则表达式。 b) 如果有效返回 true ，反之为 false。
答案：
function isEmail(emailstr){
var reg=/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/i;
return reg.test(emailstr);
}
八十一、
尝试实现注释部分的 Javascript 代码，可在其他任何地方添加更多代码（如不能实现，说明一下不能实现的原因）：
var Obj = function (msg) {
this.msg = msg;
this.shout = function () {
alert(this.msg);
}
this.waitAndShout = function () {
//隔五秒钟后执行上面的 shout 方法
}
}
var Obj = function (msg) {
this.msg = msg;
this.shout = function () {
alert(this.msg);
}
this.waitAndShout = function () {
var that = this;
setTimeout(that.shout, 5000);
//隔五秒钟后执行上面的 shout 方法
}
return this;
}
Obj("shouting").waitAndShout();
八十二、
在页面上实现一个二级菜单控件
1，这个控件可以绑定到页面上的任意一个元素，当点击页面元素出现菜单；
2，菜单出现的方向根据所在页面的位置自动进行调整，例如：
3， 一级菜单中的元素，鼠标划过后，将会在相应的位置出现二级菜单，二级菜单中的元素点击将会有事件响应。
八十三、
请编写一个 JavaScript 函数 toRGB，它的作用是转换 CSS 中常用的颜色编码。 要求： alert(toRGB("#0000FF")); // 输出 rgb(0, 0, 255)
alert(toRGB(“invalid”)); // 输出 invalid
alert(toRGB("#G00")); // 输出 #G00
function toRGB(color) {
var regex = /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
match = color.match(regex)
return match ? 'rgb(' + parseInt(match[1], 16) + ',' + parseInt(match[2],
16) + ',' + parseInt(match[3], 16) + ')' : color
}
八十四、
实现 input 输入框的自动匹配
1，对 input 框中输入的字符进行匹配，将匹配到的内容以菜单的形式展现在 input 框的下方； 2. 只针对英文字符进行匹配，并且匹配到的内容在菜单中加粗； 3. 通过键盘上的上下箭头可以对菜单进行选择，按下回车后将选中的内容写入到 input 框中；
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>文本框自动补全</title>
<script src="../script/base.js"></script>
<script>
document.createElement("datalist");
function autocomplete(textbox) {
var $ = window.gucong;
textbox = document.querySelector(textbox);
var datalist = document.getElementById(textbox.getAttribute("list"));
optList = datalist.children;
datalist = document.createElement("ul");
$.each(optList, function () {
var li = document.createElement("li");
li.setAttribute("label", this.getAttribute("label"));
li.setAttribute("value", this.getAttribute("value"));
datalist.appendChild(li);
});
textbox.setAttribute("list", "");
$.addClass(datalist, "datalist");
document.documentElement.appendChild(datalist);
textbox.autocomplete = "off";
textbox.addEventListener("keydown", function (e) {
switch (e.keyCode) {
case 38: // up
e.preventDefault();
moveSelect(-1);
break;
case 40: // down
e.preventDefault();
moveSelect(1);
break;
case 9: // tab
case 13: // return
var opt = datalist.querySelector(".highlight");
if (opt) {
selectOpt(opt)
e.preventDefault();
return false;
}
break;
default:
window.setTimeout(onChange, 0);;
}
}, true);
textbox.addEventListener("input", onChange, false);
textbox.addEventListener("blur", function () {
datalist.style.display = "none";
}, false);
function onChange() {
if (textbox.value) {
optList = [];
var match = new RegExp(textbox.value, "ig"),
pos = $.findPos(textbox),
count = 0;
$.each(datalist.children, function () {
var str = this.getAttribute("label");
if (match.test(str)) {
this.innerHTML = str.replace(match, function (str) {
return "<b>" + str + "</b>"
});
this.style.display = "block";
optList[count] = this;
count++;
} else {
this.style.display = "none";
}
});
datalist.style.display = count ? "block" : "none";
datalist.style.left = pos.x + "px";
datalist.style.top = pos.y + textbox.offsetHeight + "px";
} else {
datalist.style.display = "none";
}
}
function filter(elm) {
return /li/i.test(elm.tagName) ? elm : null;
}
function moveSelect(setp) {
var sel = datalist.querySelector(".highlight"),
index;
if (sel) {
$.each(optList, function (i) {
if (sel == this) {
index = i;
return false;
}
});
} else {
index = optList.length * -setp;
}
index += setp
if (index < 0) {
index = 0;
} else if (index >= optList.length) {
index = optList.length - 1;
}
hoverOpt(optList[index]);
}
function selectOpt(elm) {
elm = filter(elm);
if (elm) {
textbox.value = elm.getAttribute("value");
}
datalist.style.display = "none";
}
function hoverOpt(elm) {
elm = filter(elm);
$.each(datalist.children, function () {
if (this == elm) {
$.addClass(this, "highlight");
} else {
$.delClass(this, "highlight");
}
});
}
datalist.addEventListener("mouseover", function (e) {
hoverOpt(e.target);
});
datalist.addEventListener("click", function (e) {
selectOpt(e.target);
});
}
document.realy(function ($) {
autocomplete("input");
});
</script>
<link href="style/base.css" rel="stylesheet" type="text/css">
<style type="text/css">
#wrap {
padding: 100px;
}
.datalist {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
box-shadow: 2px 2px 2px #777;
border: 1px solid black;
background: window;
position: absolute;
overflow: hidden;
cursor: default;
color: menutext;
z-index: 99999;
display: none;
font: menu;
padding: 0;
margin: 0;
behavior: url("PIE.htc");
}
:root .datalist {
behavior: none;
-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
}
.datalist li {
line-height: 20px;
list-style: none;
font-size: 14px;
padding: 0 10px;
display: block;
}
.datalist li.highlight {
background: highlight;
color: highlighttext;
}
</style>
</head>
<body>
<div id="wrap">
<input type="email" list="url_list" autofocus>
<datalist id="url_list">
<option label="gucong@gmail.com" value="mailto:gucong@gmail.com" />
<option label="gucongbbs@163.com" value="mailto:gucongbbs@163.com" />
<option label="gucong.student@sina.com" value="mailto:gucong.student@sina.com" />
<option label="gucong520@hotmail.com" value="mailto:gucong520@hotmail.com" />
<option label="gucong@foxmail.com" value="mailto:gucong@foxmail.com" />
<option label="35803719@qq.com" value="mailto:35803719@qq.com" />
<option label="64272001@qq.com" value="mailto:64272001@qq.com" />
</datalist>
<br>
请输入 gucong 来作为测试数据
</div>
</body>
</html>
八十五、
阅读以下 JavaScript 代码：
请阐述 a) 代码的功能; b) 代码的优点和缺点; c) listener.apply(el) 在此处的作用; d) 如果有可改进之处，请给出改进后的代码，并说明理由。
if (window.addEventListener) {
var addListener = function (el, type, listener, useCapture) {
el.addEventListener(type, listener, useCapture);
};
} else if (document.all) {
addListener = function (el, type, listener) {
el.attachEvent("on" + type, function () {
listener.apply(el);
});
};
}
答案：
1、事件绑定的一个简单函数封装；
2、优点：函数封装可随时引用，没有解决兼容性的问题；缺点：代码冗余
3、作用是改变 this 指向的问题，不用则指向 window 而不是调动它的事件对象
function bind(obj, evname, fn) {
if (obj.addEventListener) {
obj.addEventListener(evname, fn, false);
} else {
obj.attachEvent('on' + evname, function () {
fn.apply(obj);
});
}
}
八十六、
用 js、html、css 实现一个弹出提示控件
1，分别实现类似于系统的 alert、confirm、prompt 对话框；
2， 对话框大小根据提示内容进行自适应（有一个最小宽高），默认出现在页面的水平垂直居中的位置；
3， 对话框可拖动；
4， 对话框中的事件模拟系统对话框的事件（例如：alert 对话框，点击确定按钮，对话框消失）；
5，解决 IE6 被 select 控件遮挡的问题
<!DOCTYPE HTML>
<html class="as">
<head>
<meta charset="utf-8">
<title>对话框</title>
<!--[if lt IE 9]>
<script src="../script/base.js"></script>
<![endif]-->
<link href="style/base.css" rel="stylesheet" type="text/css">
<style type="text/css">
#wrap {
padding: 100px;
}
#dialogbg {
background: rgba(0, 0, 0, .2);
overflow: hidden;
position: fixed;
}
#dialogbg,
#dialogbg .bgcolor {
height: 100%;
width: 100%;
margin: 0;
left: 0;
top: 0;
}
#dialogbg .bgcolor {
filter: alpha(opacity=20);
background: #000;
position: absolute;
}
:root #dialogbg .bgcolor {
display: none;
}
* html #dialogbg {
_position: absolute;
_top: expression(offsetParent.scrollTop);
}
#dialogbg .dialog {
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
border: 1px solid #666;
display: inline-block;
position: absolute;
background: white;
text-align: left;
overflow: hidden;
margin: auto;
left: 50%;
top: 50%;
behavior: url("PIE.htc");
*behavior: none;
}
.dialog .title {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#00aaee, endColorstr=#0066cc);
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00aaee), to(#0066cc));
background: -webkit-linear-gradient(top, #00aaee, #0066cc);
background: -moz-linear-gradient(top, #00aaee, #0066cc);
background: -ms-linear-gradient(top, #00aaee, #0066cc);
background: -o-linear-gradient(top, #00aaee, #0066cc);
background: linear-gradient(top, #00aaee, #0066cc);
text-shadow: 0 0 1px black;
font-weight: bold;
line-height: 28px;
overflow: hidden;
cursor: move;
color: white;
*width: expression(this.parentNode.clientWidth);
}
.dialog .title div {
padding: 0 8px;
}
.dialog .text,
.dialog .content {
margin: 20px;
}
.dialog .text {
text-align: center;
}
.dialog .content {
word-break: keep-all;
white-space: nowrap;
}
.dialog input,
.dialog .content {
min-width: 200px;
_width: 200px;
}
.dialog input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: 100%;
*width: auto;
}
.dialog .btns {
text-align: center;
margin: 10px 5px;
}
.dialog .btns * {
border: 1px solid #CCC;
text-decoration: none;
background: none;
padding: 5px 20px;
margin: 0 5px;
color: #000;
}
#dialogbg,
.dialog,
.dialog .winbtns .size,
.dialog input {
/*display: none ;*/
}
#dialogbg,
.dialog {
display: block;
}
</style>
</head>
<body>
<div id="wrap">
<select class="select">
<option>看看有没有遮住对话框</option>
<option>看看有没有遮住对话框</option>
<option>看看有没有遮住对话框</option>
</select>
<br>
请点击下面的链接弹出对框框
<br>
<a href="javascript:msgbox('你好，欢迎使用 Windows 8 旗舰版')">alert</a>
<br>
<a href="javascript:msgbox(' 您 确 定 要 关 闭 计 算 机
吗?',function(t){alert(t)})">confirm</a>
<br>
<a href="javascript:msgbox(' 请 输 入 您 的 姓 名 ',function(t){alert(t)},' 匿 名
')">prompt</a>
</div>
<script>
function msgbox(msg, fun, text) {
var dialogbg = document.querySelector("#dialogbg");
if (!dialogbg) {
dialogbg = document.createElement("div");
dialogbg.id = "dialogbg";
document.body.appendChild(dialogbg);
}
dialogbg.innerHTML = '<div class="bgcolor"></div><div class="dialog"><div class="title"
unselectable = "on" > < div > 消息 < /div></div > < div class = "content" > < /div><div class="text"><input
type = "text" > < /div><div class="btns"><button class="ok">确定</button > < button class = "cancel" >
取消 < /button></div > < /div>';
dialogbg.querySelector(".content").innerHTML = msg || " ";
function hide(sel) {
dialogbg.querySelector(sel).style.display = "none";
}
var btnOk = dialogbg.querySelector(".ok"),
btnCancel = dialogbg.querySelector(".cancel");
if (fun) {
if (text == undefined) {
hide(".text");
btnOk.onclick = function () {
fun(true);
}
btnCancel.onclick = function () {
fun(false);
}
} else {
var textbox = dialogbg.querySelector("input");
textbox.value = text;
btnOk.onclick = function () {
fun.call(textbox, textbox.value);
}
}
} else {
hide(".cancel");
hide(".text");
}
function btnClose() {
dialogbg.style.display = "none";
}
btnOk.addEventListener("click", btnClose, true);
btnCancel.addEventListener("click", btnClose, true);
dialogbg.style.display = "block";
var dialog = dialogbg.querySelector(".dialog");
dialog.style.left = (dialogbg.offsetWidth - dialog.offsetWidth) / 2 + "px";
dialog.style.top = (dialogbg.offsetHeight - dialog.offsetHeight) / 2 + "px";
drag(dialog, dialog.querySelector(".title"));
}
function drag(dialog, titleBar) {
var onDrag,
pos = {},
dialogbg = document.querySelector("html");
titleBar.addEventListener("mousedown", function (e) {
pos.left = dialog.offsetLeft;
pos.top = dialog.offsetTop;
pos.x = e.pageX;
pos.y = e.pageY;
onDrag = true;
}, false);
dialogbg.addEventListener("mousemove", function (e) {
if (onDrag) {
dialog.style.left = (pos.left + e.pageX - pos.x) + "px";
dialog.style.top = (pos.top + e.pageY - pos.y) + "px";
}
}, false);
titleBar.onselectstart = function () {
return false;
}
dialogbg.onmouseup = function () {
onDrag = false;
}
}
</script>
</body>
</html>
八十七、
在页面的固定区域内实现图片的展示(使用原生代码实现，不可使用任何框架)。
每点击一次右箭头，图片区域向左滚动出一张图片，反之相同 2. 当发现图片滚动到末尾时，响应的箭头变成不可点击状态 3. 鼠标在图片区域内滑动滚轮，图片会随着鼠标滚轮的方向进行响应的滚动
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>缩略图滚动显示</title>
<script src="../script/base.js"></script>
<script>
document.realy(function ($) {
var thumbs = document.querySelector(".thumbs"),
left = thumbs.querySelector(".scroll_left"),
right = thumbs.querySelector(".scroll_right"),
cont = thumbs.querySelector("ul"),
items = cont.querySelectorAll("li");
//console.log(scrollStep);
function scrollFun(val) {
val = cont.scrollLeft += (items[1].offsetLeft - items[0].offsetLeft) * val;
if (val <= 0) {
$.addClass(left, "disabled");
} else if (val >= (cont.scrollWidth - cont.clientWidth)) {
$.addClass(right, "disabled");
}
}
function sLeft() {
scrollFun(-1);
$.delClass(right, "disabled");
return false;
}
function sRight() {
scrollFun(1);
$.delClass(left, "disabled");
return false;
}
left.onclick = sLeft;
right.onclick = sRight;
cont.addEventListener("onmousewheel" in cont ? "mousewheel" : "DOMMouseScroll",
function (e) {
if ((e.detail || -e.wheelDelta) > 0) {
sRight();
} else {
sLeft();
}
e.preventDefault();
return false;
}, true);
});
</script>
<link href="style/base.css" rel="stylesheet" type="text/css">
<style type="text/css">
#wrap {
padding-top: 100px;
}
.thumbs {
overflow: hidden;
margin: 0 100px;
}
.thumbs ul {
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
margin: auto;
font-size: 1px;
_width: expression(document.documentElement.clientWidth-280);
}
.thumbs li {
list-style: none;
display: inline;
}
.thumbs a {
border: 2px solid #B7B7B7;
text-decoration: none;
display: inline-block;
outline: none;
margin: 0 9px;
}
.thumbs img {
vertical-align: top;
width: 115px;
height: 85px;
}
.thumbs a:hover {
border-color: #65B6DD;
}
.thumbs a:focus,
.thumbs a:active {
border-color: #0084B4;
}
.thumbs .scroll_left,
.thumbs .scroll_right {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
font-family: SimHei;
background: #65B6DD;
text-align: center;
line-height: 85px;
overflow: hidden;
font-size: 20px;
cursor: pointer;
height: 85px;
width: 20px;
color: #fff;
behavior: url("PIE.htc");
}
.thumbs .scroll_left {
-webkit-border-radius: 10px 3px 3px 10px;
-moz-border-radius: 10px 3px 3px 10px;
border-radius: 10px 3px 3px 10px;
margin-right: 15px;
float: left;
}
.thumbs .scroll_right {
-webkit-border-radius: 3px 10px 10px 3px;
-moz-border-radius: 3px 10px 10px 3px;
border-radius: 3px 10px 10px 3px;
margin-left: 15px;
float: right;
}
* html .thumbs .scroll_left,
* html .thumbs .scroll_right {
_margin: 0;
}
.thumbs .disabled {
cursor: not-allowed;
background: #CCC;
color: #999;
}
</style>
</head>
<body>
<div id="wrap">
<div class="thumbs" unselectable="on">
<a class="scroll_left disabled">←</a>
<a class="scroll_right">→</a>
<ul>
<li><a href="#"><img src="img/s4.jpg"></a></li>
<li><a href="#"><img src="img/twopop.jpg"></a></li>
<li><a href="#"><img src="img/twomm.jpg"></a></li>
<li><a href="#"><img src="img/girl2.jpg"></a></li>
<li><a href="#"><img src="img/car.jpg"></a></li>
<li><a href="#"><img src="img/war.jpg"></a></li>
<li><a href="#"><img src="img/twomm.jpg"></a></li>
<li><a href="#"><img src="img/girl2.jpg"></a></li>
<li><a href="#"><img src="img/car.jpg"></a></li>
<li><a href="#"><img src="img/war.jpg"></a></li>
<li><a href="#"><img src="img/twomm.jpg"></a></li>
<li><a href="#"><img src="img/girl2.jpg"></a></li>
<li><a href="#"><img src="img/car.jpg"></a></li>
<li><a href="#"><img src="img/war.jpg"></a></li>
<li><a href="#"><img src="img/twomm.jpg"></a></li>
<li><a href="#"><img src="img/girl2.jpg"></a></li>
<li><a href="#"><img src="img/car.jpg"></a></li>
<li><a href="#"><img src="img/war.jpg"></a></li>
<li><a href="#"><img src="img/twomm.jpg"></a></li>
<li><a href="#"><img src="img/girl2.jpg"></a></li>
<li><a href="#"><img src="img/car.jpg"></a></li>
<li><a href="#"><img src="img/war.jpg"></a></li>
</ul>
</div>
</div>
</body>
</html>
八十八、
JavaScript 中 document.getElementById 的返回值的类型为？
A.Array
B.Object
C.String
D.Function
答案：B
八十九、
在网页里显示一个 div 浮层，位于网页正中，该浮层内的文本显示用户电脑当前时间，格式 YYYY-MM-DD hh:mm:ss，如 2013-08-16 10:22:05。浮层居中可以用JavaScript 或者 CSS实现。
<!DOCTYPE html>
<html>
<head lang="ch">
<meta charset="UTF-8">
<title></title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.container {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.time {
vertical-align: middle;
display: table-cell;
}
</style>
</head>
<body>
<div class="container">
<span id="time" class="time"></span>
</div>
</body>
<script>
function TwoDigit(args) {
return args < 10 ? "0" + args : args;
};
var String
var dom = document.getElementById("time")
with(new Date()) {
String = getFullYear() + " 年 " + TwoDigit(getMonth() + 1) + " 月 " +TwoDigit(getDate()) + "日" + TwoDigit(getHours()) + "时" + TwoDigit(getMinutes()) + "分"+TwoDigit(getSeconds()) + "秒 ";
};
dom.innerHTML = String;
</script>
</html>
九十、
请用 JavaScript 实现，控制一个文本框只能输入正整数，如输入不符合条件则文本框全部字体标红。要求写出完整的文本框 HTML 代码和 JavaScript 逻辑代码。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
function isNum() {
var txtField = document.getElementById('txt');
var txt = txtField.value;
var regexp = /^\d*$/;
if (regexp.test(txt)) {
txtField.style.color = "#000";
} else {
txtField.style.color = "#f00";
}
}
</script>
</head>
<body>
<input id="txt" type="text" onKeyUp="isNum();" />
</body>
</html>
九十一、
以下代码输出的值为？（ ）
function f1() {
var n = 100;
nAdd = function () {
n += 1
}
function f2() {
alert(n);
}
return f2;
}
var result = f1();
result();
nAdd();
result();
答案：100 undefined 101
九十二、
如何判断浏览器是IE还是火狐，用Ajax实现
答案：用Request Headers里得User-Agent判断
九十三、
用原生js实现一个div可拖拽，需要考虑浏览器兼容性
// 获取id
var drag1=document.getElementById('drag1');
drag1.onmousedown=function(ev){
var x=ev.clientX-drag1.offction;
var y=ev.clientY-drag1.offsetTop;
drag1.onmousemove=function(ev){
drag1.style.left=ev.clientX-x+'px';
drag1.style.top=ev.clientY-y+'px';
}
drag1.onmouseup=function(ev){
drag1.onmousemove=darg1.onmouseup=null;
}
}
九十四、
填充代码，使mySort()能使传入得参数按照从小到大得顺序显示出来。
function mySort() {
var tags = new Array();//使用数组作为参数存储容器
请补充你的代码
return tags;//返回已经排序的数组
}
var result = mySort(50,11,16,32,24,99,57,100);/传入参数个数不确定
console.info(result);//显示结果
function mySort(){
var tags=new Array();
tags=Array.protytype.slice.call(arguments);
tags.sort(function(pre,next){
return pre-next;
})
return tages;
}
九十五、
下面哪些是nodeJs官方模块？
A，Querystring
B，Request
C，Async
D，Dns
答案：D
九十六、
用javascript实现控制一个文本框得输入字数限制，超出字数限制文本框飘红显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
document.getElementById('tBox').onkeydown=function(){
if(this.value.length>20){
var str='字数超出限制了';
document.getElementById('maxLength').innerHTML=str;
document.getElementById('maxLength').style.color='#ff0000';
}
}
}
</script>
</head>
<body>
<textarea id="tBox" cols="30" rows="10">ddd</textarea>
<div id="maxLength" style="font-size: 12px;">最多输入20个字</div>
</body>
</html>
九十七、 用js打出1-10000之间所有得对称数（例如121，1331等。）
function findSymmetryNum(s,o){
// 定义空数组
var arr=[];
for(var i=s;i<=o;i++){
var str=''+i,
sl=str.length,
middle=0,
flag=true;
if(sl%2===0){
middle=sl/2;
}else{
middle=(sl-1)/2;
}
for(var m = 0;m<middle;m++){
if(str.substr(0+m,1)!==str.substr(-1-m,1)){
flag=false;
}
}
flag&&arr.push(i);
}
console.log(arr);
return arr;
}
findSymmetryNum(1,10001);
九十八、
使用js实现，将文档中className有“test”得li标签背景色设置为黄色
window.onload=function(){
var list=document.getElementByTagName('li');
console.log(list.length);
for(var i =0;i<list.length;i++){
if(list[i].className=='test'){
list[i].style.backgroundColor='gold';
}
}
}
九十九、
用js实现如下功能，将给定得数字转化成千分位得格式，如把“10000”转换成“10，000”，并考虑到性能方面得因素
var a = '150355660';
var re = /(?=(?!\b)(\d{3})+$)/g
alert(a.replace(re,','));
一百、
请通过 js 来实现一个函数 once，这个函数在整个应用运行的时候只被访问一次。果再次访问就会访问上次的执行结果
var singleton=(function(){
// 缓存实例
var instance;
// 获取随机数
var randomNum=Math.random();
// 存取数字
function into(){
return randomNum;
}
if(!instance){
instance=into();
}
return instance;
})();
console.log(singleton);
console.log(singleton);
一百零一、
如何解决跨域通信得问题，结束有哪些方法？
答案：
1，document.domain+iframe得设置
2，动态创建script，要就是jsonp
3，利用iframe和location.hash
4，window.name 实现得跨域数据传输
5，利用HTML5 postMessage
6，利用flash
一百零二、
实现一个监听load时间得接口window.load(callback):多次调用时保证执行顺序，先绑定得回调限制性：如果load时间已触发，调用时回直接执行该回调
window.load = (function(){
var loaded = false,
func = new Array();
window.onload = function(){
loaded =true;
for(var i = 0;i<func.length;i++){
func[i]();
}
}
return function(callback){
if(typeof callback!="function") return;
if(loaded) {
callback();
}else{
func.push(callback)
}
}
}())
一百零三、
画图描述css盒模型，用JS实现获取元素宽和位置，注意兼容性
答案：
var element=document.getElementById('div0');
function getWidth(element){
var top=document.documentElement.clientTop;
var left=document.documentElement.clientLeft;
var ele=element.getBoundingClientRect();
return{
top:ele.top-top,
right:ele.right-left,
bottom:ele.bottom-top,
left:ele.left-left,
width:ele.right-ele.left,
height:ele.bottom-ele.top
}
}
一百零四、
用js实现乱序函数randomSort(array)函数，输出排序后得函数。如[1,2,3,4,5]，输出[3,2,4,5,1]。要求n次内不重复
//方法一：
function randomSort(array){
var x = array.sort(function(a,b){
return Math.random()>0.5?1:-1;
})
return x;
}
var arr=[1,2,3,4,5];
console.log(randomSort(arr));
-----------------------------------------------------
//方法二：
function randomSort(array){
var n = array.length,t,i;
while(n){
i=Math.random()*n--|0;
t=array[n];
array[n]=array[i];
array[i]=t;
}
return array;
}
var arr=[1,2,3,4,5];
console.log(randomSort(arr));
一百零五、
某饭店要开发一个排队软件，非VIP用户需要排队，先到先得，VIP用户可以插队，但是vip用户之间需要按照到达时间先后排队
要求实现：1，addCustomer(String phoneNumber)函数2，有空位时获取排到得用户 3，用户进队排队时得函数current();
class queue:
def __init__(self,vip,nor):
if(type(vip)==list and type(nor)==list):
self.vip = vip
self.nor = nor
else :print 'vip and nor must be list'
def addcustom(self,name,phonenumber,ifvip):
if (ifvip):
self.vip.append([name,phonenumber])
else :
self.nor.append([name,phonenumber])
def next(self):
if (self.vip):
n = self.vip[0][0]
del(self.vip[0])
print 'next is ' + n
else :
n = self.nor[0][0]
del(self.nor[0])
print 'next is ' + n
def current(self):
str1 = '现在队列为：'
for i in self.vip:
str1 += i[0]
str1 += ', '
for i in self.nor:
str1 += i[0]
str1 +=', '
print str1
一百零六、
写一个命令行字符得解析函数
例：-name lily -age 25 -school “chengdu university” 返回的是[-name lily,-age 25, -school “chengdu university”]
function getdata(str) {
var json = {};
var gets = str.split('"')[0];
gets = gets.split(' ');
for (var i = 0; i < gets.length - 1; i++) {
if (i % 2 == 0) {
json[gets[i]] = gets[i + 1];
}
}
json[gets[gets.length - 1]] = str.split('"')[1];
return json;
}
var str = '-name lily -age 25 -school "chengdu university"';
console.log(getData(str));
一百零七、
写一个函数 padstare(string str1,min_length,string str2)。例：padstare（‘5’，3，‘0’）返回的是‘005’； padstare（‘798’，5，‘0’）返回的是‘798’；
function padstare(str,min,str_char){
var ret=[];
if(str.length>=min){
return str;
}else{
for(var i = 0;i<min-str.length;i++){
ret.push(str_char);
}
return ret.join('')+str;
}
}
console.log(padstare('5',3,'0'));
console.log(padstare('798',5,'0'));
一百零八、 请实现 javascript 中的 indexOf 功能，判断一个字符串 a 中是否包含另一个字符串 b。 a）如果包含，需要返回匹配字符串 b 的位置 b）如果不包含，需要返回-1 例如 indexOf("hello","el") returns 1;
function indexOf (a,b){
var result = a.match(b);
return result? result.index:-1;
}
console.log(indexOf("hello", "el"));//1
----------------------------------------------------------------------
function indexOf(strA, strB) {
var lenA = strA.length,
lenB = strB.length;
if (lenA < lenB) {
return -1;
} else if (lenA == lenB) {
return 0;
} else {
for (var j = 0; j < lenA; j++) {
if (strA.charAt(j) == strB[0] && strA.substr(j, lenB) == strB) {
return j;
}
}
return -1;
} }
console.log(indexOf("hello", "el")); //1
1069
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
