前言

制作聊天窗口需要三部分代码：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制作简易聊天窗口相关推荐

JavaScript 制作简易ATM机
里面现存有 100 块钱. 如果存钱,就用输入钱数加上先存的钱数, 之后弹出显示余额提示框如果取钱,就减去取的钱数,之后弹出显示余额提示框如果显示余额,就输出余额(如果存取了钱,余额也要变化) 如 ...
JavaScript制作简易单词测试题库
使用sessionStorage和localStorage制作一个英语单词题库由于一共有三个页面所以html代码和css代码只展示部分作参考 <div class="main&qu ...
html js制作计算器,JavaScript制作简易计算器
.button { width: 55px; height: 20px; } 购物简易计算器第一个数第二个数计算结果 var num_1=document.getElementById(&quo ...
[JavaScript实训] -- 制作简易的购物车页面
目录一.训练要点: 二.题目需求说明: 三.实现思路及关键代码: 四.完整代码实现: 一.训练要点: 1.使用close()方法关闭窗口: 2.使用confirm()方法进行信息确认: 3.使用al ...
js+css+html制作简易留言板
js+css+html制作简易留言板 1 案例说明 2 编写HTML代码 3 编写css代码 4 编写JavaScript代码 5 全部代码 1 案例说明利用JavaScript.css以及html ...
HTML制作年历,js制作简易年历完整实例
本文实例讲述了js制作简易年历的方法.分享给大家供大家参考.具体如下: 今天学习了一下用js来实现年历的制作,顺便复习了一下this的用法,跟选项卡的制作有点差别,新用到了innerHTML,希望自己 ...
JS 案例制作简易的加法计算器
制作简易的加法计算器 1.用prompt()方法接收两个数: 2.用alert()方法返回两个数的和. 展示代码片. // An highlighted block <script type= ...
原生js制作简易DOM拾色器实例教程
本教程的目的是为了帮助初学者更好的掌握DOM和数组相关操作,实例效果如下图所示. 可以看到实例中的拾色器分为三个部分:拾色区域.色系区域.显示颜色区域.先写出这三个部分的html代码,如下所示: &l ...
制作简易的当当购物车页面
需求说明: 单击"半闭"按钮时,关闭当前页面购物车页面单击"移入收藏"弹出收藏提示单击"删除"弹出确认删除提示单击"结算&q ...

JavaScript制作简易聊天窗口

前言

一、效果图

二、代码

1.js代码

2.html和css样式

总结

JavaScript制作简易聊天窗口相关推荐

最新文章

热门文章