前言

制作聊天窗口需要三部分代码：html代码、css样式、js代码

一、效果图

二、代码

1.js代码

代码如下（示例）：

<script type="text/javascript">var names = ['大娃', "二娃", "三娃", "四娃", "五娃", "六娃", "七娃"]; //定义数组储存名字var _box1 = document.querySelector(".box1");var _button = document.querySelector("button");var _first = document.getElementById("first");var img = ['./img/101.jpg', "./img/102.jpg", "./img/103.jpg", "./img/104.jpg", "./img/105.jpg", "./img/106.jpg","./img/107.jpg"];//定义数组储存照片var i = 0;_button.onclick = function() {var index = Math.floor(Math.random() * 7); //随机下标数var id = names[index];var imgs = img[index];if (i % 2 == 0) {//判断为偶数行时文本靠右_box1.innerHTML =`<div Style=text-align:left;>${_box1.innerHTML}<img src="${imgs}"><span>${id}</span>:${_first.value}<br></div>`;} else {//判断为偶数行时文本靠左_box1.innerHTML =`<div Style=text-align:right;>${_box1.innerHTML}${_first.value}:<span>${id}</span><img src="${imgs}"></div>`;}_first.value = "";i++;}</script>

2.html和css样式

代码如下（仅供参考）：

<div class="box"><div class="box1"></div><input type="text" name="" id="first" value="" /><button type="button">发送</button></div>.box {width: 300px;height: 500px;margin: 0 auto;}.box1 {width: 300px;height: 400px;border: 6px solid gray;overflow: auto;}img {width: 30px;height: 30px;vertical-align: middle;}span {font-size: 14px;color: #0EB4E6;}.box1 div {font-size: 12px;color:black;}---

总结

以上就是今天用js制作的简易聊天窗口，喜欢的话点个赞吧

如果觉得《JavaScript制作简易聊天窗口》对你有帮助，请点赞、收藏，并留下你的观点哦！