前端笔试题集合（三）

欢迎大家不吝赐教。

No.21

‘data-’属性的作用是什么？

data-为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过getAttribute方法获取。ppk提到过使用rel属性，lightbox库推广了rel属性，HTML5提供了data-做替代，这样可以更好地使用自定义的属性。

No.22

请为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);
            return this;
        };
    }     
    alert(data.shuffle());

No.23

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> 
<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=” 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.
//可给出多种实现方式,每种实现方式不一定完美,如果不完美,需要说明每种实现的限制
function isArray(p) {
//你的代码在这里
}

No.28

<p>1</p>
<p>2</p>
<p>3</p>

请编写一段css，让数字1颜色变蓝

p:first-child{color:blue}

No.29

请让页面中的一个元素（10px*10px）围绕坐标(200, 300) 做圆周运动

No.30

用HTML实现下面表格的结构：

转载于:https://www.cnblogs.com/tryao/p/3936110.html