说明:部分答案整理自网络
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;}
<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;}
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; }; }; }
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;}
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
(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>
(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;}
偶表示轮询真的不懂,只能google了
异步是一种通信机制,调用发出后,直接返回,因为不能立即得到结果,所以没有返回值,但是之后被调用者会通过状态、通知,或通过回调函数处理这个调用。 轮询是一种“拉”取信息的工作模式。设置一个定时器,定时询问服务器是否有信息,每次建立连接传输数据之后,链接会关闭。实现焦点轮播图可以通过对所有的焦点设置点击事件,同时利用定时器改变其中让图片进行轮播,话不多说吧,贴上我上次实现的代码: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]; }}