js implements simple message board function

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
    li{list-style:none;}
    li{position:relative;width:500px;}
    a{position:absolute;right:10px;}
</style>
<script>
    var count = 0;
    window.onload = function(){
        var arrInput = document.getElementsByTagName('input');
        arrInput[0].focus();
        arrInput[1].onclick = createMessageBoard;
        arrInput[2].onclick = batchDelete;
    };
    
    function createMessageBoard(){
        var arrInput = document.getElementsByTagName('input');
        var arrUl = document.getElementsByTagName('ul');    
        
        if(arrInput[0].value == ''){
            alert( ' No input! ' );
             return  false ;
        }
        count++;
        if(arrUl[0].children.length >4){
            var oLast = arrUl[0].lastElementChild || arrUl[0].lastChild; 
            arrUl[0].removeChild(oLast);
        }
        var liNode = document.createElement ( ' li ' );
        var checkNode = document.createElement ( ' input ' );
        checkNode.type =  ' checkbox ' ;
        checkNode.name = 'delete';
        checkNode.innerHTML = arrInput[0].value;
        addElementNode (liNode, checkNode);
        liNode.appendChild(document.createTextNode("    "+count+"."+"    "+arrInput[0].value));   /*添加文字节点*/
        
        var aNode = document.createElement('a');
        aNode.href = 'javascript:;';
        aNode.innerHTML =  " Delete " ;
        aNode.onclick = function(){
             arrUl[0].removeChild(this.parentNode);
        }
        liNode.appendChild(aNode);
        addElementNode (arrUl [ 0 ], liNode);    
        arrInput[0].value = ""; 
    }

    function addElementNode(obj,element){
        if(obj.children[0]){            
            obj.insertBefore(element,obj.children[ 0 ]);         /* In IE, if the node of the second parameter does not exist, an error is returned, but there is no error in standard browsers. Standard browsers judge that the second parameter is not If it exists, it will be automatically converted to appendChild to add */ 
        } else {
            obj.appendChild(element);
        }
    
    }
    
    function batchDelete(){
        var arrUl = document.getElementsByTagName('ul');    
        var arrDeleteName = document.getElementsByName('delete');
        if(!arrDeleteName.length){
            alert( ' No message is selected! ' );
             return  false ;
        }
        
        for(var i=0;i<arrDeleteName.length;i++){
            if(arrDeleteName[i].checked){
                arrUl[0].removeChild(arrDeleteName[i].parentNode);
                i -- ; // Be careful to subtract one here 
            }    
        }
    }


</script>
</head>

<body>
    <input type="text"/>
    <input type="button" value="增加留言">
    <input type="button" value="批量删除">
    <ul>
    </ul>
</body>
</html>
js implements simple message board function

Guess you like
