js实现简单聊天框效果 谁借莪1个温暖的怀抱¢ 2022-09-11 15:25 147阅读 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
还没有评论,来说两句吧...