留言板效果

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/scarsun/article/details/81315514

先看效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>留言板</title>
		<style>
			*{
				margin:0;
				padding: 0;
			}
			#box{
				width: 700px;
				height: auto;
				border: 1px solid #A9A9A9;
				margin: 50px auto;
				background: #EEEEEE;
			}
			h2{
				font-size: 18px;
				color: #87CEEB;
				text-align: center;
				margin-top: 10px;
			}
			#message{
				width: 680px;
				height: 150px;
				margin: 10px;
			}
			#btn{
				margin: 10px;
				padding:0 10px;
				background: #EEEEEE;
				color: darkgrey;
				text-align: center;
				line-height: 22px;
				font-size: 12px;
				outline: none;
			}
			#list{
				list-style: none;
				font-size: 14px;
				margin: 10px ;
				line-height: 30px;
				color: #666;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<h2>留言板</h2>
			<textarea name="" id="message" rows="10" cols="100"></textarea>
			<input type="submit" value="留言" id="btn" />
			<ul id="list">
				<li>第1次来留言</li>
				<li>第2次来留言</li>
				<li>第3次来留言</li>
				<li>第4次来留言</li>
				<li>第5次来留言</li>
				<li>第6次来留言</li>
				<li>第7次来留言</li>
				<li>第8次来留言</li>
				<li>第9次来留言</li>
				<li>第10次来留言</li>
			</ul>
		</div>
		<script>
			function $(id){
				return document.getElementById(id);
			}
			var btn = $('btn'),msg = $('message'),list = $('list');
			
			//敏感词
			var sensitiveWords = ['我艹','你妹','傻逼','三八'];
			btn.onclick = function () {
				var val = msg.value;
				
				//判断用户是否输入内容
				if(val === '' ){
					alert('请输入留言');
					return false;
				}
				//替换敏感词
				sensitiveWords.forEach(function (v){
					while(val.indexOf(v) !== -1){
						val = val.replace(v,'***');
					}
				});
				
				//替换换行符
					while(val.indexOf('\n') !== -1){
						val = val.replace('\n','<br/>');
					}
				//创建新的LI标签
				var newLi = document.createElement('li');
				
				//给LI添加内容
				newLi.innerHTML = val;
				
				//将LI插入到UL的最后位置
				list.appendChild(newLi);
				
				//清空输入框
				msg.value = '';
				
			}
		</script>
	</body>
</html>

 

展开阅读全文

没有更多推荐了,返回首页