面试系列之js笔试题一(带div匀速)-CSDN博客

面试系列之js笔试题一(带div匀速)

都是我遇到的面试题，可能有点出处，但整体题是一样的，为大家的面试之路添一块砖

1.去掉html元素中的<span></span>但中间的内容要保留

QUOTE:

/<\/?span>/

2.去掉&但不能去掉以amp开头的&,比如&&sdfsdf&&jsldjssjflsdj&

QUOTE:

/&(?!amp;)/g

3.去掉数组中重复的,并且记录重复的个数（这个答案很多很多种，我这个不见得最好，但感觉效率高些)

QUOTE:

var s = [0,2,3,4,4,0,2];
for(var i=0,o={},tmp=[],count=0,l=s.length;i<l;i++){
if(o[s[i]]){
count++;
}else{
o[s[i]]=1;
tmp.push(s[i])
}
}
alert(count);
alert(tmp)

QUOTE:

for(var i=0;i<10;i++){
var input = document.creatElement('input');
input.onclick = function(){alert(i)};
document.body.appendChild(input);
}

问当我点击第五个时显示是多少
10
这个是个老问题了，不多解释
如果想显示5
-function(j){input.onclick = function(){alert(j)}}(i);

5

QUOTE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<input id='a' value="a" />
<input id='b' value="b" />
</body>
</html>
<script>
function test(){
this.value = 1;
this.get = function(){
alert(this.value)
}
}
var T = new test;

document.getElementById('a').onclick = function(){
T.get();
}
document.getElementById('b').onclick = T.get;
</script>

结果是
首先
document.getElementById('a').onclick = function(){
T.get();
}
在T.get()这个外边this是a这个input
但在get这个方法内的this还是T
所以是1

document.getElementById('b').onclick = T.get;
这时get中的this就已经是input了而不是T自己所以
是b

6.创建一个div，宽200，高200，1px黑边从左上角匀速移动到右下角，并且要固定到右下角

QUOTE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body>

</body>
</html>
<script>
-function(){
var d = document,db = document.body,
div = d.createElement('div'),timer,t=0,ds = div.style;
ds.cssText = ";position:absolute;top:0;left:0;width:200px;height:200px;border:1px solid #000;";
db.appendChild(div);
timer = setInterval(function(){
//步长我写死为5
if(div.offsetWidth+div.offsetLeft>=db.clientWidth&&div.offsetHeight+div.offsetTop>=db.clientHeight){
clearInterval(timer);
//不要说什么这个样会影响性能，这个影响太小了，onresize有些时候效果并不好
setInterval(function(){
ds.left = db.clientWidth - div.offsetWidth + 'px';
ds.top = db.clientHeight - div.offsetHeight + 'px';
},500)
}else{
ds.left = (div.offsetWidth+div.offsetLeft>=db.clientWidth?db.clientWidth - div.offsetWidth:div.offsetLeft+5) + 'px';
ds.top =(div.offsetHeight+div.offsetTop>=db.clientHeight? db.clientHeight - div.offsetHeight:div.offsetTop+5) + 'px';
}
},10)
}()
</script>

[ 本帖最后由 campaign 于 2010-2-4 15:37 编辑 ]

target:google doc

campaign

UID 89396
精华 0
积分 1530
帖子 682
威望 746
阅读权限
注册 2008-7-3
状态离线

大中小

使用道具

发表于 2010-2-4 17:26 资料个人空间短消息加为好友

6题中的onresize版本

QUOTE:

-function(){
var d = document,db = document.body,
div = d.createElement('div'),timer,t=0,ds = div.style;
ds.cssText = ";position:absolute;top:0;left:0;width:200px;height:200px;border:1px solid #000;";
db.appendChild(div);
timer = setInterval(function(){
//步长我写死为5
if(div.offsetWidth+div.offsetLeft>=db.clientWidth&&div.offsetHeight+div.offsetTop>=db.clientHeight){
clearInterval(timer);
//onresize会多次触发，为了性能，使用一个timeout还避免这个问题
window.onresize = function(){
var resizer;
return function(){
if(!resizer){
resizer = setTimeout(function(){
ds.left = db.clientWidth - div.offsetWidth + 'px';
ds.top = db.clientHeight - div.offsetHeight + 'px';
resizer = null;
},100)
}
}
}()
}else{
ds.left = (div.offsetWidth+div.offsetLeft>=db.clientWidth?db.clientWidth - div.offsetWidth:div.offsetLeft+5) + 'px';
ds.top =(div.offsetHeight+div.offsetTop>=db.clientHeight? db.clientHeight - div.offsetHeight:div.offsetTop+5) + 'px';
}
},10)
}()

target:google doc

infinte

UID 54501
精华 2
积分 1855
帖子 685
威望 658
阅读权限
注册 2006-7-17
来自 TJK C区25Z领域FeDRO(Undel ...
状态离线

大中小

使用道具

发表于 2010-2-4 19:43 资料个人空间短消息加为好友

问题1实际上很麻烦，因为JS不支持递归正则（见《精通正则表达式》）。简单方法如下：
s.replace(/<span(?: [^>]+)?>(.*?)<\/span>/g,$1);

Typeof.net: 语言资讯站
blog: coro.in

oominder

UID 94531
精华 0
积分 385
帖子 73
威望 72
阅读权限
注册 2009-9-14
状态离线

大中小

使用道具

发表于 2010-2-4 20:39 资料个人空间短消息加为好友

支持楼主下不错的科普系列希望多多写. 这些题都有多解.

JS小小

喜羊羊

UID 94273
精华 0
积分 896
帖子 187
威望 223
阅读权限
注册 2008-12-30
状态离线

大中小

使用道具

发表于 2010-2-4 20:44 资料个人空间短消息加为好友

我是来围观的^_^

[ 本帖最后由 JS小小于 2010-2-4 20:48 编辑 ]

╔──────────────╗
│ミ用心体验，脚本乐趣ミ│
╚──────────────╝

campaign

UID 89396
精华 0
积分 1530
帖子 682
威望 746
阅读权限
注册 2008-7-3
状态离线

大中小

使用道具

发表于 2010-2-4 22:06 资料个人空间短消息加为好友

回复 #3 infinte 的帖子

我理解简单啦
这个不就行了吗
<script> alert('sdflasdfjal<span>Adfsdfsdf</span>Adfsdfsdf<span>Aedfsdf< /span>'+"除了后"+'sdflasdfjal<span>Adfsdfsdf< /span>Adfsdfsdf<span>Aedfsdf</span>'.replace(/<\/?span>/g,'')) </script>
提示：您可以先修改部分代码再运行

target:google doc

campaign

UID 89396
精华 0
积分 1530
帖子 682
威望 746
阅读权限
注册 2008-7-3
状态离线

大中小

使用道具

发表于 2010-2-4 22:07 资料个人空间短消息加为好友

回复 #4 oominder 的帖子

会的就像手痒痒系列一样

target:google doc

abcdreamer

UID 94366
精华 0
积分 2987
帖子 1056
威望 1037
阅读权限
注册 2009-4-18
状态离线

大中小

使用道具

发表于 2010-2-4 23:33 资料个人空间短消息加为好友

回复 #3 infinte 的帖子

如果只是去掉span标签，很简单：
s.replace(/<span[^>]*>/gi, '').replace(/<\/span>/gi, ''); //去头去尾

campaign

UID 89396
精华 0
积分 1530
帖子 682
威望 746
阅读权限
注册 2008-7-3
状态离线

大中小

使用道具

发表于 2010-2-5 09:31 资料个人空间短消息加为好友

罗嗦了
楼上
<script> alert("dfsdf<span sfji=dfsdf sdfs>AAAAAAA</span>sdfsdsdfsdf".replace(/<\/?span[^>]*>/g,'')) </script>
提示：您可以先修改部分代码再运行

target:google doc

meteoric_cry

UID 87829
精华 0
积分 951
帖子 442
威望 416
阅读权限
注册 2008-6-2
来自苏州
状态离线

#10

大中小

使用道具

发表于 2010-2-5 10:08 资料个人空间主页短消息加为好友

回复 #3 infinte 的帖子

$1上少了引号...

s.replace(/<span(?:[^>]+)?>(.*?)<\/span>/gi, '$1');

。

meteoric_cry

UID 87829
精华 0
积分 951
帖子 442
威望 416
阅读权限
注册 2008-6-2
来自苏州
状态离线

#11

大中小

使用道具

发表于 2010-2-5 10:26 资料个人空间主页短消息加为好友

关于正则的一些了解 http://deerchao.net/tutorials/regex/regex.htm#negation
应该是比较不错的。

。

caor1987

UID 77826
精华 0
积分 185
帖子 53
威望 53
阅读权限
注册 2007-10-26
状态离线

#12

大中小

使用道具

发表于 2010-2-8 13:29 资料个人空间主页短消息加为好友

4.
QUOTE:
      for(var i=0;i<10;i++){
            var input = document.creatElement('input');
            input.onclick = function(){alert(i)};
            document.body.appendChild(input);
      }

问当我点击第五个时显示是多少
10

这里为什么是10，而不是9呢？

http://www.caoren.net

killjim

UID 94518
精华 0
积分 87
帖子 36
威望 36
阅读权限
注册 2009-9-11
状态离线

#13

大中小

使用道具

发表于 2010-2-8 13:36 资料个人空间短消息加为好友

QUOTE:

原帖由 caor1987 于 2010-2-8 13:29 发表

4.
QUOTE:
   QUOTE:
      for(var i=0;i<10;i++){
            var input = document.creatElement('input');
            input.onclick = function(){alert(i)};
            document.body.appendChild(input);
      }

问当我点击第五个时显示是多少
10

这里为什么是10，而不是9呢？

其实这个是报错嘿嘿

campaign