码迷,mamicode.com
首页 > Web开发 > 详细

js试题

时间:2016-04-12 23:52:52      阅读:372      评论:0      收藏:0      [点我收藏+]

标签:

JavaScript 实现removeElement函数

技术分享
Element.prototype.removeElement = function() {
    this.parentElement.removeChild(this);
}
NodeList.prototype.removeElement = HTMLCollection.prototype.removeElement = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}
技术分享

通过原型链添加removeElement函数,使得每一个元素对象通过原型链共同享有一个removeElement的函数,实现删除元素。

 

解释:HTMLCollection 是一个接口,表示 HTML 元素的集合,它提供了可以遍历列表的方法和属性。

下面的每个项目(以及它们指定的属性)都返回 HTMLCollection:

  • Document (images, applets, links, forms, anchors)
  • form (elements)
  • map (areas)
  • select (options)
  • table (rows, tBodies)
  • tableSection (rows)
  • row (cells)

可以采用数组访问元素的方法(方括号)通过编号或名称索引查找项目,不必调用item()或者namedItem()方法;

 

删除元素节点的其他方法:

var deleteElement(elementId)=function(){
    var element = document.getElementById(elementId);
    element.outerHTML = "";
    delete element;
}

 

JS 实现添加和删除事件

function addEvent(element, type, handler) {
    // 检测handler是否有$$guid属性。如果没有,赋值为addEvent的guid属性,将addEvent的guid属性自增1
    // 假设handler没有$$guid属性,addEvent的guid为1,则经此判断,
    // handler会有一个$$guid属性,且值为1,而addEvent的guid属性值变成2
    if (!handler.$$guid)
        handler.$$guid = addEvent.guid++;
     
    // 检测element是否已经绑定过事件,如果没有绑定过,
    // 则默认设置为一个空对象,用于保存将要绑定的事件
    if (!element.events)
        element.events = {};
     
    // 获取已经绑定过的type类型的事件对象
    var handlers = element.events[type];
    // 如果还没有type类型的事件被绑定过,则设置该类型的事件为一个空对象,用于保存将要绑定的该类型的事件
    if (!handlers) {
        handlers = element.events[type] = {};
 
        /*
         if(element["on" + type]){
         handlers[0] = element["on" + type];
         }*/
    }
 
    //按照序号存进去
    handlers[handler.$$guid] = handler;
 
    //赋予一个全局事件处理函数来处理所有工作
    element["on" + type] = handleEvent;
 
}
 
// addEvent保存一个序号
addEvent.guid = 1;
 
// 移除事件
function removeEvent(element, type, handler) {
    // 如果element经过addEvent绑定过事件,并且也有type类型的事件
    if (element.events && element.events[type]) {
        // 删除element的type类型事件的handler处理器
        delete element.events[type][handler.$$guid];
    }
}
 
// 处理事件
function handleEvent(event) {
    // 默认返回值为true
    var returnValue = true;
    // 矫正事件对象event
    event = event || fixEvent(window.event);
    // 获取已绑定的type类型的处理器
    var handlers = this.events[event.type];
     
    // 遍历执行每一个处理器
    for (var i in handlers) {
        this.$$handleEvent = handlers[i];
        // 如果存在返回值为false的处理器,则设置返回值为false
        if (this.$$handleEvent(event) === false) {
            returnValue = false;
        }
    }
     
    // 返回处理结果
    return returnValue;
}

 

某饭店要开发一个排队软件。非VIP用户需要排队,先到先得。VIP用户可以插队,但是VIP用户之间需要按到达时间先后排队。   要求实现:①addCustomer(String phoneNumber)函数②有空位时获取排到的用户③用户进店排队时的函数current()

假设已知:MaxVolume;customer=[];

var addCustomer=function(customer){
    if(isVIP(customer.phoneNumber)){
        while(isVIP(customerList[customer.order])){
            customer.order ++;
        }
        customerList.splice(customer.order,0,customer);
    }
    else{
        customerList.push(customer);
    }
}

var getCustomer=function(customer,MaxCnt){
    if(customerList.length < MaxCnt){
        addCustomer(customer);
        return customerList.length;
    }
}

var current=function(customers){
    for(var i=0,len=customers.length;i++){
        addCustomer(customers[i]);
    }
}

 

 3.编程实现将中文的“贰仟零伍亿叁佰捌拾万零叁拾”转换为“200503800030”,语言不限。

var transformNumber=function(numberString){
    var numberForm={"零":0,"壹":1,"贰":2,"叁":3,"肆":4,"伍":5,"陆":6,"柒":7,"捌":8,"玖":9};
    var num={"拾":10,"佰":100,"仟":1000,"万":10000,"亿":100000000};
    var res=0,ans=0;
    var i=0,len=numberString.length;
    while(i<len){
        var temp = 0;
        if(numberForm.hasOwnProperty(numberString[i])){
            temp = numberForm[numberString[i]];
            i++;
            if(num.hasOwnProperty(numberString[i]) && numberString[i]!=="亿" && numberString[i]!=="万"){
                temp = temp*num[numberString[i]];
                i++;
            }
            res+=temp;
            if(numberString[i]==="亿" || numberString[i]==="万"){
                ans+=res*num[numberString[i]];
                res=0;
                i++;
            }
        }
    }
    return ans+res;
};

 4.用javascript实现乱序函数randomSort(array)函数,输出排序后的函数。如[1,2,3,4,5],输出[3,2,4,5,1]。要求100次以内不重复。

var randomSort=function(array){
    var tempArray=[];
    while(array.length){
        var random=Math.floor(Math.random()*array.length);
        tempArray.push(array[random]);
        array.splice(random,1);
    }
    array=tempArray;
    return array;
}

5.画图描述CSS盒模型,用JavaScript实现获取元素宽和位置,注意兼容性。

技术分享

 

技术分享

 

阮一峰 关于获取窗口、页面元素位置以及宽度:http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html
关于浏览器模型 兼容性判断:http://www.cnblogs.com/uedt/archive/2010/09/21/1832402.html                                      

当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth;
当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth。
浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。
获取元素宽度:
var getElementWidth=function(element){
    if(document.compatMode == "BackCompat"){
        return document.body.scrollWidth;
    }else{
        return document.documentElement.scrollWidth;
    }
}

 

但是,这个函数有一个问题。如果网页内容能够在浏览器窗口中全部显示,不出现滚动条,那么网页的clientWidth和scrollWidth应该相等。但是实际上,不同浏览器有不同的处理,这两个值未必相等。所以,我们需要取它们之中较大的那个值,因此要对getPagearea()函数进行改写。
  
var getElementWidth=function(element){
    if (element.compatMode == "BackCompat"){
        return Math.max(document.body.scrollWidth,document.body.clientWidth),
    } else {
     return  Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
    }
  }

 

获取元素位置:	绝对位置:
var getElementPost=function(element){
    var post={"postX":element.offsetLeft,"postY":element.offsetTop};
    var current=element.offsetParent;
    while(current!==null){
        post.postX+=current.offsetLeft;
        post.postY+=current.offsetTop;
        current=current.offsetParent;
    }
    return post;
    }        
快速方法:
post.x=this.getBoundingClientRect().left+document.documentElement.scrollLeft;              

post.y=this.getBoundingClientRect().top+document.documentElement.scrollTop;

相对位置:
post.postX-(document.compatMode === "BackCompat" ? document.body.scrollLeft : document.documentElement.scrollLeft),
post.postY-(document.compatMode === "BackCompat" ? document.body.scrollTop: document.documentElement.scrollTop).

 

快速方法:
post.x=this.getBoundingClientRect().left;
post.y=this.getBoundingClientRect().top
快速方法兼容性:目前,IE、Firefox 3.0+、Opera 9.5+都支持该方法,而Firefox 2.x、Safari、Chrome、Konqueror不支持。

js试题

标签:

原文地址:http://www.cnblogs.com/Decmber/p/5384767.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!