1、HTML&CSS(分别10分)
1. 一个div,宽度是100px,此时设置padding是20px,添加一个什么css属性可以让div的实际宽度仍然保持在100px,而不是140px?
box-sizing:border-box;
2. 清除浮动的方式,提供尽可能多的方案。
1. 找到父元素添加overflow : hidden
2. 额外标签 clear : both
3. 伪元素
clearfix :after {
content : "" ;
clear : both ;
height : 0;
line-height : 0;
display : block;
visibility :hidden;
}
3. 如何让两个div分别以40%和60%的比例排在一行内,提供尽可能多的方案。
//伪代码
//方法1
father-box{position: relative;}
son-left-box{position: absolute;width: 40%;}
son-right-box{position: absolute;margin-left: 40%;width:60%}
//方法2
father-box{}
son-left-box{float: left;width: 40%;}
son-right-box{float: right;width:60%;}
//方法3
father-box{display:flex}
son-left-box{width: 40%}
son-right-box{width:60%}
//方法4
display : inline-block 注 : 中间的空白文本元素
//欢迎补充
4. 如何用css实现一个div的一秒内向右平滑移动100px的动画。
1 transition:1s
2 @keyframes myfirst
{
from {margin-left: 0;}
to {margin-left: 100px;}
}
.box{
animation: myfirst 1s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
width: 1rem;
height: 1rem;
background: red;
}
5. localStorage,sessionStorage,Cookie的区别和用途。
cookie : 体积小 、每次发送请求时携带。可由服务端设置http-only的cookie,客户端也可以设置自己的cookie,可设置失效时间,浏览器关闭后失效。
localStorage : 体积大,除非手动清除否则不会消失
sessionStorage : 体积大,浏览器关闭后消失
2.正则题
var string = "我的账户余额:2,235,467.20"; console.log(?); // 请用js计算出我到底有多少钱(输出Number类型数字,代码尽量简洁,考虑通用情况)
parseFloat(string.match(/\d+|\./g).join(""))
3.作用域
function person() { return this.name; } var someOne = { name: 'Jenny', age: 18 }; // 此处如何输出 'Jenny'
person.call(someOne)
4.语法题
有一个合法的 JSON 对象(即不包含函数等值的对象),设计一个函数,取出该对象内所有 key 为 "id" 并且其值不为对象、数组的值,装入一个数组并返回。
function extractIds(data) {
// implement
}
样例数据:
var data = { id: 1, items: [ { id: 2 }, { item: 3, id: [ { id: 4 }, { id: 5 } ]} ] };
extractIds(data); // should return [ 1, 2, 4, 5 ]
解题
function getId(data){
let stack = [ data ] ,ret = [];
while(stack.length > 0){
let cur = stack.pop();
for(let key in cur){
if(cur[key] instanceof Object ){
stack.push(cur[key]);
}else{
if(key === "id") ret.push(cur[key]);
}
}
return ret ;
}
5.闭包
下面五段代码分别输出什么?并且什么时候输出什么?
for (var i = 0; i < 5; i++) {
console.log(i);
}
for (var i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i);
}, 1000 * i);
}
for (var i = 0; i < 5; i++) {
(function (i) {
setTimeout(function () {
console.log(i);
}, i * 1000);
})(i);
}
for (var i = 0; i < 5; i++) {
(function () {
setTimeout(function () {
console.log(i);
}, i * 1000);
})(i);
}
for (var i = 0; i < 5; i++) {
setTimeout((function (i) {
console.log(i);
})(i), i * 1000);
}
// _.pluck(list, propertyName)
_.pluck = function (obj, key) {
return _.map(obj, _.property(key));
};
答案
1. 立即输出0-4
2. 0-4秒间输出 5
3. 0-4秒间输出 0-4
4. 0-4秒间输出 5
5. 立即输出 0-4
6、创建一个二进制相加函数,根据传入的两个二进制数字符串返回一个相加的十进制的结果。
/*
* @param {String} a number a
* @param {String} b number b
* return {Number} the result
*/
function calculate(num1, num2){
// implement here
}
结果样例:
calculate("10", "10") // => 4
calculate("10", "0") // => 2
calculate("101", "10") // => 7