面试某公司前端题（初试一）
基础题（20分）
1、下面文字是什么颜色，为什么？（5分）
<style>
div {
color: black;
}
#red {
color: red;
}
.green {
color: green;
}
</style>
<div class="green" style='color: pink' id="red">
我是什么颜色？
</div>答案：
pink2、下面无效的代码是？（5分）
- [ ]
<span style="padding-left: 20px"></span> - [ ]
<input style="height: 20px"> - [x]
<a style="height: 20px"></a> - [ ]
<div style="height: 20px"></div>
为什么：
行内元素只能包含内容或者其它行内元素，宽度和长度依据内容而定，不可以设置3、关于HTTP状态码的描述，下面说法正确的是？（5分）
- [ ] 301 重定向
- [x] 302 页面永久性移走
- [ ] 404 资源不可用
- [ ] 500 服务器内部错误
4、对于下面的的代码，哪一个效果与其他的不同？（5分）
<p>
<span>A</span>
<span>B</span>
<span>C</span>
</p>- [x]
span:first-child - [ ]
span:nth-child(1) - [ ]
span:nth-child(-n+1) - [ ]
span:nth-last-child(3)
编程题（60分）
5、不改动下面代码，实现以下需求（6分）：
- 所有链接无下划线；（1分）
- 去掉
ul标签的样式（1分） - 鼠标移到链接上颜色变成
#58b368；（1分） 一级菜单链接颜色为
#009975, 二次菜单链接颜色为#d9d872；（3分）<div class="nav"> <ul> <li><a href="#">公司首页</a></li> <li><a href="#">公司简介</a></li> <li><a href="#">公司产品</a></li> <li> <a href="#">联系我们</a> <ul> <li><a href="#">公司邮箱</a></li> <li><a href="#">公司电话</a></li> </ul> </li> </ul> </div>
答案：
/* 写 CSS 样式 */
a{
color: #009975;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #58b368;
}
a:active {
text-decoration: none;
}
ul{
list-style: none;
}
ul li:nth-of-type(n+3) ul a{
color: #d9d872;
}
6、数组升序排序（6分）
sort([4, 3, 2, 1]) // [1, 2, 3, 4]
sort([1, 2, 10, 20]) // [1, 2, 10, 20]
sort([3, 2, -1, 2]) // [-1, 2, 2, 3]答案：
/*
填写思路
1冒泡排序
2或者利用array自带方法
arr.sort(function(a,b){
return a - b;
}
*/
function sort(arr） {
if(!(arr instanceof Array)){
return
}
var t = 0;
for(var i = 0;i < arr.length-1;i++)
for(var j = 0;j < arr.length-i-1;j++){
if(arr[j]>arr[j+1]){
t = arr[j+1];
arr[j+1] = arr[j];
arr[j] = t;
}
}
return arr
}7、向右移动 n 个字符（6分）
move('abcd', 2) // cdab
move('aabbcc', 3) // bccaab
move('ccbbaa', 3) // baaccb答案：
/*
填写思路
1.简单方法
用字符串对象自带方法substr(strat,length),然后pin接末尾
2.字符串转数组aplit(',')再利用数组操作完再转会字符串
*/
function move(str, n) {
return str.substr(str.length-n)+str.substr(0,str.length-n);
}8、颜色转换（6分）
converter(255, 255, 255) // #ffffff
converter(10, 10, 10) // #0a0a0a答案：
/*
填写思路
十进制转十六进制
*/
function converter(r, g, b) {
return '#'+r.toString(16)+g.toString(16)+b.toString(16)
}9、短横线转驼峰（6分）
converter('font-size') // fontSize
converter('-webkit-border-image') // webkitBorderImage答案：
/*
填写思路
1.正则/_(\w)/g
2.转数组split('-')
*/
function converter(str) {
let arr = str.split('-');
for (let i = 0; i < arr.length; i++) {
arr[i] = arr[i].slice(0,1).toUpperCase()+arr[i].slice(1)
}
return arr.join('')
/*正则
return s.replace(/_(\w)/g, function(all, letter) {
return letter.toUpperCase()
*/
}10、实现以下效果，放大镜素材在 image 目录下。（6分）
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: relative;
}
div img {
position: absolute;
left: 145px;
top: 6px;
}
</style>
</head>
<body>
<div>
<input type="text">
<img src="/image/s.png" alt="">
</div>
</body>
</html>
11、实现以下按钮原型：
答案：
<div>提交</div>
css
div {
display:inline-block;
padding: 14px 40px;
border-radius: 20px;
background-color: #3eb469;
color: #ffffff;
text-align: center;
cursor: pointer;
}12、使用 CSS 实现三列布局：
答案：
<style>
.container{
display: flex;
justify-content: space-between;
}
.layout-left {
width: 150px;
height: 400px;
background-color: #39f;
}
.layout-center {
width: 100%;
height: 400px;
background-color: #37f;
}
.layout-right {
width: 150px;
height: 400px;
background-color: #3bf;
}
</style>
<div class="container">
<div class='layout-left'></div>
<div class='layout-center'></div>
<div class='layout-right'></div>
</div>13、输入135 ~ 139号段和158、159号段的手机号. 请编写一段正则表达式,判断用户输入的手机号是否正确。（6分）
judge('12345678901') // false
judge('13745678901') // true
judge('1374567890') // false，不是有效的11位数
judge('15845678901') // true答案：
/*
填写思路
*/
function judge(phone){
if(phone.length<11){
return "false，不是有效的11位数"
}
if(!(/^1[3456789]d{9}$/.test(phone))){
return false;
}
return true
}14、编写一个方法,获取URL中的参数（6分）
getParams('http://www.xxx.com?a=1&b=2&c=3') // { a:'1' ,b:'2', c:'3' }
getParams('http://www.xxx.com?x=1&y=2') // { x:'1', y:'2' }答案：
/*
填写思路
*/
//取得查询字符串并去掉开头的问号
function getParams(params){
var qs = (params.length > 0 ? params.substring(params.indexOf("?")+1) : ""),
//保存数据的对象
args = {},
//取得每一项
items = qs.length ? qs.split("&") : [],
item = null,
name = null,
value = null,
//在 for 循环中使用
i = 0,
len = items.length;
//逐个将每一项添加到 args 对象中
for(i = 0; i < len; i++) {
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if(name.length) {
args[name] = value;
}
}
return args;
}问答题（20分）
15、你遇到过比较难的技术问题是？你是如何解决的？（5分）
最近在调用第三方api时候，出现跨域请求问题，最后用nginx反向代理解决16、了解过哪些前端框架，简单介绍下你是怎么使用的？（5分）
vue Jquery Bootstrap,简单一点直接看官方api，复杂一点先看网上别人写的简单一点demo,再看官方文档17、你有过学习前端的计划吗，你是怎么想的？（5分）
三大基础知识 -> Bootstrap+Jquery -> nodejs基础+Express -> vue + vue-cli
以上实我学习前端路线，最近在学小程序开发，后面再准备学习uiapp混合编程和Election使用，最后再更深入学习nodejs.18、除了前端以外还了解什么技术？你最厉害的技能是什么？（5分）
抓包分析测试接口Tags : javascript
Previous post
js解决异步回调地狱方式
Next post
面试某公司前端（复试二）
