10道实用的前端笔试题

说明:部分答案整理自网络

1、如何消除一个数组里面重复的元素(js)###

方法一:新建一个数组,利用indexOf()方法判断数组中的元素在新数组中的索引值是否为-1,是则添加到新数组中,将其封装成一个函数,如下:######
function unique(arry){
    var arry2=[];
    for(i=0;i
方法二:依旧利用indexOf()方法,检测原来数组中的元素索引值是否与i相等,如下:######
function unique(arry){
    var arry2=[];
    for(i=0;i

2、如何实现垂直居中(css)###

方法一:利用表格的vertical-align属性,当然首先将显示方式设置为表格,如下:######
your content
/*css*/ .content{ display:table; } .cell{ display:table-cell; vertical-align:middle; }
方法二:单行文本时,可以利用line-height属性,如下:######
your content
/*css*/ .content{ height:20px; line-height:20px; }

3、如何对一个绝对定位的元素实现拖拽效果(js)###

为元素添加mousedown事件,并获得鼠标的坐标与元素的top、left的差值,进一步添加mousemove事件通过所求的差值和鼠标的位置重新设置top和left的值,最后添加mouseup属性,清空mousedown与mouseove事件,如下:######
function drag(ele){
            ele.onmousedown=function(event){
                var disx=event.clientX-ele.offsetLeft;
                var disy=event.clientY-ele.offsetTop;
                document.onmousemove=function(event){
                    ele.style.left=event.clientX-disx+"px";
                    ele.style.top=event.clientY-disy+"px";
                };
                document.onmouseup=function(){
                    document.onmousedown=null;
                    document.onmousemove=null;
            };
        };
    }

4、实现ele.removeClass()的效果###

removeClass()方法是jQuery中的一个方法,该方法用来移除元素一个或多个类名,当没有参数时默认移除所有类名,用原生js模拟实现,原理是利用split()方法将元素的类名转换为数组,通过数组的indexOf()方法将需要删除的类名在元类名数组中的索引值找出来,再通过splice()方法将其删除,如下:######
function removeClass(ele,delClassArry){
    var claNameArry=ele.className.split(" ");
    if(delClassArry){
        for(i=0;i

5、如何使用js判断设备类型?###

利用 userAgent,userAgent的作用就是用来识别浏览器名称版本、引擎以及操作系统等信息的内容。如下:
var browser = {
 versions:function(){ 
 var u = navigator.userAgent, app = navigator.appVersion; 
 return ;
 }(),
 language:(navigator.browserLanguage || navigator.language).toLowerCase()
} 
document.writeln("语言版本: "+browser.language);
document.writeln(" 是否为移动终端: "+browser.versions.mobile);
document.writeln(" ios终端: "+browser.versions.ios);
document.writeln(" android终端: "+browser.versions.android);
document.writeln(" 是否为iPhone: "+browser.versions.iPhone);
document.writeln(" 是否iPad: "+browser.versions.iPad);
document.writeln(navigator.userAgent);

延伸阅读1
延伸阅读2

6、类似QQ空间或微博的换肤系统换你来实现,你会怎么做?###

个人认为可以准备多套皮肤的css,当用户选择换肤的时候就利用js将link的href属性值更换为目标皮肤的css######

7、如何在页面中插入音乐###

(1)利用HTML5中的audio标签,但是IE 8以及更低的版本不支持,如下:


(2)利用雅虎媒体播放器,如下:




8、实现一个生成随机颜色的函数###

我们平常在网页中的颜色模式一般选用的是十六进制和RGB模式,以下以这两种模式自动生成颜色,######

(1)十六进制模式,利用Math.random()方法生成0~1的随机自然数,再乘以十六进制模式下的最大值,并利用toString()方法将其转换为十六进制的数值,如下:

function color(){
    var color=Math.round(Math.random()*(16*16*16*16*16*16+16)).toString(16);
     if(color<=0xf){
        color="00000"+color;
     }
     else if(color<=0xff){
        color="0000"+color;
     }
     else if(color<=0xfff){
        color="000"+color;
     }
     else if(color<=0xffff){
        color="00"+color;
     }
     else if(a<=0xfffff){
        color="0"+color;
     }
     color="#"+color;
     return color;
}

(2)RGB模式,同上理,

function color(){
    var r=Math.round(Math.random()*255);
    var g=Math.round(Math.random()*255);
    var b=Math.round(Math.random()*255);
    var color="rgb("+r+","+g+","+b+")";
    return color;
}

9、什么是异步?什么是轮询?###

偶表示轮询真的不懂,只能google了

异步是一种通信机制,调用发出后,直接返回,因为不能立即得到结果,所以没有返回值,但是之后被调用者会通过状态、通知,或通过回调函数处理这个调用。######
轮询是一种“拉”取信息的工作模式。设置一个定时器,定时询问服务器是否有信息,每次建立连接传输数据之后,链接会关闭。

10、如何实现焦点轮播图效果?###

实现焦点轮播图可以通过对所有的焦点设置点击事件,同时利用定时器改变其中让图片进行轮播,话不多说吧,贴上我上次实现的代码:
html代码:

CSS代码:

.bisc-slider{
    position:relative;
    height:22.083333%;
    overflow: hidden;
}
.slide{
    opacity:0;
    z-index: 0;
    padding-bottom:22.083333%;
    width:100%;
    position:absolute;
}
.slide-01{
    opacity:1;
    z-index: 1;
}
.bisc-slider ul{
    padding-bottom:22.083333%;
}
.bisc-slider .slide img{
    position:absolute;
    left:0;
    top:0;
    width:100%
}
.dot-list{
    position:absolute;
    left:61.8%;
    bottom:10px;
    z-index: 9999999999;
}
.dot-list span{
    display:inline-block;
    width:10px;
    height:10px;
    margin:3px;
    border-radius: 5px;
    background:#fff;
    cursor: pointer;
}
.dot-list span:first-child{
    background:#365e7b;
}
#slide-prev{
    background:url(../img/arl.png) no-repeat center;
    height:100%;
    width:50px;
    position:absolute;
    left:-50px;
    top:0;
    z-index: 999999999;
    cursor:pointer;
}
#slide-next{
    background:url(../img/arr.png) no-repeat center;
    height:100%;
    width:50px;
    right:-50px;
    top:0;
    z-index:999999;
    position:absolute;
    cursor:pointer;
}

JavaScript代码:

var imgArr=document.getElementsByClassName("slide");
var dotArr=document.getElementsByClassName("dot");
var minNum=0;
var prevbtn=document.getElementById("slide-prev");
var nextbtn=document.getElementById("slide-next");
var btnAppear=document.getElementsByClassName("bisc-slider")[0];

btnAppear.onmouseover=function(){
    btnmove(prevbtn,"left",0,10);
    btnmove(nextbtn,"right",0,10);
}
btnAppear.onmouseout=function(){
    btnmove(prevbtn,"left",-50,-10);
    btnmove(nextbtn,"right",-50,-10);
}

function btnmove(ele,attr,itarget,speed){
    clearInterval(ele.timer);
    ele.timer=setInterval(function(){
        var curAttr=parseInt(getStyle(ele,attr));
        if(curAttr==itarget){
            clearInterval(ele.timer);
        }else{
            ele.style[attr]=curAttr+speed+"px";
        }
    }, 20);
}
/*自动轮换函数*/
function move(){
    if(minNum==imgArr.length-1){
        automove(imgArr[0],1);
        automove(imgArr[minNum],0);
        imgArr[0].id="slide-cur";
        for(i=0;i0){
            ispeed=Math.ceil(ispeed);
        }else{
            ispeed=Math.floor(ispeed);
        }
        if(cur==itarget){
            clearInterval(ele.timer);
        }else{
            ele.style.opacity=(cur+ispeed)/10000;
            ele.style.filter="alpha(opacity:"+cur+ispeed+")";
        }
    },30)
}
function getStyle(ele,attr){
    if(ele.currentStyle){
        return ele.currentStyle[attr];
    }else{
        return getComputedStyle(ele,false)[attr];
    }
}

最后是一个广告贴,最近新开了一个分享技术的公众号,欢迎大家关注

10道实用的前端笔试题_第1张图片

你可能感兴趣的:(10道实用的前端笔试题)