Gather ye rosebuds while ye may

Fontend Test

    前端
  1. No.1
  2. No.2
    1. 绝对居中
    2. 利用transform达到负边距
    3. 假如不是 absolute
  3. No.3
    1. html
    2. js
  4. No.4
  5. No.5
  6. No.6
  7. No.7
  8. No.8
  9. No.9
  10. No.10

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

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定义之后加(参数)相当于执行。

未完待续

页阅读量:  ・  站访问量:  ・  站访客数: