简洁在线聊天室HTML源码

<?php
error_reporting(7);
if($_POST["send"]){	

if($_POST['name']==''){exit("<script>alert('请填写昵称哦~');window.location.href='/'</script>");}
if($_POST['message']==''){exit("<script>alert('请填写消息哦~');window.location.href='/'</script>");}
$err1 = stristr($_POST["name"],"<");
if($err1){exit ("<script>alert('昵称中不能含有代码字符哦~');window.location.href='/'</script>");}
$err2 = stristr($_POST["name"],">");
if($err2){exit ("<script>alert('昵称中不能含有代码字符哦~');window.location.href='/'</script>");}
$err3 = stristr($_POST["message"],"<");
if($err3){exit ("<script>alert('消息中不能含有代码字符哦~');window.location.href='/'</script>");}
$err4 = stristr($_POST["message"],">");
if($err4){exit ("<script>alert('消息中不能含有代码字符哦~');window.location.href='/'</script>");}
	

$date="<div class='name'>".$_POST["name"].'</div><div class="message">'.$_POST["message"].'</div><br>';
$user=file_get_contents("message.html").$date;
$db=fopen("message.html","w");
fwrite($db,$user);
fclose($db);
}

?>
<style>
.info{text-align:left;color:grey;width:90%;max-width:500px;padding:10px}
#message{text-align:left;border-bottom:1px solid grey!important;border:0px;outline:none;width:calc(100% - 180px);transition:all .2s}
#name{text-align:left;border-bottom:1px solid grey!important;border:0px;outline:none;width:100px;transition:all .2s}
#name:focus,#message:focus{border-bottom:1px solid #00a2e8!important}
#submit{border:1px solid #00a2e8;outline:none;background:#00a2e8;color:white;padding:3px;transition:all .2s}
#submit:hover{border:1px solid #00a2e8;background:white;color:black}
#submit:active{transform:scale(0.95)}
#messagebox{width:calc(100% - 20px);height:calc(100% - 55px);overflow:scroll;padding-left:10px;padding-left:10px}
#messagebox::-webkit-scrollbar{width:5px;height:0}
body{background:white}
.name{color:grey;font-size:0.9em；padding-left:10px}
.message{font-size:1em;color:white;padding:10px;border-top-right-radius:15px;border-bottom-right-radius:15px;border-bottom-left-radius:15px;background-color: #1E9FFF;display:inline-block;margin-bottom:10px}
</style>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta charset="utf-8">
<title>在线聊天室</title>
<div id="messagebox">
<?php
echo file_get_contents("message.html")
?>
</div>
<center><br>
<form action="" method="post">
<input name="name" type="text" placeholder="昵称" id="name" autocomplete="off"></input>：<input name="message" type="text" placeholder="消息内容" id="message" autocomplete="off"></input>
<input name="send" type="submit" value="发送" id="submit">
</form>
</center>

上面是index.php

接下来新建一个message.html即可

访问域名即可使用

演示站点: http://chat.dragonyuan.top