No.1

Size: px

Start display at page:

Download "No.1"

解暴
7 years ago
Views:

1 No.1 下图绿色区域的宽度为 100%, 其中有三个矩形, 第一个矩形的宽度是 200px, 第二个和第三个矩形的宽度相等请使用 CSS3 中的功能实现它们的布局已知 HTML 结构是 : <div class="box"> <div class="item">column 1</div> <div class="item">column 2</div> <div class="item">column 3</div> </div> 解答.box { background-color:green; display:-moz-box; height:50px; line-height:30px; text-indent:10px; width:100%;.item { box-flex:1; -moz-box-flex:1;

class="item">column 2</div> <div class="item">column 3</div> </div> 解答.

2 -webkit-box-flex:1; margin:10px; background:#fff.item:first-child { width:200px; background:#fff; margin:10px.item:nth-child(2) { margin:10px 0 column 1 column 2 column 3 No.2 有两个盒子 A B,B 在 A 盒子中, 它们的 CSS 是这么定义的 : A { position:relative; width:500px; height: 500px; background-color:green;

item:nth-child(2) { margin:10px 0 column 1 column 2 column 3 No.

3 B { position:absolute; max-width:300px; max-height:300px; background-color:blue; 如何实现 B 在 A 中水平方向和垂直方向居中解答说实话这题我没太看懂, 我就说下垂直居中和水平居中的方法吧水平居中大家都知道 margin:0 auto 就行了, 垂直居中也有 display:table, 然后 vertical-align: middle; 这都是基本方法, 但是我目测这道题考察的是 css3 吧 css3 可以用下面的方法实现子元素居中 ( 不同浏览器需要写私有属性 ) display: box; box-orient: horizontal; box-pack: center; box-align: center; No.3 经常在 SNS 中看到如下图所示的功能 : 请通过代码完成它, 它至少应该 : 1. 良好结构语义化的 HTML 2. 兼容主流的浏览器 ;

方法, 但是我目测这道题考察的是 css3 吧 css3 可以用下面的方法实现子元素居中 ( 不同浏览器需要写私有属性 ) display: box; box-orient: horizontal;

4 3. JS 应该包括 : 1) 实时计数功能 2) 校验字数限制 3) 防止重复提交 ; 4. 如果时间所限, 无法 100%, 但请说明实现方案及思路 ; 解答 js jquery(document).ready(function(a){a("#message").bind("focus keyup input paste",function(){this.value.length>1500?(this.value=a(this).attr("va lue").substring(0,1500),a("#num").text("\u6700\u591a1500")):a(".ali-n um").text(a(this).attr("value").length))); html dsd css dsd 分享开会 /1500 No.4 // 现有代码如下 : function test() { var a = 1; settimeout(function() { alert(a); a = 3;, 1000); a = 2; settimeout(function() {

$text("\u6700\u591a1500")):a(".ali-n um").text(a(this).attr("value").length))); html dsd css dsd 分享开会 /1500 No.$

5 alert(a); a = 4;, 3000); test(); alert(0); // 请注意, 代码中有三处 alert. 他们分别会 alert 出什么值, 时间上的顺序是怎样的? // 请详述得到这个答案的原因, 特别是 test 函数的局部变量 a 是对运行结果的影响. 解答按顺序分别会 alert2 3 0, 时间顺序为 No.5 当我们使用 CSS3 新属性, 比如 :box-shadow 或者 transition 时, 我们怎么检测浏览器是否支持这些属性? 请设计一个 JavaScript 函数, 该函数接受一个 CSS 属性名作为参数, 并返回一个 boolean 值, 表明浏览器是否支持这个属性解答 var supports = (function() { var div = document.createelement('div'), vendors = 'Khtml Ms O Moz Webkit'.split(' '), len = vendors.length; return function(prop) { if ( prop in div.style ) return true;

5 当我们使用 CSS3 新属性, 比如 :box-shadow 或者 transition 时, 我们怎么检测浏览器是否支持这些属性?

6 prop = prop.replace(/^[a-z]/, function(val) { ); return val.touppercase(); while(len--) { if ( vendors[len] + prop in div.style ) { // browser supports box-shadow. Do what you need. // Or use a bang (!) to test if the browser doesn't. return true; return false; ; )(); if ( supports('textshadow') ) { No.6 document.documentelement.classname += ' textshadow'; 如果你现在使用的是 Google Chrome 或 Apple Safari, 如何让 input 元素在默认情况下显示 alipay WD Team, 而在光标移入后则显示空白? 解答 css3 placeholder 必须输入文字才会消失, 所以不行, 用 JS 实现 onblur="this.value = this.value == ''? this.defaultvalue : this.value"

return true; return false; ; )(); if ( supports('textshadow') ) { No.6 document.documentelement.

7 onfocus="this.value = this.value == this.defaultvalue? '' : this.value" No.7 解释一下 alert(function instanceof Object); alert(object instanceof Function); 这个结果 Object, Function, Array 等等这些都被称作是构造函数, 他们都是函数而所有的函数都是构造函数 Function 的实例从原型链机制的的角度来说, 那就是说所有的函数都能通过原型链找到创建他们的 Function 构造函数的构造原型 Function.protorype 对象, 所以 : alert(object instanceof Function);// return true 与此同时, 又因为 Function.prototype 是一个对象, 所以他的构造函数是 Object. 从原型链机制的的角度来说, 那就是说所有的函数都能通过原型链找到创建他们的 Object 构造函数的构造原型 Object.prototype 对象, 所以 : alert(function instanceof Object);// return true 延伸有趣的是根据我们通过原型链机制对 instanceof 进行的分析, 我们不难得出一个结论 :Function instanceof Function 依然返回 true, 原理是一样的 Function 是构造函数, 所以它是函数对象函数对象都是由 Function 构造函数创建而来的, 原型链机制解释为 : 函数对象的原型链中存在 Function.prototype instanceof 查找原型链中的每一个节点, 如果 Function.prototype 的构造函数 Function 的原型链中被查到, 返回 true 因此下面代码依然返回 true alert(function instanceof Function);// still true 结论 No.8 在 JavaScript 语言中, 一切的一切都是对象, 它们全部继承自 Object. 或者说所有对象的原型链的根节点都是 Object.prototype 理解原型链机制在 JavaScript 中式如何工作的是非常重要的掌握了它, 不管一个对象多么复杂, 你总能够轻而易举地将它攻破 // 现有代码如下 : var foo = 1; function main(){

制的的角度来说, 那就是说所有的函数都能通过原型链找到创建他们的 Function 构造函数的构造原型 Function.protorype 对象, 所以 : alert(object instanceof Function);// return true 与此同时, 又因为 Function.

8 alert(foo); var foo = 2; alert(this.foo) this.foo = 3; //1. 请给出以下两种方式调用函数时,alert 的结果, 并说明原因 var m1 = main(); var m2 = new main(); //2. 如果想要 var m1 = main() 产生的 m1 和前面的 m2 完全一致, 又该如何改造 main 函数? 1 var m1=main() 时,alert 的结果是 undefined 和 1, 原因是首先在 alert(foo) 的时候,foo 在 main() 函数域内还没有被定义, 因此提示 undefined, 而在输出 this.foo 时, 因为此时的函数执行环境是全局域, 相当于 window.main(), 因此 this=window, 所以 this.foo=window.foo=1 var m2=new main() 时,alert 的结果是 undefined 和 undefined, 第一个 undefined 的原因与前面一种情况相同, 而第二个提示 undefined 的原因是在这种情况下用 new 构造了一个 main() 的实例, 因此执行环境发生了改变, 不再是全局域, 而是 m2, 因此此时的 this=m2, 因此 this.foo=m2.foo, 但是由于在 alert(this.foo) 时,m2 中的 this.foo 还未被定义, 因此提示 undefined 2 若要 m1=main() 与前面的 m2 产生的效果一致, 则 main() 函数要修改成为 function main(){alert(foo);foo=undefined;alert(this.foo); 即可 No.9 实现如下图所示的布局要求 : sidebar 固定宽度 200px,content 和 header 宽度自适应当 window 宽度小于 600px 时, 变成三行布局默认如下宽度小于 600px 时如下下面是 html 结构 :

1 var m1=main() 时,alert 的结果是 undefined 和 1, 原因是首先在 alert(foo) 的时候,foo 在 main() 函数域内还没有被定义, 因此提示 undefined, 而在输出 this.foo 时, 因为此时的函数执行环境是全局域, 相当于 window.

9 <div class='header'> </div> <h1>header</h1> <div class="sidebar> </div> <h1">sidebar"</h1> <div class="content"> </div> <h1>content</h1> 请写出其 css 代码 : ( 提示, 可以使用 media query 来检测浏览器窗口宽度 ) No.10 写一段脚本, 实现 : 当页面上任意一个链接被点击的时候,alert 出这个链接在页面上的顺序号, 如第一个链接则 alert(1), 依次类推 ; window.onload = function() { ; var l = document.links.length; for (var i = 0; i < l; i++) { document.links[i].onclick = function(x) { (i); return function() { ; alert(x + 1);

10 写一段脚本, 实现 : 当页面上任意一个链接被点击的时候,alert 出这个链接在页面上的顺序号, 如第一个链接则 alert(1), 依次类推 ;

10 No.11 请用 html5 标准完成以下页面布局 ( 要求完整书写整个页面的 html 代码, 不需要写 CSS) 解答 <!DOCTYPE html> <html> <head> <title>html5</title> </head> <body> </body> <header></header> <nav></nav>

11 <div> <aside></aside> <section></section> </div> <footer></footer> </body> </html> No.12 有一个页面区块如图所示, 请用符合语义化的标签书写 HTML 代码解答 <div class="shop-rate"> <h4> 店铺动态评分 <span class="compare"> 与同行业相比 </span> </h4> <ul class="render-byjs"> <li> 描述相符 : <a href="" target="_blank"> <em class="count" title="4.8">4.8</em> <span class="rateinfo" title=""> <b></b> <em>16.14%</em> </span> </a> </li> <li> 服务态度 : <a href="" target="_blank"> <em class="count" title="4.8">4.8</em> <span class="rateinfo" title=""> <b></b> <em>13.32%</em> </span> </a> </li> <li> 发货速度 : <a href="" target="_blank"> <em class="count" title="4.8">4.8</em> <span class="rateinfo" title=""> <b></b>

class="render-byjs"> <li> 描述相符 : <a href="" target="_blank"> <em class="count" title="4.8">4.8</em> <span class="rateinfo" title=""> <b></b> <em>16.

12 <em>29.57%</em> </span> </a> </li> </ul> </div> No.13 在 CSS 样式中常使用 px em 两种长度单位, 各有什么优劣, 在表现上有什么区别? px 是像素,em 是相对单位,em, 在缩放查看网页时, 能准确缩放文字使用 px 作为尺寸时, 部分浏览器中放大页面时, 文字不会变大 No.14 (new Date).getTime() 和 +new Date() 都可以取到当前时间戳, 它们的实现原理是什么, 哪个效率更高? No.15 在 tmall.com 的某个页面中存在一个 id 等于 J_iframe_taobao 的 iframe, 该 iframe 的域名是 taobao.com 在不考虑 IE 浏览器的情况下, 用最简洁的代码实现页面与该 iframe 进行双向通信?... <iframe id="j_iframe_taobao" src=" 这题太囧了, 我这个肯定不是最佳答案了, 欢迎给出更简洁的方法父页面监听 var cb = function(json){ if(json){ if(json == 'SUCC') { QT.WM.close(); else {

getTime() 和 +new Date() 都可以取到当前时间戳, 它们的实现原理是什么, 哪个效率更高? No.15 在 tmall.com 的某个页面中存在一个 id 等于 J_iframe_taobao 的 iframe, 该 iframe 的域名是 taobao.

13 json = $.parsejson(json); wan360.appurl = json.appurl; wan360.appname = json.appname; ; 子页面发送 : wan360.xdomain.listen({app: cb); wan360.xdomain.sendmessage(window.parent,'{"appurl":"'+app.appurl+'", "appname":"'+app.appname+'"','app'); 好吧, 答案应该是 html5 的 postmessage, 下面的代码可能有误 ~ No.16 var onmessage = function(e) { ; var data = e.data,p = document.createelement_x('p'); p.innerhtml = data; document.getelementbyid('j_iframe_taobao').appendchild(p); // 监听 postmessage 消息事件 if (typeof window.addeventlistener!= 'undefined') { window.addeventlistener('message', onmessage, false); else if (typeof window.attachevent!= 'undefined') { window.attachevent('onmessage', onmessage); 请写一个 getparents 方法让它可以获取某一个 DOM 元素的所有父亲节点

data,p = document.createelement_x('p'); p.innerhtml = data; document.getelementbyid('j_iframe_taobao').appendchild(p); // 监听 postmessage 消息事件 if (typeof window.addeventlistener!

14 No.17 请写出至少 5 个 html5 新增的标签, 并说明其语义和应用场景 canvas 标签定义图形, 比如图表和其他图像这个 HTML 元素是为了客户端矢量图形而设计的它自己没有行为, 但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上 command 标签定义命令按钮, 比如单选按钮复选框或按钮 datalist 标签定义可选数据的列表与 input 元素配合使用, 就可以制作出输入值的下拉列表 details 标签定义元素的细节, 用户可进行查看, 或通过点击进行隐藏与 legend 一起使用, 来制作 detail 的标题该标题对用户是可见的, 当在其上点击时可打开或关闭 detail hgroup 标签用于对网页或区段 (section) 的标题进行组合 mark 主要用来在视觉上向用户呈现那些需要突出的文字 mark 标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词 No.18 有哪些前端代码优化 / 性能优化的方法? Yslow-23 条规则 pagespeed No.19 请列举所知道的 css 选择器, 并说明怎么判断优先级? 标签名选择器, 如 :p{, 即直接使用 HTML 标签作为选择器类选择器, 如.polaris{ ID 选择器, 如 #polaris{ 后代选择器, 如.polaris span img{, 后代选贼器实际上是使用多个选择器加上中间的空格来找到具体的要控制标签群组选择器, 如 div,span,img{, 群组选择器实际上是对 CSS 的一种简化写法, 只不过把有相同定义的不同选择器放在一起, 省了很多代码一般而言, 选择器越特殊, 它的优先级越高也就是选择器指向的越准确, 它的优先级就越高 No.20

进行查看, 或通过点击进行隐藏与 legend 一起使用, 来制作 detail 的标题该标题对用户是可见的, 当在其上点击时可打开或关闭 detail hgroup 标签用于对网页或区段 (section) 的标题进行组合 mark 主要用来在视觉上向用户呈现

15 有一个数组, 其中保存的都是小写英文字符串, 现在要把它按照除了第一个字母外的字符的字典顺序 ( 字典顺序就是按首字母从 a-z 顺序排列, 如果首字母相同则按第二个字母 ) 排序, 请编写代码 : 例 : ["abd","cba","ba",] 排序后 ["ba","cba","abd"] #include <iostream.h> #include <cstdio.h> #include <cstring.h> #include <algorithm.h> using namespace std; #define STRINGN 128 #define MAXN 1024 struct data { ; char name[stringn]; data array[maxn]; bool cmp(data x,data y) { return strcmp(x.name + 1, y.name + 1) < 0; int main() { #ifdef TEST freopen("input", "r", stdin); freopen("output", "w", stdout); #endif int n; for (n = 0; cin >> array[n].name; ++ n); sort(array,array+n,cmp); for (int i = 0; i < n; ++ i)

h> using namespace std; #define STRINGN 128 #define MAXN 1024 struct data { ; char name[stringn]; data array[maxn]; bool cmp(data x,data y) { return strcmp(x.name + 1, y.

16 cout << array[i].name << endl; return 0; /*code by lihao*/ No 你了解 arguments 对象么, 它有哪些属性? 2.arguments 是数组么? 如果不是请写一段代码将其转化为真正的数组, 什么情况下需要这么做? 3.arguments 有什么特性, 可以用这些特性做什么? function A(){ No.22 var Args = Array.prototype.slice.call(arguments, 0); B(Args.slice(1)); 请为 JavaScript 每个 Array 对象添加一个类似于 PHP 的 shuffle() 的方法 var data = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9); if (!Array.prototype.shuffle) { Array.prototype.shuffle = function() { for(var j, x, i = this.length; i; j = parseint(math.random() * i), x = this[--i], this[i] = this[j], this[j] = x); No.23 ; return this; alert(data.shuffle());

call(arguments, 0); B(Args.slice(1)); 请为 JavaScript 每个 Array 对象添加一个类似于 PHP 的 shuffle() 的方法 var data = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9); if (!Array.prototype.

17 CSS 的伪类和伪元素有什么区别? 请举例伪元素的几种应用场景 No.24 页面中有个 id 为 J_banner 的区块, 请使用 CSS 实现在普通屏幕上使用图片 banner.png 为背景, 在 retina 屏幕上显示更高分辨率的图片 banner_retina.png 作为背景 <div id="j_banner">... </div> css3 的 images-set 属性 background-image: url(1x.png); background-image: -webkit-image-set(url(1x.png) 1x,url(2x.png) 2x); No.25 下面是一段 html 代码, 展示效果如图 A 所示请给出一段 css, 使这段代码达到图 B 的展示效果 <ul> <li>

png 为背景, 在 retina 屏幕上显示更高分辨率的图片 banner_retina.png 作为背景 <div id="j_banner">.

18 <a href="#"><img width="100" height="100" src="a.jpg /></a> <p> 文字一 </p> </li> <li> <a href="#"><img width="100" height="100" src="a.jpg" /></a> <p> 文字二 </p> </li> </ul> <ul> <li> 文字三 </li> <li> 文字四 </li> <li> 文字五 </li> <li> 文字六 </li> </ul> 要求 : 1. 不允许修改 html 结构 ; 2.css 不必考虑浏览器默认样式的因素, 布局正确即可 ; 3. 不要求严格对齐, 如有需要, 元素尺寸可自定义页面上有一个节点 <div id="a" style="background-color:#000; width:200px; height:200px;"></div>, 请实现当鼠标移至该节点时, 该节点的透明度从 100 渐变为 20: No.26 var a = [-3,-1,0,1,3,5,7,9], b = [-4,-2,0,2,3,4,5,6,7,8]; // 返回一个合并过的数组 [-4,-3,-2,-1,0,0,1,2,3,3,4,5,5,6,7,7,8,9] No.27 // 请补全下面的函数, 仅当 p 为数组时返回 true. // 可给出多种实现方式, 每种实现方式不一定完美, 如果不完美, 需要说明每种实

19 现的限制 function isarray(p) { // 你的代码在这里 No.28 <p class="a b">1</p> <p class="b c">2</p> <p class="c a">3</p> 请编写一段 css, 让数字 1 颜色变蓝 p:first-child{color:blue No.29 请让页面中的一个元素 (10px*10px) 围绕坐标 (200, 300) 做圆周运动 No.30 用 HTML 实现下面表格的结构 : No.31 'data-' 属性的作用是什么? data- 为前端开发者提供自定义的属性, 这些属性集可以通过对象的 dataset 属性获取, 不支持该属性的浏览器可以通过 getattribute 方法获取 ppk 提到过

p:first-child{color:blue No.29 请让页面中的一个元素 (10px*10px) 围绕坐标 (200, 300) 做圆周运动 No.

20 使用 rel 属性,lightbox 库推广了 rel 属性,HTML5 提供了 data- 做替代, 这样可以更好地使用自定义的属性 No.32 请列举 CSS 中用于隐藏元素的两个属性? 两者的差异? display:none 和 visibility: hidden; 前者不占位, 后者占位 No.33 在 jquery 中, 选择器使用的是 sizzle,sizzle 的基本原理是从后往前查找, 比如选择器.a >.b >.c", 是先查找 ".c" 而不是 ".a" 请解释为什么大部分情况下从后往前比从前往后查找速度更快 No.34 // 现有代码如下 : var a = 1; var obj = { b : 2 ; var fn = function() {; fn.c = 3; function test(x, y, z) { x = 4; y.b = 5; z.c = 6; return z; test(a, obj, fn); alert(a + obj.b + fn.c); // 这段代码能够正常运行么? 如果不能正常运行, 请说明原因. // 如果可以运行, 最后一行 alert 的值是多少, 并请说明原因. No.35 请编写一段程序, 将一个对象和它直接间接引用的所有对象的属性字符串放入一个数组如 var o = {a:1,{b:2,c:{d:1 这里 o 经过处理后, 应该得到 ["a","b","c","d"] No.36

a" 请解释为什么大部分情况下从后往前比从前往后查找速度更快 No.34 // 现有代码如下 : var a = 1; var obj = { b : 2 ; var fn = function() {; fn.c = 3; function test(x, y, z) { x = 4; y.b = 5; z.

21 请举两个例子, 解释一下 strong 和 em 标签用法有何不同? em 表示内容的着重点 (stress emphasis),strong 表示内容的重要性 (strong importance),strong 不会改变所在句子的语意,em 则会改变所在句子的语义 No.37 请用实现一个最简单的输入框提示功能要求 : 1. 输入框内默认显示提示文案, 当用户点击输入框后, 光标定位到输入框最前, 并继续显示提示文案, 当用户输入后替换默认提示文案, 当用户清空输入框后从新显示默认提示文案 2. 要求支持 ie(6,7,8,9),firefox,chrome 等浏览器 3. 请写出 html 结构,javascript 代码逻辑部分写出实现思路即可 ( 有时间能写出代码者最佳, 可以使用 js 库 )

第2章数据类型、常量与变量

第2章数据类型、常量与变量第 2 章数据类型常量与变量在计算机程序中都是通过值 (value) 来进行运算的, 能够表示并操作值的类型为数据类型在本章里将会介绍 JavaScript 中的常量 (literal) 变量 (variable) 和数据类型 (data type) 2.1 基本数据类型 JavaScript