简易聊天

最新推荐文章于 2023-05-24 22:25:29 发布

Jyann~

最新推荐文章于 2023-05-24 22:25:29 发布

阅读量236

点赞数

分类专栏： JS高级案例文章标签： innerHTML 简易聊天

本文链接：https://blog.csdn.net/qq_34569497/article/details/94721233

版权

JS高级案例专栏收录该内容

20 篇文章 1 订阅

订阅专栏

简易聊天：不断发送内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简易聊天</title>
    <style>
        * { margin:0; padding:0;}
        div { width: 438px; height: 312px; background: url('simplechat_bg.gif') no-repeat; background-size: cover; margin: 150px auto; position: relative;}
        textarea { 
            display: block; 
            border:1px solid #554d96; 
            width:222px; 
            height: 80px; 
            line-height: 20px;
            /* text-indent: 22px; */
            padding: 5%;
            position: absolute; 
            top: 72px; 
            left: 106px; 
            border-radius: 4px;
            box-sizing: border-box;
            box-shadow: 1px 1px #9a94ce;
            outline:none;
            resize: none;

        }
        input { 
            position: absolute; 
            top: 162px; 
            left: 268px; 
            width: 60px;
            height: 20px;
            color: white;
            background: none;
            border:2px solid white;
            background: #0aa1d4;
            font-size: 10px;
            vertical-align: middle;
            border-radius: 4px;
        }
        ul {
            list-style: none;
            position: absolute;
            top: 196px;
            left: 105px;
        }

        li {
            width:226px; 
            height: 26px;
            line-height: 26px;
            text-indent: 12px;
            background: #554d95;
            color: white;
            border-radius: 6px;
            margin-bottom: 10px;
        }

    </style>
</head>
<body>
    <div>
        <textarea name="inputarea" id="inputarea" class="inputarea" cols="30" rows="10"></textarea>
        <input class="sbt_btn" type="submit" value="提交">
        <ul class="chat_list">
        </ul>
    </div>
    <script>
        var sbtBtn = document.querySelector(".sbt_btn");
        var inputarea = document.querySelector(".inputarea");
        var chatList = document.querySelector(".chat_list");
        sbtBtn.onclick = function(){
            if(inputarea.value != ''){
                chatList.innerHTML = '<li>' + inputarea.value + '</li>' + chatList.innerHTML;
            }else{
                alert("发送内容不能为空");
            }
        };
    </script>
</body>
</html>

结果：