仿微信聊天界面实现

最新推荐文章于 2024-08-11 18:09:16 发布

Blancker

最新推荐文章于 2024-08-11 18:09:16 发布

阅读量5.7k

点赞数 1

文章标签： JS 聊天框仿微信聊天界面

本文链接：https://blog.csdn.net/Blancker/article/details/88252617

版权

本文介绍如何利用原生JS创建一个简单的仿微信聊天界面，作为成语接龙小游戏的基础。通过基本结构、CSS样式和JS脚本来实现这一功能。

摘要由CSDN通过智能技术生成

学习JS时间也不短了，突然想做一款基于原生JS的成语接龙小游戏。

那么问题来了，既然是成语接龙，首先要有一个类似于微信聊天界面的对话框。

于是乎，这个仿微信聊天界面的简易聊天框就诞生了。

下一篇就是“原生JS成语接龙小游戏”（链接：https://blog.csdn.net/Blancker/article/details/88256261）

话不多说，直接上代码……

1、基本结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>聊天对话框</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<script type="text/javascript" src="js/talk.js"></script>
	</head>
	<body>
		<div id="box">
			<!--head-->
			<div class="head">聊天框</div>
			<!--middle-->
			<div id="screen">
				<!-- 对方 -->
				<div class="other-side">
					<!--头像-->
					<div class="header" style="float: left;"></div>
					<div class="left-send">
						<div class="left-arrow"></div>
						<div class="left-text">
							你好啊！！！
						</div>
					</div>
				</div>