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

js 实现简易留言板功能

时间:2018-04-26 23:16:55      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:UI   cli   let   boa   出错   标准   element   doc   sage   

<!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(没有内容输入!);
            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 = "删除";
        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]);        /*在IE下如果第二个参数的节点不存在回报错,而在标准浏览器下不会出错,标准浏览器判断第二个参数不存在,则会自动转成appendChild添加*/
        }else{
            obj.appendChild(element);
        }
    
    }
    
    function batchDelete(){
        var arrUl = document.getElementsByTagName(ul);    
        var arrDeleteName = document.getElementsByName(delete);
        if(!arrDeleteName.length){
            alert(未选中任何留言!);
            return false;
        }
        
        for(var i=0;i<arrDeleteName.length;i++){
            if(arrDeleteName[i].checked){
                arrUl[0].removeChild(arrDeleteName[i].parentNode);
                i--; //这里注意要减一个
            }    
        }
    }


</script>
</head>

<body>
    <input type="text"/>
    <input type="button" value="增加留言">
    <input type="button" value="批量删除">
    <ul>
    </ul>
</body>
</html>

 

js 实现简易留言板功能

标签:UI   cli   let   boa   出错   标准   element   doc   sage   

原文地址:https://www.cnblogs.com/moon-yyl/p/8954961.html

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