js试题

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不支持。