留言板效果

最新推荐文章于 2022-03-27 11:47:36 发布

scarsun

最新推荐文章于 2022-03-27 11:47:36 发布

阅读量501

点赞数

本文链接：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>

scarsun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
留言板效果

先看效果图&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;留言板&lt;/title&gt; &lt;style&gt; *{ margin:0; padding: 0; } #box{
复制链接

扫一扫