前端笔试题

来源：互联网发布：ati hd 4850 mac 编辑：程序博客网时间：2024/05/17 02:04

一、时间绑定的方法

1、在Dom元素上直接绑定

<input type="button" value="点我呦" onclick="alert("hello world!")"/><!--或者--><input type="button" value="点我呦" onclick="testAlert()"><script type="text/javascript">  function testAlert(){   alert("hello world!");  }</script>

2、js代码中绑定

<input type="button" value="点我呦" id="demo"><script type="text/javascript">   document.getElementById("demo").onclick=function testAlert(){   alert("hello world!");  }</script>

3、绑定事件监听函数

这里需要了解addEventListener()和attachEvent()的函数语法。

1 elementObject.addEventListener(eventName,handle,useCapture) （支持主流浏览器、以及IE9.0及以上）

eventName:要绑定的事件名称。注意写法，比如点击事件，写成click,而不是onclick.

handle: 处理事件的函数名。但是写法上没有小括号。

useCapture:Boolean类型，是否使用捕获，一般用false，具体涉及到的会在后边总结。

2 elementObject.attachEvent(eventName,handle);（仅支持IE8及以下）

从网上找到了一个兼容的好办法，相比较if。。else语句，这个方法用的是try..catch错误处理语句，可以避免浏览器出现错误提示。

function addEvent(obj,type,handle){  try{   obj.addEventListener(type,handle,false);  }catch(e){   try{    obj.attachEvent('on'+type,handle);   }   catch(e){    obj['on' + type]=handle;//早期浏览器   }  }}

二、jquery中几种事件绑定方法

主要有on()、bind()、live()、delegate()等几种，相对应的解绑就是off()、unbind()、live()、undelegate();

1 on()、bind()、live()、delegate()中除了bind()，其他的都可以给后来追加的元素对象添加绑定事件。

2 这几种方法中各自有对应支持的JQuery版本。

3 在给动态添加的页面元素绑定事件时，通常用on()方法。

三、将location.search转化为对象的形式{}

function formateSearch(se){    if(typeof se!=="undefined"){        se=se.substr(1);        var arr=se.split("&"),        obj={},newarr=[];        $.each(arr,function(i,v){        newarr=v.split("=");        if(typeof obj[newarr[0]]==="undefined"){            obj[newarr[0]]=newarr[1];        }        });        return obj;    }}

4、设置、获取、移除cookie

document.cookie='ac=123';//设置一个cookiefunction setCookie(name,value,iDay){    if(iDay){        var oDate=new Date();        oDate.setDate(oDate.getDate()+iDay);        document.cookie=name+'='+value+';path=/;expires='+oDate;     }else{        document.cookie=name+'='+value+';path=/';    }}setCookie('asd','123');setCookie('qwe','rdf',3);//获取一个cookiefunction getCookie(name){    var arr=document.cookie.split(';');    for(var i=0;i<arr.length;i++){        var tmp=arr[i].split('=');        if(name==tmp[0]){            return tmp[1];        }    }    return '';}//删除一个cookiefunction removeCookie(name){    setCookie(name,'asd',-1);}removeCookie('asd');

五、轮播图实现

<!DOCTYPE html> <html> <head>     <title></title>     <style type="text/css">         *{            margin:0;            padding:0;         }         body{            padding:20px;         }         #container{            position: relative;            width:600px;            height:400px;            border:3px solid #333;            overflow: hidden;         }         #list{            position: absolute;            z-index:1;            width:4200px;            height:400px;         }         #list img{            float:left;            width:600px;            height:400px;         }         #button{            position: absolute;            left:250px;            bottom:20px;            z-index:2;            height:10px;            width: 100px;         }         #button span{            float:left;            margin-right:5px;            width:10px;            height:10px;            border:1px solid #fff;            border-radius:5px;            -webkit-border-radius:5px;            background-color: #333;            cursor:pointer;         }         #button .on{            background-color: orangered;         }         .arrow{            position: absolute;            top:180px;            z-index:2;            display: none;            width: 40px;            height:40px;            font-size:36px;            font-weight:bold;            line-height:39px;            text-align: center;            color: #fff;            background-color: rgba(0,0,0,.3);            cursor:pointer;         }         .arrow:hover{            background-color: rgba(0,0,0,.7);         }         #container:hover .arrow{            display: block;         }         #prev{            left:20px;         }         #next{            right:20px;         }     </style> </head> <body>    <div id="container">        <div id="list" style="left:-600px;">            <img src="6.jpg" alt="1">            <img src="3.jpg" alt="1">            <img src="4.jpg" alt="2">            <img src="5.jpg" alt="3">            <img src="6.jpg" alt="4">            <img src="3.jpg" alt="4">        </div>        <div id="button">            <span index="1" class="on"></span>            <span index="2"></span>            <span index="3"></span>            <span index="4"></span>        </div>        <a href="javascript:;" id="prev" class="arrow"><</a>        <a href="javascript:;" id="next" class="arrow">></a>    </div>    <script type="text/javascript">        window.onload=function(){            var list=document.getElementById('list');            var prev=document.getElementById('prev');            var next=document.getElementById('next');            function animate(offset){                var newLeft=parseInt(list.style.left)+offset;                list.style.left=newLeft+'px';                if(newLeft<-2400){                    list.style.left=-600+'px';                }                if(newLeft>-600){                    list.style.left=-2400+'px';                }                             }              //实现自动轮播效果        var timer=null;        function play(){            timer=setInterval(function(){                next.onclick();            },3000);        }        play();        var container=document.getElementById('container');        function stop(){            clearInterval(timer);        }        container.onmouseout=play;        container.onmouseover=stop;        var buttons=document.getElementsByTagName('span');        var index=1;        function buttonsShow(){            //先清除之前的样式            for(var i=0;i<buttons.length;i++){                if(buttons[i].className=='on'){                    buttons[i].className='';                }            }            //数组从0开始            buttons[index-1].className='on';        }        prev.onclick=function(){            index-=1;            if(index<1){                index=4;            }            console.log(index);            buttonsShow();            animate(600);        }        next.onclick=function(){            index+=1;            if(index>4){                index=1;            }            console.log(index);            buttonsShow();            animate(-600);        }        //这里使用了闭包        for (var i = 0; i < buttons.length; i++) {                // 这里使用的是立即执行函数，                (function(i) {                    buttons[i].onclick = function() {                        var clickIndex = parseInt(this.getAttribute('index'));                        var offset = 600 * (index - clickIndex);                         animate(offset);                        index = clickIndex;                        buttonsShow();                    }                })(i)            }                    }           </script> </body> </html>

阅读全文

0 0