Gather ye rosebuds while ye may

Fontend Test

扫盲教育
…

随便找了一份前端的测试题来做
想看原版的可以点这里

No.1

这里用到了css3中的display: box和box-flex
题目里面html结构已经规定了，对于元素的选择只能使用first-child,nth-child()了

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
.box {
            background-color: darkcyan;
            display: box;
            display: -moz-box;
            display: -webkit-box;
            height: 50px;
            line-height: 30px;
            text-indent: 10px;
            width: 100%;
        }

.item {
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            -ms-box-flex: 1;
            box-flex: 1;
            margin: 10px;
        }

.item:first-child {
            -webkit-box-flex: 0;
            -moz-box-flex: 0;
            -ms-box-flex: 0;
            box-flex: 0;
            width: 200px;
        }

.item:nth-child(2) {
            margin: 10px 0;
        }

注意box-flex: 1的情况下，所有盒子的缩放比例都是一样的
所以后面还要把第一个盒子的该属性改回到0

No.2

实现水平和垂直方向的居中
参考这一篇文章以及后续一共四篇，都是关于居中的。

绝对居中

用于父元素为position: relative，子元素为position: absolute：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.boxA {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: green;
        }

.boxB {
            position: absolute;
            max-width: 300px;
            max-height: 300px;
            background-color: blue;
            margin: auto;
            top: 0; left: 0; bottom: 0; right: 0;
        }

利用transform达到负边距

感觉这个最常用
设置left: 50%;top: 50%之后
再margin一个负值，以达到居中的目的
这里由于子元素是可变的，所以可以利用transform
可变大小的元素也能居中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.boxA {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: green;
        }

.boxB {
            position: absolute;
            max-width: 300px;
            max-height: 300px;
            background-color: blue;
            margin: auto;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        }

假如不是 absolute

这里用到了inline-block和vertical-align来居中
伪元素:after相当于给这个inline-block一个高度
这个算是css hack的一部分了

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
.boxA {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: green;
            
            text-align: center;
        }

.boxA:after, .boxB {
            display: inline-block;
            vertical-align: middle;
        }

.boxA:after {
            content: '';
            height: 100%;
        }

.boxB {
            /*position: absolute;*/
            max-width: 300px;
            max-height: 300px;
            background-color: blue;
        }

No.3

html

要求语义化，结构良好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="shareContentPublisher">
    <form method="post" action="">
        <div class="titleArea">
            <div class="contentTypeChooser">
                <input type="radio" id="shareRadio" class="radio" checked="checked" />
                <label class="label" for="shareRadio">分享</label>
                <input type="radio" id="meetingRadio" class="radio" />
                <label class="label" for="meetingRadio">开会</label>
            </div>
            <div class="contentSum"><span>0</span>/1500</div>
        </div>
        <div class="inputArea">
            <textarea id="shareContentArea" placeholder="请输入你的分享, 1500字以内"></textarea>
        </div>
        <div class="funcArea">
            <input type="submit" value="发布" class="submit button">
        </div>
    </form>
</div>

至于怎么取消radio的标签，点这里。
三角形的框，我想最好还是用背景图最好，checked {background-image} 这样。

js

这个真不会，不忙查属性了
先把别人的答案放这里。

1
2
3
4
5
jQuery(document).ready(function (a) {
    a("#message").bind("focus keyup input paste", function () {
        this.value.length > 1500 ? (this.value = a(this).attr("value").text(a(this).attr("value").length))
    })
})

No.4

直接执行一遍 按时间输出 0， 2， 3

定时器会异步的，不会阻塞，所以会先执行下一个赋值命令

按时间顺序是这样的：

  1. alert(0)
  2. 第一个开始计时
  3. a = 2
  4. 第二个开始计时
  5. 第一个时间到了
  6. alert(a)
  7. a = 3
  8. 第二个时间到了
  9. alert(a)
  10. a = 4

No.5

这个也是查的，感觉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
! function($) {
    /* CSS TRANSITION SUPPORT (http://www.modernizr.com/)
     * ======================================================= */
    $(function() {
        $.support.transition = (function() {
            var transitionEnd = (function() {
                var el = document.createElement('bootstrap'),
                    transEndEventNames = {
                        'WebkitTransition': 'webkitTransitionEnd',
                        'MozTransition': 'transitionend',
                        'OTransition': 'oTransitionEnd otransitionend',
                        'transition': 'transitionend'
                    },
                    name;
                for (name in transEndEventNames) {
                    if (el.style[name] !== undefined) {
                        return transEndEventNames[name];
                    }
                }
            }());
            return transitionEnd && {
                end: transitionEnd
            };
        })();
    });
}(window.jQuery);

检查box-shadow同理，也是生成一个元素时，同时生成一个transition属性，然后检查这个属性是否是undefined。从而达到检查浏览器是否支持的目的。

No.6

当时阿里电话面就问了这个问题，我当时还什么都不懂。
这一题算是最简单了的吧？

1
2
3
4
5
6
7
8
var $textareaPlaceholderText = $('#textarea').attr('placeholder');
$('#textarea').focus(function() {
    /* Act on the event */
    $(this).attr('placeholder','');
});
$('#textarea').blur(function() {
    $(this).attr('placeholder',$textareaPlaceholderText);
});

原版的javascript居然想了半天才写出来：
1
2
3
4
5
6
7
8
9
10
11
12
<textarea id="textarea" placeholder="123123123" onfocus="onf()" onblur="onb()"></textarea>
</body>
<script>
var ta = document.getElementById('textarea'),
te = ta.getAttribute('placeholder');
function onf(){
    ta.setAttribute('placeholder','');
}
function onb(){
    ta.setAttribute('placeholder',te);
}
</script>

No.7

alert(Function instanceof Object); // true
alert(Object instanceof Function); // ture

show you the codes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
alert(typeof(1)); //number
alert(typeof("abc")); //string
alert(typeof(true)); //boolean
alert(typeof(2009 - 2 - 4)); //number，equals 2004 
alert(typeof("2009-2-4")); //string
alert(typeof(m)); //undefined
/*--------d is a Date--------*/
var d = new Date();
alert(typeof(d)); //object
/*--------Person is a function--------*/
function Person() {}
alert(typeof(Person)); //function
/*--------a is an array--------*/
a = new Array([]);
alert(typeof(a)); //object
/*--------x instanceof y--------*/
alert(a instanceof Array);
var h = new Person();
var o = {};
alert(Person instanceof Function); //true
alert(h instanceof Object); //true
alert(o instanceof Object); //true
alert(typeof(h)); //object

注意，构造时的大写Object和Function都是函数类型。
但是，实例化的函数都是object类型，实例化之前是undefined。

No.8

首先看答案：

1
2
3
4
5
6
7
var m1 = main();
foo: undefined
this.foo: 1

var m1 = new main();
foo: undefined
this.foo: undefined

不知道怎么解释呢。。。
私以为第一个值是undefined的原因是main内重新申明了相同名的变量，从而覆盖了外部的变量，所以是undefined。
第二个值在指向全局变量，所以第一个值是1，但是第二个是new的，不再是全局的，所以也是没有定义undefined。

No.9

还是css简单。。。
shut up and give you the code:

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
38
<style type="text/css" media="screen">
.header, .sidebar, .content {
    height: 50px;
    margin: 1px 0;
}
.header {
    width: 100%;
    background-color: red;
    display: block;
}
.sidebar {
    width: 200px;
    background-color: green;
    display: inline-block;
}
.content {
    width: calc(100% - 204px);
    background-color: blue;
    display: inline-block;
}
@media screen and (max-width:600px) {
    .sidebar, .content, .header {
        width: 100%;
        display: inline-block;
    }
}
</style>
<body>
    <div class="header">
        <h1>header</h1>
    </div>
    <div class="sidebar">
        <h1>sidebar</h1>
    </div>
    <div class="content">
        <h1>content</h1>
    </div>
</body>

只有一个问题，Safari里面貌似inline-block自带了有margin: 1px;，然后上面就要减去204。
然而在Chrome里面就变成了206，Firefox又是205。
这里规定了html格式的，不然就可以用flex。
父元素设置display: flex; flex-flow: row;，子元素设置就可以flex/space-between/flex-grow解决了。
可能这道题的考点是@media screen and (max-width: 600px)？

No.10

本来还说先遍历网页上的所有链接放数组里，然后每一个点击的时候都indexOf找一下。
看了标答我就震惊了，居然js自带了这个数组了：

1
2
3
4
5
6
7
8
9
10
window.onload = function() {
	var l = document.links.length;
	for (var i = 0; i < l; i++) {
		document.links[i].onclick = function(x) {
			return function () {
				alert(x + 1);
			};
		} (i);
	}
};

这里注意一下最里面用了一个闭包传x的值，for循环里面经常出这样的错误，你以为会每一次都会不一样，naive，直接输出，结果都一样。
还有就是不要忘了function定义之后加(参数)相当于执行。

未完待续