前端小案例(留言板)

最新推荐文章于 2024-06-15 17:55:19 发布

牛奶味的辣椒水

最新推荐文章于 2024-06-15 17:55:19 发布

阅读量850

点赞数 1

文章标签： js html css javascript

本文链接：https://blog.csdn.net/qq_41469636/article/details/108248791

版权

便利贴小案例

代码（html+css+js）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>留言墙</title>
		<!-- 步骤2：写样式 -->
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background-color: skyblue;
			}

			/*输入框的样式*/
			#info {
				width: 40%;
				min-width: 300px;
				height: 40px;
				border-radius: 5px;
				padding-left: 10px;
				position: fixed;
				/*固定定位，参考窗口*/
				bottom: 5%;
				left: 50%;
				/*向右移动窗口的一半*/
				transform: translateX(-50%);
				/*自己向左移动自己的宽度的一半*/
				border: 1px solid #cccccc;
			}

			.main {
				position: relative;
				width: 100%;
				min-height: 754px;
			}

			.main>.note {
				width: 170px;
				height: 170px;
				background-color: rgb(255, 0, 127);
				box-sizing: border-box;
				/*设置边框，填充都不会把盒子撑大，而是减少content的值*/
				padding: 20px 10px;
				/*上下  左右*/
				border-radius: 4px;
				/*圆角半径*/
				box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.4);
				/*盒子阴影效果*/
				border-bottom-right-radius: 50px 10px;
				/*右下角的翘起的效果*/
				position: absolute;
				/*绝对定位*/
				word-wrap: break-word;
				/*换行*/
				word-break: break-all;
				overflow: hidden;
				/*超过便利贴的内容隐藏*/
			}

			.main>.note>.closeBtn {
				position: absolute;
				right: 7px;
				top: 5px;
				font-size: 14px;
				color: #333333;
				cursor: pointer;
			}

			.main>.note>.closeBtn::after {
				content: "×";
			}
		</style>
	</head>
	<body>

		<!-- 步骤1：写HTML -->
		<!-- main墙 -->
		<div class="main">
			<!-- note留言纸 -->
			<!-- <div class="note">
				gfdsuaf
				<div class="closeBtn"> 
				</div>
			</div> -->
		</div>
		<input type="text" id="info" placeholder="输入内容" />

		<script type="text/javascript">
			//找父元素，因为要删除子元素
			var mainDiv = document.querySelector(".main");
			// 思路：1>根据ID找到文本输入框
			var inputTag = document.querySelector("#info");
			//  2>为input框绑定键盘事件，按回车键触发一个功能的执行
			inputTag.onkeydown = function(event) {
				// 13对应的是回车键
				if (event.keyCode == 13) {
					//获取用户输入的内容
					var inputContent = inputTag.value;
					if (inputContent == "") {
						alert("不能为空!");
						return;
					}
					//new RegExp('^[ ]+$').test(inputContent)
					// 
					if (/^[ ]+$/.test(inputContent)) {
						alert("不能空格!");
						return;
					}
					//调用动态创建便利贴的方法
					createDiv(inputContent);
					//                     //要把输入框中的内容清除
					inputTag.value = "";
				}
			}
			//3> 定义一个函数 createDiv(msg) 动态的创建div，参数是输入框中的值
			// 定义一个函数
			function createDiv(msg) {
				var noteDiv = document.createElement("div"); // <div> </div>
				noteDiv.className = "note"; //<div class="note"></div>
				noteDiv.innerHTML = msg; //内容插入div的内部  <div class="note">内容</div>
				noteDiv.style.backgroundColor = randomColor();

				var h = window.innerHeight - 300; //窗体的高度-从输入框开始的高度
				var w = window.innerWidth - 200;
				noteDiv.style.left = Math.random() * w + "px";
				noteDiv.style.top = Math.random() * h + "px";


				var closeBtnDiv = document.createElement("div"); //<div></div>
				closeBtnDiv.className = "closeBtn"; //<div class="closeBtn"></div>
				//把closeBtnDiv追加到noteDiv中
				noteDiv.appendChild(closeBtnDiv); // <div class="note">内容<div class="closeBtn"></div></div>
				mainDiv.appendChild(noteDiv);
				//为closeBtnDiv设置单击事件
				closeBtnDiv.onclick = function(event) {
					event.stopPropagation();
					//单击关闭移除掉note（留言纸）元素
					mainDiv.removeChild(noteDiv);
				}
				
				// 点击时,会出现在最上层
				noteDiv.onclick = function() {
					var allNote = this.parentNode.children;
					for (var i = 0; i < allNote.length; i++) {
						allNote[i].style.zIndex = allNote[i].style.zIndex--;
					}
					this.style.zIndex = 999;
				}

			}
			//随机背景色
			function randomColor() {
				var red = Math.round(Math.random() * 255);
				var green = Math.round(Math.random() * 255);
				var blue = Math.round(Math.random() * 255);
				return "rgb(" + red + "," + green + "," + blue + ")";
			}
		</script>

	</body>
</html>

效果图：

牛奶味的辣椒水

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
前端小案例(留言板)

便利贴小案例代码（html+css+js）：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>留言墙</title>  <style type="text/css"> * { margin: 0; padding: 0; } body { .
复制链接

扫一扫