模拟一下聊天框

最新推荐文章于 2024-07-05 18:16:50 发布

微aa

最新推荐文章于 2024-07-05 18:16:50 发布

阅读量119

点赞数 2

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/ttttqqqqq/article/details/107521305

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

代码直接copy就行

    <style>
        div{
            width: 400px;
            height: 600px;
            border: 1px solid #f00;
            overflow: hidden;
        }
        p{
            height: 80px;
            line-height: 80px;
        }
        p>span{
            vertical-align: top;
            margin-right: 20px;
        }
        p>textarea{
            vertical-align: top;
            margin-right: 20px;
        }
        p>button{
            vertical-align: middle;
        }
        section{
            height: 50px;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div></div>
    <p>
        <span>小明：</span><textarea cols="30" rows="5"></textarea><button>提交</button>
    </p>
    <p>
        <span>小花：</span><textarea cols="30" rows="5"></textarea><button>提交</button>
    </p>
    <script>
        var div = document.getElementsByTagName("div")[0];
        var text = document.getElementsByTagName("textarea");
        var span = document.getElementsByTagName("span");
        var button = document.getElementsByTagName("button");
        var i;
        var sum;
        if(localStorage.getItem("i")==null){
            localStorage.setItem("i",0); 
        }else{
            i = localStorage.getItem("i");
        }
        if(localStorage.getItem("sum")==null){
            div.innerHTML = "";
            localStorage.setItem("sum",0);
        }else if(localStorage.getItem("sum")<12){
            sum = localStorage.getItem("sum");
            for(var j = 0;j<localStorage.getItem("sum");j++){
                div.innerHTML  += "<section>"+localStorage.getItem(""+j)+"</section>";
            }
        }else if(localStorage.getItem("sum")>=12){
            sum = localStorage.getItem("sum");
            for(var j = localStorage.getItem("sum")-12;j<localStorage.getItem("sum");j++){
                div.innerHTML  += "<section>"+localStorage.getItem(""+j)+"</section>";
            }
        }
        button[0].onclick = function(){
            i = localStorage.getItem("i");
            sum = localStorage.getItem("sum");
            div.innerHTML  += "<section>"+ span[0].innerHTML + text[0].value+"</section>";
            localStorage.setItem("sum",sum);
            sum++;
            localStorage.setItem(""+i,span[0].innerHTML+text[0].value);  
            localStorage.setItem("i",i);
            i++;
            localStorage.setItem("i",i);
            localStorage.setItem("sum",sum);
            text[0].value = "";
            var section = document.getElementsByTagName("section");
            if(section.length>12){
                div.removeChild(section[0]);
            }
        }
        button[1].onclick = function(){
            i = localStorage.getItem("i");
            sum = localStorage.getItem("sum");
            div.innerHTML  += "<section>"+span[1].innerHTML + text[1].value+"</section>";
            localStorage.setItem("sum",sum);
            sum++;
            localStorage.setItem("i",i);
            localStorage.setItem(""+i,span[1].innerHTML +text[1].value);
            i++;
            localStorage.setItem("i",i);
            localStorage.setItem("sum",sum);
            text[1].value = "";
            var section = document.getElementsByTagName("section");
            if(section.length>12){
                div.removeChild(section[0]);
            }
        }
    </script>
</body>