js实现简单聊天框效果

谁借莪１个温暖的怀抱￠ 2022-09-11 15:25 207阅读 0赞

描述： 点击发送按钮 将输入框的内容添加到div中 然后清空输入框

<style>
            div{
                width: 200px;
                height: 200px;
                border: 1px solid green;
            }
        </style>

<div></div>
        张三：<input type="text"><button>发送</button>

<script>
        //    1、获取元素 div input button
        var div = document.getElementsByTagName('div')[0];
        var inp = document.getElementsByTagName('input')[0];
        var btn = document.getElementsByTagName('button')[0];
        console.log(div,inp,btn);
        // 2、加事件
        btn.onclick = function () {
            // 3.1.1 获取输入框的内容 方法：元素.value
            var txt = inp.value;
            console.log(txt);
            // 3.1 将输入框的内容添加到div 可以使用+=
            div.innerHTML += '迪丽热巴：' + txt + '<br>';
            // 3.2清空输入框的内容 将输入框的值变为空字符或者null
            inp.value = '';
            // inp.value = null;
        }
        </script>
    </body>

效果图：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/cc88499ce70445e384ae70f921ac2fa0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，207人围观）

还没有评论，来说两句吧...

相关阅读

相关简单聊天框制作

简单聊天框效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM...

我会带着你远行/ 2024年04月17日 06:05/ 0 赞/ 76 阅读

相关 Android输入框实现简单的抖动效果

1. res/anim 新建shake.xml <?xml version="1.0" encoding="utf-8"?> <!-- Copyright

谁借莪１个温暖的怀抱￠/ 2023年10月17日 14:54/ 0 赞/ 144 阅读

相关场景实战-聊天-发送框实现

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本

悠悠/ 2022年10月01日 05:49/ 0 赞/ 208 阅读

相关 js实现简单聊天框效果

描述：点击发送按钮将输入框的内容添加到div中然后清空输入框 <style> div{ width: 2

谁借莪１个温暖的怀抱￠/ 2022年09月11日 15:25/ 0 赞/ 208 阅读

相关 js实现图片放大镜效果——简单方法

之前写过一篇关于电商项目商品详情页面的图片放大镜效果：[电商项目商品详情页的图片放大效果实现：https://blog.csdn.net/yehaocheng520/artic

女爷i/ 2022年08月29日 05:45/ 0 赞/ 284 阅读

相关简单原生js实现开关门效果

主体html内容部分： <body> <div id="d1">树形列表</div> <div id="d2"><<</div>

曾经终败给现在/ 2022年06月11日 07:08/ 0 赞/ 214 阅读

相关 js实现简单轮播效果

html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゝ一世哀愁。/ 2022年06月09日 08:45/ 0 赞/ 223 阅读

相关 css+js实现下拉框带效果图

test.html <select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this

系统管理员/ 2022年03月29日 11:23/ 0 赞/ 314 阅读

相关用js（hover ）+css实现下拉框效果（有效果图）

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

忘是亡心i/ 2022年03月26日 08:00/ 0 赞/ 295 阅读

相关 JS实现简单时钟效果

老师上课需要我们做一个时钟的小作业，我把它放在上面记录一下啦表盘和时针我都是用的背景图的形式，然后绝对定位，通过调整left和top确定时针、分针、秒针的位置，tran

我会带着你远行/ 2022年01月25日 15:39/ 0 赞/ 377 阅读