首页 >web前端 >html教程 >10道实用的前端笔试题_html/css_WEB-ITnose

10道实用的前端笔试题_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:24:311000浏览

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

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

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

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

方法一:利用表格的vertical-align属性,当然首先将显示方式设置为表格,如下:
<div class="content">    <div class="cell">      your content    </div></div>/*css*/.content{    display:table;}.cell{   display:table-cell;   vertical-align:middle;}
方法二:单行文本时,可以利用line-height属性,如下:
<div class="content">    your content</div>/*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<delClassArry.length;i++){            var index=claNameArry.indexOf(delClassArry[i]);            claNameArry.splice(index,1);        }    }else{        claNameArry.splice(0,claNameArry.length);    }    var nowClass="";    for(i=0;i<claNameArry.length;i++){        nowClass+=claNameArry[i];        if(i<claNameArry.length-1){            nowClass+=" ";        }    }    ele.className=nowClass;}

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以及更低的版本不支持,如下:

<audio src="songPath"></audio>

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

<a href="songPath"></a><srcipt type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

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代码:

<div class="bisc-slider">    <ul>        <li class="slide  slide-01" id="slide-cur"><img  src="../img/slide01-1920px.jpg" / alt="10道实用的前端笔试题_html/css_WEB-ITnose" ></li>        <li class="slide"><img  src="../img/slide02-1920px.jpg" / alt="10道实用的前端笔试题_html/css_WEB-ITnose" ></li>        <li class="slide"><img  src="../img/slide03-1920px.jpg" / alt="10道实用的前端笔试题_html/css_WEB-ITnose" ></li>        <li class="slide"><img  src="../img/slide04-1920px.jpg" / alt="10道实用的前端笔试题_html/css_WEB-ITnose" ></li>        <li class="slide"><img  src="../img/slide05-1920px.jpg" / alt="10道实用的前端笔试题_html/css_WEB-ITnose" ></li>    </ul>    <div class="dot-list">        <span class="dot"></span>        <span class="dot"></span>        <span class="dot"></span>        <span class="dot"></span>        <span class="dot"></span>    </div>    <span id="slide-prev"></span>    <span id="slide-next"></span></div>

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;i<dotArr.length;i++){            dotArr[i].style.backgroundColor="#fff";        }        dotArr[0].style.backgroundColor="#365e7b";        minNum=0;    }else{        automove(imgArr[minNum],0);        imgArr[minNum].id="";        minNum++;        automove(imgArr[minNum],1);        imgArr[minNum].id="slide-cur";        for(i=0;i<dotArr.length;i++){            dotArr[i].style.backgroundColor="#fff";        }        dotArr[minNum].style.backgroundColor="#365e7b";    }}var timer=setInterval(move,5000);function aaa(){    timer=setInterval(move,5000);}/*焦点点击事件*/for(i=0;i<dotArr.length;i++){    dotArr[i].index=i;    dotArr[i].onclick=function(){        if(imgArr[this.index].id!="slide-cur"){            for(i=0;i<dotArr.length;i++){            dotArr[i].style.backgroundColor="#fff";        }            var curImg=document.getElementById("slide-cur");            dotArr[this.index].style.backgroundColor="#365e7b";            automove(imgArr[this.index],1);            automove(curImg,0);            curImg.id="";            imgArr[this.index].id="slide-cur";            minNum=this.index;            return minNum;            clearInterval(timer);            var timer=setInterval(move,5000)    }}}prevbtn.onclick=function(){    if(minNum==0){        automove(imgArr[minNum],0);        imgArr[minNum].id="";        automove(imgArr[imgArr.length-1],1);        imgArr[imgArr.length-1].id="slide-cur";        for(i=0;i<dotArr.length;i++){            dotArr[i].style.backgroundColor="#fff";        }        dotArr[imgArr.length-1].style.backgroundColor="#365e7b";        minNum=imgArr.length-1;        return minNum;}else{    automove(imgArr[minNum],0);    imgArr[minNum].id="";    automove(imgArr[minNum-1],1);    imgArr[minNum-1].id="slide-cur";    for(i=0;i<dotArr.length;i++){            dotArr[i].style.backgroundColor="#fff";        }    dotArr[minNum-1].style.backgroundColor="#365e7b";    return minNum--;}}nextbtn.onclick=function(){    if(minNum==imgArr.length-1){        automove(imgArr[imgArr.length-1],0);        imgArr[minNum].id="";        automove(imgArr[0],1);        imgArr[0].id="slide-cur";        for(i=0;i<dotArr.length;i++){            dotArr[i].style.backgroundColor="#fff";        }        dotArr[0].style.backgroundColor="#365e7b";        return minNum=0;    }    automove(imgArr[minNum],0);    imgArr[minNum].id="";    automove(imgArr[minNum+1],1);    imgArr[minNum+1].id="slide-cur";    for(i=0;i<dotArr.length;i++){            dotArr[i].style.backgroundColor="#fff";        }    dotArr[minNum+1].style.backgroundColor="#365e7b";    return minNum++;}function automove(ele,itarget){    itarget=itarget*10000;    clearInterval(ele.timer);    ele.timer=setInterval(function(){        var cur=parseInt(getStyle(ele,"opacity")*10000);        var ispeed=(itarget-cur)/9;        if(ispeed>0){            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];    }}
声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn