master

分支 (1)

标签 (2)

管理

管理

master

1.2.0

1.0.0

ChatDACS
/
new.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<link rel="icon" href="data:image/ico;base64,aWNv">
<meta name="theme-color" content="#ed90ba">
<meta http-equiv="X-UA-Compatible" messages="IE=edge,chrome=1">
<meta charset="utf-8">
<meta name="viewport" messages="minimal-ui">
<title>ChatDACS</title>
<style>
	* {
		margin: 0;
		list-style: none;
		box-sizing: border-box;
		font-family: '思源黑体';
	}
	body {
		margin-bottom: 12%;
		width: 100%;
		height: 100%;
		background: #eee;
	}
	.header {
		background: #333;
		width: 100%;
		height: 100px;
		color: #fff;
		line-height: 70%;
		font-size: 300%;
		padding: 3% 5%;
		position: fixed;
		top: 0;
		border-bottom: 1px solid #888;
		box-shadow: 0 0 5px #888;
	}
	.footer {
		background: #666;
		padding: 9px 3px 9px 3px;
		position: fixed;
		bottom: 0;
		width: 100%;
		border-radius: 10px 10px 0 0;
	}
	.footer input {
		border: 0;
		width: 90%;
		margin-right: .5%;
		min-height: 60px;
		outline: none;
		text-indent: 10px;
		border-radius: 6px;
	}
	.footer button {
		min-height: 60px;
		width: 8.5%;
		background: DeepSkyBlue;
		border: none;
		font-size: 178%;
		border-radius: 6px;
		cursor: pointer;
	}
	.footer button:hover {
		color: DeepSkyBlue;
		background: Black;
	}
	img {
		width: 10%;
		height: 10%;
	}
	.content {
		font-size: 300%;
		width: 100%;
		height: 100%;
		overflow: auto;
		padding: 8% 5px 5px 5px;
		text-align: center;
	}
	.content li {
		word-break: break-all;
		word-wrap: break-word;
		margin-top: 10px;
		padding-left: 10px;
		width: auto;
		display: block;
		clear: both;
		overflow: hidden;
		padding: 0 10px 0 10px;
	}
	.content li img {
		float: left;
	}
	.content li span{
		background: #7cfc00;
		padding: 10px;
		border-radius: 10px;
		float: left;
		margin: 6px 10px 0 10px;
		max-width: 77%;
		border: 1px solid #ccc;
		box-shadow: 0 0 3px #ccc;
	}
	.content li img.imgleft {
		float: left;
	}
	.content li img.imgright {
		float: right;
	}
	.content li span.spanleft {
		float: left;
		background: #fff;
		text-align: left;
	}
	.content li span.spanright {
		float: right;
		background: #7cfc00;
		text-align: left;
	}
	#time {
		background: #CCC;
		display: inline-block;
		font-size: 70%;
		line-height: 70%;
		text-align: center;
		color: White;
		padding: 10px;
		border-radius: 6px;
		word-wrap: break-word;
	}
	#sysmsg {
		background: #CCC;
		display: inline-block;
		font-size: 70%;
		line-height: 70%;
		text-align: center;
		color: White;
		padding: 10px;
		border-radius: 6px;
		max-width: 50%;
		line-height: 150%;
		word-wrap: break-word;
	}
	a {
		text-decoration: none;
	}
</style>
<script src="/socket.io/socket.io.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
window.onload = function(){
	var time_now = 0;
	var time_last = 0;
	var socket = io();
	var arrIcon = ['https://gsp0.baidu.com/5aAHeD3nKhI2p27j8IqW0jdnxx1xbK/tb/editor/images/client/image_emoticon25.png', 'https://tb2.bdstatic.com/tb/editor/images/face/i_f33.png?t=20140803'];	//arrIcon[0] = client icon, arrIcon[1] = server icon;
	var sorc = 1;
	var liNow = -1;
	var btn = document.getElementById('btn');
	var text = document.getElementById('text');
	var content = document.getElementsByTagName('ul')[0];
	var img = content.getElementsByTagName('img');
	var span = content.getElementsByTagName('span');
	var typing_status = document.getElementById('typing_status');
	socket.on('chat message', function(msg){
		time_now = new Date().getTime();
	if(time_now - time_last < 300000){
			content.innerHTML += '<li><img src="' + arrIcon[sorc] + '"><span>' + msg + '</span></li>';
		} else {
			content.innerHTML += '<div id="time">' + CurentTime() + '</div><li><img src="' + arrIcon[sorc] + '"><span>' + msg + '</span></li>';
			time_last = new Date().getTime();
		};
		liNow++;
		if(sorc == 0){
			img[liNow].className += 'imgright';
			span[liNow].className += 'spanright';
			sorc = 1;
		} else {
			img[liNow].className += 'imgleft';
			span[liNow].className += 'spanleft';
		};
		window.scrollTo(0, document.body.scrollHeight);
	});
	socket.on('system message', function(msg){
		content.innerHTML += '<br><div id="sysmsg">' + msg + '</div><br>';
		window.scrollTo(0, document.body.scrollHeight);
	});
	socket.on('typing', function(msg){
		if(text != '') typing_status.innerHTML = msg;
	});
	typing = function(){
		socket.emit('typing');
	};
	btn.onclick = function(){
		text.focus();
		if(text.value == ''){
			alert('不能发送空消息');
		} else {
			socket.emit('typing_over');
			socket.emit('chat message', $('#text').val());
			$('#text').val('');
			sorc = 0;
			window.scrollTo(0, document.body.scrollHeight);
			return false;
		};
	};
};
function CurentTime(){
	var now = new Date();
	//var year = now.getFullYear();
	var month = now.getMonth() + 1;
	var day = now.getDate();
	var hh = now.getHours();
	var mm = now.getMinutes();
	var ss = now.getSeconds();
	var clock;// = year + '年';
	//if(month < 10)
	//	clock += '0';
	clock = month + '月';
	if(day < 10)
		clock += '0';
	clock += day + '日 ';
	if(hh < 10)
		clock += '0';
	clock += hh + ':';
	if (mm < 10) clock += '0';
	clock += mm + ':';
	if (ss < 10) clock += '0';
	clock += ss;
	return(clock);
};
</script>
</head>
<body>
	<a href="https://github.com/Giftia/ChatDACS">
		<img style="position: fixed; top: 0; right: 0; border: 0; z-index: 2333; width: 110px; height: 110px;" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png?resize=110%2C110" alt="Fork me on GitHub">
	</a>
	<div class="header">
		<span style="float: left;">ChatDACS 1.2.3</span>
		<span style="float: right; font-size: 70%;" id="typing_status"></span>
	</div>
	<ul class="content"></ul>
	<div class="footer">
		<form>
		<input id="text" placeholder="发送 “/开门 密码” 来开门" autocomplete="off" value="/开门 233333" maxlength="100" style="font-size:30px;" autofocus oninput="typing()"/>
		<button id="btn">发送</button>
		</form>
	</div>
</body>
</html>