前端笔试题

最新推荐文章于 2024-07-09 19:23:02 发布

凉城以北夜微凉

最新推荐文章于 2024-07-09 19:23:02 发布

阅读量789

点赞数 1

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/hello_mujinhua/article/details/73293312

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、时间绑定的方法

1、在Dom元素上直接绑定

<input type="button" value="点我呦" οnclick="alert("hello world!")"/>
<!--或者-->
<input type="button" value="点我呦" οnclick="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").οnclick=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';
//设置一个cookie
function 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);

//获取一个cookie
function 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 '';
}
//删除一个cookie
function 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.οnlοad=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.οnmοuseοut=play;
        container.οnmοuseοver=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.οnclick=function(){
            index-=1;
            if(index<1){
                index=4;
            }
            console.log(index);
            buttonsShow();
            animate(600);
        }
        next.οnclick=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>

凉城以北夜微凉

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端笔试题

一、时间绑定的方法1、在Dom元素上直接绑定 function testAlert(){ alert("hello world!"); }2、js代码中绑定 document.getElementById("demo").onclick=function testAlert(){ alert("hello world!"); }3、绑
复制链接

扫一扫

专栏目录