使用原生HTML、CSS、JS实现简易聊天框

原创已于 2023-07-04 09:29:46 修改 · 3k 阅读

10 ·

CC 4.0 BY-SA版权

带刺玫瑰

文章标签：

#css #html #javascript

于 2022-05-23 14:33:12 首次发布

原生js 同时被 3 个专栏收录

13 篇文章

订阅专栏

vue

8 篇文章

订阅专栏

NodeJs

6 篇文章

订阅专栏

使用原生HTML实现简易聊天框。

1、第一种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 14px;
        }
        .triangle{
			width: 70%;
            margin: 100px auto;
            background-color: #ebebe9;
        }
        .triangle ul{
            padding: 10px;
        }
        .triangle li{
            padding: 5px;
            margin-bottom: 10px;
        }
        .triangle li span{
            position: relative;
            border-radius: 7px;
            background-color: #a6e860;
            padding: 6px 10px 8px 10px;
            z-index: 1;
        }
		.triangle .textLeft{
			padding: 0 10px;
		}
        .triangle .textLeft span{
            background-color: white;
			line-height: 1.7;
        }
        .triangle li.textLeft span:before{
            content: "";
            display: block;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-right: 8px solid white;
            position: absolute;
            top: 8px;
            left: -16px;
        }
        .triangle li.textRight span:after{
            content: "";
            display: block;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-left: 8px solid #a6e860;
            position: absolute;
            top: 8px;
            right: -16px;
        }
        li{
            list-style: none;
        }
        .textRight{
            text-align: right;
        }
    </style>
</head>
<body>
<div class="triangle">
    <ul>
        <li class="textLeft">
            <span>在吗？</span>
        </li>
        <li class="textRight">
            <span>在的呢！</span>
        </li>
    </ul>
</div>
</body>
</html>

2、第二种方式(使用JS动态生成标签)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style type="text/css">
			.talk_con {
				width: 600px;
				height: 500px;
				border: 1px solid #666;
				margin: 50px auto 0;
				background: #f9f9f9;
			}
			.talk_show {
				width: 580px;
				height: 420px;
				border: 1px solid #666;
				background: #fff;
				margin: 10px auto 0;
				overflow: auto;
			}
			.talk_input {
				width: 580px;
				margin: 10px auto 0;
			}
			.whotalk {
				width: 80px;
				height: 30px;
				float: left;
				outline: none;
			}
			.talk_word {
				width: 420px;
				height: 26px;
				padding: 0px;
				float: left;
				margin-left: 10px;
				outline: none;
				text-indent: 10px;
			}
			.talk_sub {
				width: 56px;
				height: 30px;
				float: left;
				margin-left: 10px;
			}
			.atalk {
				margin: 10px;
			}
			.atalk span {
				display: inline-block;
				background: #0181cc;
				border-radius: 10px;
				color: #fff;
				padding: 5px 10px;
			}
			.btalk {
				margin: 10px;
				text-align: right;
			}
			.btalk span {
				display: inline-block;
				background: #ef8201;
				border-radius: 10px;
				color: #fff;
				padding: 5px 10px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var Words = document.getElementById("words");
				var Who = document.getElementById("who");
				var TalkWords = document.getElementById("talkwords");
				var TalkSub = document.getElementById("talksub");
				TalkSub.onclick = function() {
					//定义空字符串
					var str = "";
					if (TalkWords.value == "") {
						// 消息为空时弹窗
						alert("消息不能为空");
						return;
					}
					if (Who.value == 0) {
						//如果Who.value为0n那么是 A说
						str = '<div class="atalk"><span>A说 :' + TalkWords.value + '</span></div>';
					} else {
						str = '<div class="btalk"><span>B说 :' + TalkWords.value + '</span></div>';
					}
					Words.innerHTML = Words.innerHTML + str;
				}
			}
		</script>
	</head>
	<body>
		<div class="talk_con">
			<div class="talk_show" id="words">
				<div class="atalk"><span id="asay">A说：吃饭了吗？</span></div>
				<div class="btalk"><span id="bsay">B说：还没呢，你呢？</span></div>
			</div>
			<div class="talk_input">
				<select class="whotalk" id="who">
					<option value="0">A说：</option>
					<option value="1">B说：</option>
				</select>
				<input type="text" class="talk_word" id="talkwords">
				<input type="button" value="发送" class="talk_sub" id="talksub">
			</div>
		</div>
	</body>
</html>