js简易聊天框

2020-05-13 09:57:04 阅读：272 来源： 互联网

标签：box document width otxt height 简易聊天 var 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>

标签：box,document,width,otxt,height,简易,聊天,var,js
来源： https://www.cnblogs.com/cupid10/p/12880542.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js简易聊天框