js简易聊天框

最新推荐文章于 2023-07-30 13:31:51 发布

Cupid510

最新推荐文章于 2023-07-30 13:31:51 发布

阅读量472

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/weixin_44283432/article/details/108091759

版权

javaScript 专栏收录该内容

235 篇文章 4 订阅

订阅专栏

js简易聊天框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width: 300px;
            height: 500px;
            padding:20px;
            border:solid 1px black;
           
            }
        #box .cont{
            width: 300px;
            height: 430px;
            }  
        #box #txt{
            width: 200px;
            height: 50px;
        }
        #box #btn{
           line-height: 50px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="cont">
            <p>在吗</p>
            <p>你好</p>
        </div>
        <form>
            <textarea id="txt"></textarea>
<input type="button" id="btn" value="发送">
        </form>
    </div>
</body>
<script>
    var otxt = document.getElementById("txt")
    var obtn = document.getElementById("btn")
    var ocont = document.querySelector(".cont")

    obtn.onclick = function(){
        // 创建元素
        var p = document.createElement("p");
        // 设置内容
        p.innerHTML = otxt.value;
        // 插入聊天区域
        ocont.appendChild(p);
        p.style.textAlign="right"
        // 清空输入框
        otxt.value = "";
    }



</script>
</html>

Cupid510

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js简易聊天框

js简易聊天框<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width: 300px; ...
复制链接

扫一扫