js 实现简易留言板功能

Posted 朝颜陌

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 实现简易留言板功能相关的知识,希望对你有一定的参考价值。

<!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 实现简易留言板功能的主要内容,如果未能解决你的问题,请参考以下文章

基于Node.js实现简易留言板

基于Node.js实现简易留言板

基于Node.js实现简易留言板

js+css+html制作简易留言板

微信小程序实现简易留言板

vue实现简易留言板