css3、定位实现元素的绝对居中

css中实现元素的绝对居中

方法比较简单,代码如下:

1
2
3
4
5
6
7
8
9
.node{
width : 300px;
height : 400px;
position : absolute;
left : 50%;
top : 50%;
margin-left : -150px; /*一半的高度*/
margin-top : -200px; /*一半的宽度*/
}

这样的用法网上很多,我那时候也是只知其然不知其所以然,margin负值是一方面,这里要说的是left和top的百分比。

先看下w3c里面对这个概念的介绍:

其实这里也没有清楚,这里left和top的百分比,我觉得应该标尺应该是父元素,也就是分别是 left的50% 其实是父元素宽度的50%,top值为50%,也是父元素高度的50%,

并且这个值是可以实时计算的,改变浏览器窗口的大小时,会发现元素始终居中,就是实时计算的结果。

了解了这一点就简单了。

画个图说明一下:

通过postion的定位,现在子元素被定到了黄色区域,这个时候,通过margin的负值,就可以移到绝对居中的位置了

除了这种常用的居中方法外,还有一种css3的方法,也比较好理解,是当前方法的一个改进,不需要知道元素的宽和高。

1
2
3
4
5
6
.node {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
/* 50%为自身尺寸的一半 */
}

这个用法主要是用到css3中的transform,这里就不多介绍了,但是在网上,看到了还有一种方式,用的是margin:auto;我觉得比较好玩。

1
2
3
4
5
6
7
8
9
10
.node {
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto; /* 有了这个就自动居中了 */
}

有点神奇

HTTP/1.1与HTTP/1.0的区别

HTTP/1.1与HTTP/1.0的区别

下面主要从几个不同的方面介绍HTTP/1.0与HTTP/1.1之间的差别,当然,更多的内容是放在解释这种差异背后的机制上。
1 可扩展性
可扩展性的一个重要原则:如果HTTP的某个实现接收到了自身未定义的头域,将自动忽略它。
Ø 在消息中增加版本号,用于兼容性判断。注意,版本号只能用来判断逐段(hop-by-hop)的兼容性,而无法判断端到端(end-to-end)的兼容性。
例如,一台HTTP/1.1的源服务器从使用HTTP/1.1的Proxy那儿接收到一条转发的消息,实际上源服务器并不知道终端客户使用的是HTTP/1.0还是HTTP/1.1。因此,HTTP/1.1定义Via头域,用来记录消息转发的路径,它记录了整个路径上所有发送方使用的版本号。
Ø HTTP/1.1增加了OPTIONS方法,它允许客户端获取一个服务器支持的方法列表。
Ø 为了与未来的协议规范兼容,HTTP/1.1在请求消息中包含了Upgrade头域,通过该头域,客户端可以让服务器知道它能够支持的其它备用通信协议,服务器可以据此进行协议切换,使用备用协议与客户端进行通信。
2 缓存
在HTTP/1.0中,使用Expire头域来判断资源的fresh或stale,并使用条件请求(conditional request)来判断资源是否仍有效。例如,cache服务器通过If-Modified-Since头域向服务器验证资源的Last-Modefied头域是否有更新,源服务器可能返回304(Not Modified),则表明该对象仍有效;也可能返回200(OK)替换请求的Cache对象。
此外,HTTP/1.0中还定义了Pragma:no-cache头域,客户端使用该头域说明请求资源不能从cache中获取,而必须回源获取。
HTTP/1.1在1.0的基础上加入了一些cache的新特性,当缓存对象的Age超过Expire时变为stale对象,cache不需要直接抛弃stale对象,而是与源服务器进行重新激活(revalidation)。
HTTP/1.0中,If-Modified-Since头域使用的是绝对时间戳,精确到秒,但使用绝对时间会带来不同机器上的时钟同步问题。而HTTP/1.1中引入了一个ETag头域用于重激活机制,它的值entity tag可以用来唯一的描述一个资源。请求消息中可以使用If-None-Match头域来匹配资源的entitytag是否有变化。
为了使caching机制更加灵活,HTTP/1.1增加了Cache-Control头域(请求消息和响应消息都可使用),它支持一个可扩展的指令子集:例如max-age指令支持相对时间戳;private和no-store指令禁止对象被缓存;no-transform阻止Proxy进行任何改变响应的行为。
Cache使用关键字索引在磁盘中缓存的对象,在HTTP/1.0中使用资源的URL作为关键字。但可能存在不同的资源基于同一个URL的情况,要区别它们还需要客户端提供更多的信息,如Accept-Language和Accept-Charset头域。为了支持这种内容协商机制(content negotiation mechanism),HTTP/1.1在响应消息中引入了Vary头域,该头域列出了请求消息中需要包含哪些头域用于内容协商。
3 带宽优化
HTTP/1.0中,存在一些浪费带宽的现象,例如客户端只是需要某个对象的一部分,而服务器却将整个对象送过来了。例如,客户端只需要显示一个文档的部分内容,又比如下载大文件时需要支持断点续传功能,而不是在发生断连后不得不重新下载完整的包。
HTTP/1.1中在请求消息中引入了range头域,它允许只请求资源的某个部分。在响应消息中Content-Range头域声明了返回的这部分对象的偏移值和长度。如果服务器相应地返回了对象所请求范围的内容,则响应码为206(Partial Content),它可以防止Cache将响应误以为是完整的一个对象。
另外一种情况是请求消息中如果包含比较大的实体内容,但不确定服务器是否能够接收该请求(如是否有权限),此时若贸然发出带实体的请求,如果被拒绝也会浪费带宽。
HTTP/1.1加入了一个新的状态码100(Continue)。客户端事先发送一个只带头域的请求,如果服务器因为权限拒绝了请求,就回送响应码401(Unauthorized);如果服务器接收此请求就回送响应码100,客户端就可以继续发送带实体的完整请求了。注意,HTTP/1.0的客户端不支持100响应码。但可以让客户端在请求消息中加入Expect头域,并将它的值设置为100-continue。
节省带宽资源的一个非常有效的做法就是压缩要传送的数据。Content-Encoding是对消息进行端到端(end-to-end)的编码,它可能是资源在服务器上保存的固有格式(如jpeg图片格式);在请求消息中加入Accept-Encoding头域,它可以告诉服务器客户端能够解码的编码方式。
而Transfer-Encoding是逐段式(hop-by-hop)的编码,如Chunked编码。在请求消息中加入TE头域用来告诉服务器能够接收的transfer-coding方式,
4 长连接
HTTP 1.0规定浏览器与服务器只保持短暂的连接,浏览器的每次请求都需要与服务器建立一个TCP连接,服务器完成请求处理后立即断开TCP连接,服务器不跟踪每个客户也不记录过去的请求。此外,由于大多数网页的流量都比较小,一次TCP连接很少能通过slow-start区,不利于提高带宽利用率。
HTTP 1.1支持长连接(PersistentConnection)和请求的流水线(Pipelining)处理,在一个TCP连接上可以传送多个HTTP请求和响应,减少了建立和关闭连接的消耗和延迟。例如:一个包含有许多图像的网页文件的多个请求和应答可以在一个连接中传输,但每个单独的网页文件的请求和应答仍然需要使用各自的连接。
HTTP 1.1还允许客户端不用等待上一次请求结果返回,就可以发出下一次请求,但服务器端必须按照接收到客户端请求的先后顺序依次回送响应结果,以保证客户端能够区分出每次请求的响应内容,这样也显著地减少了整个下载过程所需要的时间。
在HTTP/1.0中,要建立长连接,可以在请求消息中包含Connection: Keep-Alive头域,如果服务器愿意维持这条连接,在响应消息中也会包含一个Connection: Keep-Alive的头域。同时,可以加入一些指令描述该长连接的属性,如max,timeout等。
事实上,Connection头域可以携带三种不同类型的符号:
1、一个包含若干个头域名的列表,声明仅限于一次hop连接的头域信息;
2、任意值,本次连接的非标准选项,如Keep-Alive等;
3、close值,表示消息传送完成之后关闭长连接;

客户端和源服务器之间的消息传递可能要经过很多中间节点的转发,这是一种逐跳传递(hop-by-hop)。HTTP/1.1相应地引入了hop-by-hop头域,这种头域仅作用于一次hop,而非整个传递路径。每一个中间节点(如Proxy,Gateway)接收到的消息中如果包含Connection头域,会查找Connection头域中的一个头域名列表,并在将消息转发给下一个节点之前先删除消息中这些头域。
通常,HTTP/1.0的Proxy不支持Connection头域,为了不让它们转发可能误导接收者的头域,协议规定所有出现在Connection头域中的头域名都将被忽略。
5 消息传递
HTTP消息中可以包含任意长度的实体,通常它们使用Content-Length来给出消息结束标志。但是,对于很多动态产生的响应,只能通过缓冲完整的消息来判断消息的大小,但这样做会加大延迟。如果不使用长连接,还可以通过连接关闭的信号来判定一个消息的结束。
HTTP/1.1中引入了Chunkedtransfer-coding来解决上面这个问题,发送方将消息分割成若干个任意大小的数据块,每个数据块在发送时都会附上块的长度,最后用一个零长度的块作为消息结束的标志。这种方法允许发送方只缓冲消息的一个片段,避免缓冲整个消息带来的过载。
在HTTP/1.0中,有一个Content-MD5的头域,要计算这个头域需要发送方缓冲完整个消息后才能进行。而HTTP/1.1中,采用chunked分块传递的消息在最后一个块(零长度)结束之后会再传递一个拖尾(trailer),它包含一个或多个头域,这些头域是发送方在传递完所有块之后再计算出值的。发送方会在消息中包含一个Trailer头域告诉接收方这个拖尾的存在。
6 Host头域
在HTTP1.0中认为每台服务器都绑定一个唯一的IP地址,因此,请求消息中的URL并没有传递主机名(hostname)。但随着虚拟主机技术的发展,在一台物理服务器上可以存在多个虚拟主机(Multi-homed Web Servers),并且它们共享一个IP地址。
HTTP1.1的请求消息和响应消息都应支持Host头域,且请求消息中如果没有Host头域会报告一个错误(400 Bad Request)。此外,服务器应该接受以绝对路径标记的资源请求。
7 错误提示
HTTP/1.0中只定义了16个状态响应码,对错误或警告的提示不够具体。HTTP/1.1引入了一个Warning头域,增加对错误或警告信息的描述。
此外,在HTTP/1.1中新增了24个状态响应码,如409(Conflict)表示请求的资源与资源的当前状态发生冲突;410(Gone)表示服务器上的某个资源被永久性的删除。
8 内容协商
为了满足互联网使用不同母语和字符集的用户,一些网络资源有不同的语言版本(如中文版、英文版)。HTTP/1.0定义了内容协商(contentnegotiation)的概念,也就是说客户端可以告诉服务器自己可以接收以何种语言(或字符集)表示的资源。例如如果服务器不能明确客户端需要何种类型的资源,会返回300(Multiple Choices),并包含一个列表,用来声明该资源的不同可用版本,然后客户端在请求消息中包含Accept-Language和Accept-Charset头域指定需要的版本。
就像有些人会说几门外语,但每种外语的流利程度并不相同。类似地,网络资源也可以有不同的表达形式,比如有母语版和各种翻译版本。HTTP引入了一个品质因子(quality values)的概念来表示不同版本的可用性,它的取值从0.0到1.0。例如一个母语是英语的人也能讲法语、甚至还学了点丹麦语,那么他的浏览器可用作如下配置:Accept-Language: en, fr;q=0.5, da;q=0.1。这时,服务器会优先选取品质因子高的值对应的资源版本作为响应。

参考资料
[1] Brian Totty, “HTTP: The DefinitiveGuide”, O’REILLY & ASSOC INC, 27, Sep., 2002.
[2] B. Krishnamurthy, J. C. Mogul, and D.M. Kristol, “Key Differences between HTTP/1.0 and HTTP/1.1”, http://www2.research.att.com/~bala/papers/h0vh1.html.

Backbone入门

Backbone入门(Model,Collection)
原文地址:http://blog.csdn.net/feng88724/article/details/7290338

Backbone 是一个前端 JS 代码 MVC 框架,被著名的 37signals 用来构建他们的移动客户端。它不可取代 jQuery,不可取代现有的 template 库。而是和这些结合起来构建复杂的 web 前端交互应用。

如果项目涉及大量的 JavaScript 代码,实现很多复杂的前端交互功能,首先你会想到把数据和展示分离。使用 Jquery 的 selector 和 callback 可以轻松做到这点。但是对于富客户端的WEB应用大量代码的结构化组织非常必要。

Backbone 就提供了 javascript 代码的组织的功能。Backbone 主要包括 models, collections, views 和 events, controller 。
Backbone官方网站: http://backbonejs.org/

###Model(模型)
Models 用来创建数据,校验数据,存储数据到服务器端。Models 还可以绑定事件。比如用户动作变化触发 models 的 change 事件,所有展示此model 数据的 views 都会接收到 这个 change 事件,进行重绘。
最简单的定义如下:
var Game = Backbone.Model.extend({});

稍微发杂一点

var Game = Backbone.Model.extend({
initialize: function(){
alert(“Oh hey! “);
},
defaults: {
name: ‘Default title’,
releaseDate: 2011,
}
});

initialize 相当于构造方法,初始化时调用
简单实用:

// Create a new game
var portal = new Game({ name: “Portal 2”, releaseDate: 2011});

// release will hold the releaseDate value – 2011 here
var release = portal.get(‘releaseDate’);

// Changes the name attribute
portal.set({ name: “Portal 2 by Valve”});

此时数据还都在内存中,需要执行save方法才会提交到服务器。(还未理解)
portal.save();

Collection(集合)
实际上,相当于Model的集合。定义方法如下:

var GamesCollection = Backbone.Collection.extend({
model : Game,
}
});

需要注意的是,定义Collection的时候,一定要指定Model。 下面让我们为这个集合添加一个方法,如下:

var GamesCollection = Backbone.Collection.extend({
model : Game,
old : function() {
return this.filter(function(game) {
return game.get(‘releaseDate’) < 2009;
});
}
}
});

集合的使用方法如下:

var games = new GamesCollection
games.get(0);

当然,也可以动态构成集合,如下:

var GamesCollection = Backbone.Collection.extend({
model : Game,
url: ‘/games’
}
});

var games = new GamesCollection
games.fetch();

这边的url告诉collection到哪去获取数据,fetch方法会发出一个异步请求到服务器,从而获取数据构成集合。(fetch实际上就是调用jquery的ajax方法)

参考:http://net.tutsplus.com/tutorials/javascript-ajax/getting-started-with-backbone-js/

js获取系统的根路径实现

原网页:http://www.jb51.net/article/45337.htm,这几篇都可找到

js获取系统的根路径实现

js如何获取系统的根路径,在本文给出了详细的方法

代码如下:

function getBasePath(){
var obj=window.location;
var contextPath=obj.pathname.split(“/“)[1];
var basePath=obj.protocol+”//“+obj.host+”/“+contextPath;
return basePath;
}

javascript对象包含

1.window javascript的顶层对象

2.navigator 客户端浏览器的信息

3.screen 客户端显示屏的信息

4.history 浏览器窗口访问过的url信息

5.location 当前url信息

其中location对象包含

比如有这样一个html地址 http://localhost:8080/huyao_soccer/huyao/tag/myplugin.jsp

1.hash

2.host 主机名和当前url的端口号 返回:localhost:8080

3.hostname 主机名 返回:localhost

4.href 完整的url 返回:http://localhost:8080/huyao_soccer/huyao/tag/myplugin.jsp

5.pathname 返回当前url的路径部分 返回:/huyao_soccer/huyao/tag/myplugin.jsp

6.port 端口号 返回:8080

7.protocol 协议 返回: http:

8.search 从?开始的url部门(查询部分)

JS取得绝对路径的实现代码

JS取得绝对路径的实现代码

在项目中,我们经常要得到项目的绝对路径,方便我们上传下载文件,JS为我们提供了方法,虽说要迂回一下。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getRealPath(){
  //获取当前网址,如: http://localhost:8083/myproj/view/my.jsp
   var curWwwPath=window.document.location.href;
   //获取主机地址之后的目录,如: myproj/view/my.jsp
  var pathName=window.document.location.pathname;
  var pos=curWwwPath.indexOf(pathName);
  //获取主机地址,如: http://localhost:8083
  var localhostPaht=curWwwPath.substring(0,pos);
  //获取带"/"的项目名,如:/myproj
  var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
 
 //得到了 http://localhost:8083/myproj
  var realPath=localhostPaht+projectName;
  alert(realPath);
}

js获取当前路径的简单示例代码

js获取当前路径的简单示例代码

本篇文章主要是对js获取当前路径的示例代码进行了介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script type="text/javascript">    
thisURL = document.URL;
thisHREF = document.location.href;
thisSLoc = self.location.href;
thisDLoc = document.location;
strwrite = " thisURL: [" + thisURL + "]<br />"
strwrite += " thisHREF: [" + thisHREF + "]<br />"
strwrite += " thisSLoc: [" + thisSLoc + "]<br />"
strwrite += " thisDLoc: [" + thisDLoc + "]<br />"
document.write( strwrite );
thisTLoc = top.location.href;
thisPLoc = parent.document.location;
thisTHost = top.location.hostname;
thisHost = location.hostname;
strwrite = " thisTLoc: [" + thisTLoc + "]<br />"
strwrite += " thisPLoc: [" + thisPLoc + "]<br />"
strwrite += " thisTHost: [" + thisTHost + "]<br />"
strwrite += " thisHost: [" + thisHost + "]<br />"
document.write( strwrite );
tmpHPage = thisHREF.split( "/" );
thisHPage = tmpHPage[ tmpHPage.length-1 ];
tmpUPage = thisURL.split( "/" );
thisUPage = tmpUPage[ tmpUPage.length-1 ];
strwrite = " thisHPage: [" + thisHPage + "]<br />"
strwrite += " thisUPage: [" + thisUPage + "]<br />"
document.write( strwrite );
var url="<%=request.getRequestURI()%>";
alert(url)
</script>
request.getRequestURI();
request.getRequestURL();
request.getQueryString();
request.getServletPath()
可以得到自己的网络地址:request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getRequestURI()

js获取当前页面路径示例讲解

js获取当前页面路径示例讲解

本篇文章主要是对js获取当前页面路径的示例代码进行了介绍

设置或获取对象指定的“文件名”或路径。


设置或获取整个 URL 为字符串。


设置或获取与 URL 关联的端口号码。


设置或获取 URL 的协议部分。


设置或获取 href 属性中在井号“#”后面的分段。


设置或获取 location 或 URL 的 hostname 和 port 号码。


设置或获取 href 属性中跟在问号后面的部分。


网页刷新推荐-JS

JavaScript数学函数知识综合运用

数学函数

1.写一个函数limit2,保留数字小数点后两位,四舍五入, 如: (**)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function limit2 (num) {
var num1 = num*100
if(num1 >= 0){
num1 = Math.round(num1)
}else{
num1 = -Math.round(Math.abs(num1));
}
num = num1/100;
console.log(num);
return num;
}
var num1 = 3.456
limit2( num1 ); //3.46
limit2( 2.42 ); //2.42

2.写一个函数,获取从min到max之间的随机数,包括min不包括max (*

1
2
3
4
5
function ranAmong (min,max) {
return min+Math.random()*(max-min);
}
console.log(ranAmong(4,15));
console.log(ranAmong(14,21));

3.写一个函数,获取从min都max之间的随机整数,包括min包括max (*

1
2
3
4
5
function ranAmong (min,max) {
return Math.round(min+Math.random()*(max-min));
}
console.log(ranAmong(4,15));
console.log(ranAmong(14,21))

4.写一个函数,获取一个随机数组,数组中元素为长度为len,最小值为min,最大值为max(包括)的随机数 (*

1
2
3
4
5
6
7
8
9
function ranAmong (min,max,len) {
var arr = [];
for (var i = 0; i < len; i++) {
arr.push(Math.round(min+Math.random()*(max-min)));
};
return arr;
}
console.log(ranAmong(2,17,5));
console.log(ranAmong(12,14,3));

JavaScript字符串知识综合运用

字符串

1.写一个 ucFirst函数,返回第一个字母为大写的字符 (*

1
2
3
4
5
function ucFirst (str) {
str = str.replace(str[0],str[0].toUpperCase());
return str;
}
console.log(ucFirst("hunger") === "Hunger");

2.写一个函数truncate(str, maxlength), 如果str的长度大于maxlength,会把str截断到maxlength长,并加上…,如 (**

1
2
3
4
5
6
7
8
9
function truncate (str,maxlength) {
if (str.length>maxlength) {
var sub1 = str.substr(maxlength, str.length-maxlength)
str = str.replace(sub1, "...");
};
return str;
}
console.log(truncate("hello, this is hunger valley,", 10) === "hello, thi...");
console.log(truncate("hello world", 20) === "hello world");

JavaScript数组知识综合运用

问答

  • 数组方法里push、pop、shift、unshift、join、split分别是什么作用。(*)
    • push在数组末尾添加一个元素
    • pop从数组末尾删除一个元素
    • shift把数组的第一个元素删除掉
    • unshift在数组的头部添加一个元素
    • join() 将数组里面的元素以一定的方式:()内参数,连接成字符串
    • split() 是字符串方法,将一个字符串以()里面的内容为分割点分解成数组
    • splice(start[, deleteCount][, values]) 以第一个参数为起点,第二个参数为位移作为一个,将第三个参数替换这个范围。第二个参数省略则为插入操作,第三个参数省略为删除操作,均改变原数组

      代码题

      数组

      1、用 splice 实现 push、pop、shift、unshift方法 (*
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      function push (arr,a) {
      arr.splice(arr.length,0,a);
      }
      function pop (arr) {
      arr.splice(arr.length-1,1);
      }
      function shift (arr) {
      arr.splice(0,1);
      }
      function unshift (arr,a) {
      arr.splice(0,0,a);
      }
      var arr=[2,5,11,7,4];
      push(arr,10)
      console.log(arr);
      pop(arr)
      console.log(arr);
      shift(arr)
      console.log(arr);
      unshift(arr,10)
      console.log(arr);

结果:0_1463473102454_upload-78650f2b-aa59-4db5-9fb8-55c4283598d2

2.使用数组拼接出如下字符串 (*

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var prod = {
name: '女装',
styles: ['短款', '冬季', '春装']
};
function getTplStr(data){
var html = [];
html.push('<dl class="product">');
html.push("<dt>" + data.name + "</dt>");
for (var i = 0; i < data.styles.length; i++) {
html.push("<dd>" + data.styles[i] + "</dd>");
};
html.push("</dl>");
return html.join("\n");
};
var result = getTplStr(prod); //result为下面的字符串
console.log(result);

3.写一个find函数,实现下面的功能 (*

1
2
3
4
5
6
7
8
9
10
11
12
13

function find (arr,a) {
for (var i = 0; i < arr.length; i++) {
if(arr[i] === a){
return console.log(i);
}
};
return console.log(-1);
}
var arr = [ "test", 2, 1.5, false ]
find(arr, "test") // 0
find(arr, 2) // 1
find(arr, 0) // -1

4.写一个函数filterNumeric,实现如下功能 (**

1
2
3
4
5
6
7
8
9
10
11
12
var arr = ["a", 1,3,5, "b", 2];
function filterNumeric (arr) {
var arr0 = [];
for (var i = 0; i < arr.length; i++) {
if(typeof arr[i] === "number"){
arr0.push(arr[i]);
}

};
return arr0;
}
var newarr = filterNumeric(arr); // [1,3,5,2]

5.对象obj有个className属性,里面的值为的是空格分割的字符串(和html元素的class特性类似),写addClass、removeClass函数,有如下功能:(**)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function addClass (obj,name) {
if (obj.className) {
var arr = obj.className.split(" ")
for (var i = 0; i < arr.length; i++) {
if(arr[i] === name){
return ;
}
};
arr.push(name);
obj.className = arr.join(" ");
};
}

function removeClass (obj,name) {
if (obj.className) {
var arr = obj.className.split(" ")
for (var i = 0; i < arr.length; i++) {
if(arr[i] === name){
arr.splice(i,1);
obj.className = arr.join(" ");
}
};
}
}

var obj = {
className: 'open menu'
}
addClass(obj, 'new') // obj.className='open menu new'
addClass(obj, 'open') // 因为open已经存在,此操作无任何办法
addClass(obj, 'me') // obj.className='open menu new me'
console.log(obj.className) // "open menu new me"

removeClass(obj, 'open') // obj.className='menu new me'
console.log(obj.className)
removeClass(obj, 'blabla') // 不变
console.log(obj.className)

6.写一个camelize函数,把my-short-string形式的字符串转化成myShortString形式的字符串,如 (*)

1
2
3
4
5
6
7
8
9
10
11
12
function camelize (str) {
var arr = str.split("-");
for (var i = 0; i < arr.length; i++) {
if(i>0 && typeof arr[i] === "string"){
arr[i] = arr[i].replace(arr[i][0],arr[i][0].toUpperCase());
}
};
str = arr.join("");
return str;
}
console.log(camelize("background-color"));
console.log(camelize("list-style-image") === 'listStyleImage');

7.如下代码输出什么?为什么? (*)

1
2
3
4
5
	arr = ["a", "b"];
arr.push( function() { alert(console.log('hello hunger valley')) } );
arr[arr.length-1]() //弹出undefind 控制台输出字符串hello hunger valley

/*arr.push()将函数function() { alert(console.log('hello hunger valley')) }加到arr数组的最后一位。arr.length-1是输出数组最后一位,即上面的函数,加()等于(function(){})立即执行函数表达式,函数执行console.log只在控制台输出,并不返回值,所以报undefind。*/

8.写一个函数filterNumericInPlace,过滤数组中的数字,删除非数字 (**)

1
2
3
4
5
6
7
8
9
10
11
var arr = ["a",1,3,4,5,"b",2];
//对原数组进行操作,不需要返回值
function filterNumericInPlace (arr) {
for (var i = 0; i < arr.length; i++) {
while(typeof arr[i] !== "number"){
arr.splice(i,1);
}//执行splice后数组指针i也移动,所以用while循环
};
}
filterNumericInPlace(arr);
console.log(arr) // [1,3,4,5,2]

9.写一个ageSort函数实现如下功能 (*

1
2
3
4
5
6
7
8
9
10
function ageSort (people) {
people.sort(function(a,b){
return a.age-b.age;
})
}
var john = { name: "John Smith", age: 23 };
var mary = { name: "Mary Key", age: 18 };
var bob = { name: "Bob-small", age: 6 };
var people = [ john, mary, bob ];
ageSort(people); // [ bob, mary, john ]

10.写一个filter(arr, func) 函数用于过滤数组,接受两个参数,第一个是要处理的数组,第二个参数是回调函数(回调函数遍历接受每一个数组元素,当函数返回true时保留该元素,否则删除该元素)。实现如下功能: (**

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function isNumeric (el){
return typeof el === 'number';
}
arr = ["a",3,4,true, -1, 2, "b"]

function filter (arr,funName) {
for (var i = 0; i < arr.length; i++) {
if(!funName(arr[i])){
arr.splice(i,1);
i--;
}
};
return arr;
}

arr = filter(arr, isNumeric) ; // arr = [3,4,-1, 2], 过滤出数字
console.log(arr);
arr = filter(arr, function(val) { return val > 0 }); // arr = [2] 过滤出大于0的整数
console.log(arr);

字符串

1.写一个 ucFirst函数,返回第一个字母为大写的字符 (*

1
2
3
4
5
function ucFirst (str) {
str = str.replace(str[0],str[0].toUpperCase());
return str;
}
console.log(ucFirst("hunger") === "Hunger");

2.写一个函数truncate(str, maxlength), 如果str的长度大于maxlength,会把str截断到maxlength长,并加上…,如 (**

1
2
3
4
5
6
7
8
9
function truncate (str,maxlength) {
if (str.length>maxlength) {
var sub1 = str.substr(maxlength, str.length-maxlength)
str = str.replace(sub1, "...");
};
return str;
}
console.log(truncate("hello, this is hunger valley,", 10) === "hello, thi...");
console.log(truncate("hello world", 20) === "hello world");

数学函数

1.写一个函数limit2,保留数字小数点后两位,四舍五入, 如: (**)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function limit2 (num) {
var num1 = num*100
if(num1 >= 0){
num1 = Math.round(num1)
}else{
num1 = -Math.round(Math.abs(num1));
}
num = num1/100;
console.log(num);
return num;
}
var num1 = 3.456
limit2( num1 ); //3.46
limit2( 2.42 ); //2.42

2.写一个函数,获取从min到max之间的随机数,包括min不包括max (*

1
2
3
4
5
function ranAmong (min,max) {
return min+Math.random()*(max-min);
}
console.log(ranAmong(4,15));
console.log(ranAmong(14,21));

3.写一个函数,获取从min都max之间的随机整数,包括min包括max (*

1
2
3
4
5
function ranAmong (min,max) {
return Math.round(min+Math.random()*(max-min));
}
console.log(ranAmong(4,15));
console.log(ranAmong(14,21))

4.写一个函数,获取一个随机数组,数组中元素为长度为len,最小值为min,最大值为max(包括)的随机数 (*

1
2
3
4
5
6
7
8
9
function ranAmong (min,max,len) {
var arr = [];
for (var i = 0; i < len; i++) {
arr.push(Math.round(min+Math.random()*(max-min)));
};
return arr;
}
console.log(ranAmong(2,17,5));
console.log(ranAmong(12,14,3));
,