console 命令行工具 X clear

console

$(document).ready(function () {

	//创建通讯实体
	var configSync = {
		authDomain: "alen-easy-chat-room.wilddog.com",
		syncURL: "https://alen-easy-chat-room.wilddogio.com"
	};
	wilddog.initializeApp(configSync);
	var msgs = wilddog.sync().ref("/msg");
	var dws = wilddog.sync().ref("/dirtywords");

	//定义DOM变量
	var inputForm = $("form");
	var inputBtn = $("#input-send");
	var html;
	var chatBox = $(".chat-room-content");
	var chatContainer = $(".mCSB_container");

	var blackScreen = $(".blackScreen");
	var formUsername = $(".form-username");
	var okay = $(".okay");

	var hintBlackScreen = $(".hintBlackScreen");
	var dirtyMsg = $(".dirty-word-reply");

	//获取用户昵称
	function getUsername() {
		blackScreen.fadeOut("slow");
		var inputUsername = $("#input-username").val();
		if (inputUsername.length === 0) {
			return "这个人藏得很深";
		} else {
			return $("#input-username").val();
		}
	}
	
	//绑定点击及回车
	okay.click(getUsername);
	formUsername.keypress(function (event) {
		if (event.keyCode === 13) {
			event.preventDefault();
			okay.trigger("click");
		}
		event.stopImmediatePropagation();
	});

	//获取时间
	function getTime() {
		var mydate = new Date();
		var year = mydate.getFullYear();
		var month = mydate.getMonth() + 1;
		var day = mydate.getDate();
		var hour = mydate.getHours();
		var minute = mydate.getMinutes();
		var second = mydate.getSeconds();
		//standardize time
		function stdTime(s) {
			if (s < 10) {
				return "0" + s;
			} else {
				return s;
			}
		};
		return year + "/" + stdTime(month) + "/" + stdTime(day) + " " + stdTime(hour) + ":" + stdTime(minute) + ":" + stdTime(second);
	}

	//脏话判断及回复
	dws.on("value", function (data) {

		//get dirty word data
		var dirtyWords = data.val().dirtyWords;
		var dirtyWordsReply = data.val().dirtyWordsReply;

		//dirty words validation
		function getMsg(x) {
			for (var i = 0; i < dirtyWords.length; i++) {
				if (x.includes(dirtyWords[i])) {
					dirtyMsg.html(dirtyWordsReply[i]);
					hintBlackScreen.fadeIn("slow").delay(800).fadeOut("slow");
					return;
				}
			}
			return x;
		}

		//点击发送消息至通讯云
		inputBtn.click(function () {

			var inputMsg = $("#input-value").val();

			//push msg to database
			msgs.push({
				"name": getUsername(),
				"time": getTime(),
				"msg": getMsg(inputMsg)
			});
			$("#input-value").val("");

		});

		//回车发送消息至通讯云
		inputForm.keypress(function (event) {
			if (event.keyCode === 13) {
				event.preventDefault();
				inputBtn.trigger("click");
			}
		});

		//实时监听通讯云
		msgs.on("child_added", function (data) {
			var msg = data.val();
      console.log(msg.msg);
			html = '<div class="media single-content">';
			html += '<div class="media-left media-top">';
			html += '<span class="glyphicon glyphicon-user user-icon" aria-hidden="true"></span>';
			html += '</div>';
			html += '<div class="media-body">';
			html += '<div>';
			html += '<span class="media-heading user-name">' + msg.name + '</span>';
			html += '<span class="time pull-right">' + msg.time + '</span>';
			html += '</div>';
			html += '<span class="user-content">' + msg.msg + '</span>';
			html += '</div>';
			html += '</div>';
			chatContainer.append(html);
			chatBox.mCustomScrollbar("update");
			chatBox.mCustomScrollbar("scrollTo", "bottom");
		});

	});



});

<body>
	<div class="container">
		<div class="row">
			<div class="col-xs-6 col-xs-offset-3">
				<!--title-->
				<div class="chat-room-title">
					<h3>聊天室</h3>
				</div>
				<!--title-->
				<!--content-->
				<div class="chat-room-content"></div>
				<!--content-->
				<!--input-->
				<div class="chat-room-input">
					<form class="form-inline form-input">
						<div class="form-group">
							<input type="text" class="form-control" id="input-value" placeholder="来一起吐槽~" maxlength="80">
							<button type="button" class="btn btn-default" id="input-send">
									<span class="glyphicon glyphicon-send" aria-hidden="true"></span>
								</button>
						</div>
					</form>
				</div>
				<!--input-->
			</div>
		</div>
	</div>

	<footer>Designed by
		<a href="http://www.alenhu.com/">Alen Hu</a>
	</footer>

	<div class="blackScreen">
		<div class="row">
			<div class="col-xs-6 col-xs-offset-3">
				<div class="alert alert-warning alert-dismissible name-box" role="alert">
					<form class="form-inline form-username">
						<div class="form-group">
							<input type="text" class="form-control" id="input-username" placeholder="骚年！留下大名！" maxlength="10" autofocus="autofocus">
							<button type="button" class="btn btn-default okay">OK</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>

	<div class="hintBlackScreen">
		<div class="row">
			<div class="col-xs-6 col-xs-offset-3">
				<div class="alert alert-warning alert-dismissible dirty-word-reply" role="alert"></div>
			</div>
		</div>
	</div>
	<script>
		(function ($) {
			//scroll bar
			$(window).on("load", function () {
				$(".chat-room-content").mCustomScrollbar({
					theme: "my-theme",
					autoHideScrollbar: true
				});
			});
		})(jQuery);
	</script>
</body>

* {
	font-family: "微软雅黑", sans-serif;
	font-size: 12px;
	color: #999999;
}

.container {
	width: 900px;
}

.chat-room-title {
	width: 100%;
	height: 60px;
	margin-top: 20px;
	background-image: -webkit-gradient(linear, center bottom, center top, from(rgb(251, 194, 235) 0%), to(rgb(166, 193, 238) 100%));
	background-image: -webkit-linear-gradient(rgb(251, 194, 235) 0%, rgb(166, 193, 238) 100%);
	background-image: -moz-linear-gradient(rgb(251, 194, 235) 0%, rgb(166, 193, 238) 100%);
	background-image: -o-linear-gradient(rgb(251, 194, 235) 0%, rgb(166, 193, 238) 100%);
	background-image: linear-gradient(to top, rgb(251, 194, 235) 0%, rgb(166, 193, 238) 100%);
	border-radius: 15px 15px 0 0;
}

.chat-room-title>h3 {
	color: white;
	font-size: 24px;
	text-align: center;
	line-height: 60px;
}

.chat-room-content {
	width: 100%;
	height: 400px;
	margin: 10px 0;
	padding: 10px;
	border-left: solid 1px rgb(251, 194, 235);
	border-right: solid 1px rgb(251, 194, 235);
}

.single-content {
	width: 95%;
	margin-bottom: 20px;
}

.user-icon {
	font-size: 24px;
}

.user-name {
	font-size: 15px;
}

.user-content {
	display: inline-block;
	margin-top: 5px;
	padding: 10px;
	border: solid 1px rgb(251, 194, 235);
	border-radius: 0 15px 15px 15px;
}

.time {
	font-size: 12px;
	color: #e9e9e9;
	text-align: center;
}

.chat-room-input {
	width: 100%;
	height: 60px;
	background-image: -webkit-gradient(linear, center bottom, center top, from(rgb(251, 194, 235) 0%), to(rgb(166, 193, 238) 100%));
	background-image: -webkit-linear-gradient(rgb(251, 194, 235) 0%, rgb(166, 193, 238) 100%);
	background-image: -moz-linear-gradient(rgb(251, 194, 235) 0%, rgb(166, 193, 238) 100%);
	background-image: -o-linear-gradient(rgb(251, 194, 235) 0%, rgb(166, 193, 238) 100%);
	background-image: linear-gradient(to top, rgb(251, 194, 235) 0%, rgb(166, 193, 238) 100%);
	border-radius: 0 0 15px 15px;
}

.chat-room-input > form {
	text-align: center;
	line-height: 60px;
}
.form-input > .form-group {
	width: 80%;
}
#input-value {
	width: 80%;
}
#input-send {
	width: 15%;
}
#input-send>span {
	font-size: 18px;
	color: rgb(251, 194, 235);
}

#input-send:hover,
#input-send:active,
#input-send:focus {
	background-color: white !important;
}

#input-send:hover>span,
#input-send:active>span,
#input-send:focus>span {
	color: rgb(166, 193, 238) !important;
}
#input-value,
#input-send {
	height: 40px;
	border: none;
}

footer {
	margin: 20px 0 10px;
	text-align: center;
}

footer>a {
	color: #999999;
}

.blackScreen,
.hintBlackScreen {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.6);
}
.hintBlackScreen {
	display: none;
}
.name-box,
.dirty-word-reply {
	width: 80%;
	margin: 45% auto auto;
	padding: 15px;
	text-align: center;
	border: none;
}
.dirty-word-reply {
	background-color: #FCF8E3;
	color: #999999;
}
.form-usename > .form-group {
	width: 100%;
}
#input-username {
	width: 70%;
}
.okay {
	width: 25%;
}
#input-username,
.okay {
	border: none;
}
.okay {
	background-image: -webkit-gradient(linear, center bottom, center top, from(rgb(251, 194, 235) 0%), to(rgb(166, 193, 238) 100%));
	background-image: -webkit-linear-gradient(rgb(251, 194, 235) 0%, rgb(166, 193, 238) 100%);
	background-image: -moz-linear-gradient(rgb(251, 194, 235) 0%, rgb(166, 193, 238) 100%);
	background-image: -o-linear-gradient(rgb(251, 194, 235) 0%, rgb(166, 193, 238) 100%);
	background-image: linear-gradient(to top, rgb(251, 194, 235) 0%, rgb(166, 193, 238) 100%);
	color: white;
}
.okay:hover,
.okay:active,
.okay:focus {
	background-image: -webkit-gradient(linear, center bottom, center top, from(rgb(251, 194, 235) 0%), to(rgb(166, 193, 238) 100%));
	background-image: -webkit-linear-gradient(rgb(251, 194, 235) 0%, rgb(166, 193, 238) 100%);
	background-image: -moz-linear-gradient(rgb(251, 194, 235) 0%, rgb(166, 193, 238) 100%);
	background-image: -o-linear-gradient(rgb(251, 194, 235) 0%, rgb(166, 193, 238) 100%);
	background-image: linear-gradient(to top, rgb(251, 194, 235) 0%, rgb(166, 193, 238) 100%);
	color: #e9e9e9 !important;
}

@media (max-width: 767px) {

	.chat-room-input {
		height: 130px;
	}
	.form-input {
		padding: 20px 0;
	}
	.form-input > .form-group {
		margin: 0 auto;
	}
	#input-value,
	#input-send {
		width: 100%;
		display: block;
		margin-bottom: 10px;
	}

	.form-username > .form-group {
		margin: 0 auto;
	}
	#input-username,
	.okay {
		width: 100%;
		display: block;
		margin-bottom: 10px;
	}

}

SOURCE

本项目引用的自定义外部资源