web前端学习--仿QQ空间留言板功能

最新推荐文章于 2024-06-15 17:55:19 发布
最新推荐文章于 2024-06-15 17:55:19 发布
阅读量4.1w 收藏 87
点赞数 19
分类专栏： 前端杂事
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csu_passer/article/details/53761827
版权

主要技术要点：

     css：利用position属性和margin属性实现基本布局。

    jq/js：留言板功能使用prepend实现最新的留言在顶部显示。

   其中易出错的地方已经在源代码中有注释了，欢迎大家批评指正。

  点击打开链接



防QQ空间留言板功能html页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>漠丶叹尘的空间</title>
    	<link rel="icon" sizes="any" mask href="http://qzonestyle.gtimg.cn/qzone/v8/img/Qzone.svg">
    	<link rel="stylesheet" type="text/css" href="css/qqZone.css">
</head>
<body>
    <div class="header">
        This is the head nav
    </div>
    <div class="topInfo">
        <span class="edit">编辑</span>
    	<div class="zoneName">
    		<h2>漠丶叹尘 的空间</h2>
    		<p>知我者，谓我心忧。不知我者，谓我何求。</p>
    	</div>
    	<div class="support">
    		<img src="image/support_1.png" alt="赞">
    		<span class="num">7</span>
    	</div>
    	<div class="tips">7人赞过</div>
    	<!-- bottom nav -->
    	<div class="top_bottom">
    	   <div class="photo">
    	   	  <img src="http://qlogo3.store.qq.com/qzone/1262283870/1262283870/100?1481718124">   
    	   </div>
    	      <div class="uploadphoto">修改头像</div>
    	   <div class="container">
    	   	  <ul class="section">
    			<li>主页</li>
    			<li>日志</li>
    			<li>相册</li>
    			<li>留言板</li>
    			<li>说说</li>
    			<li>个人档</li>
    			<li>音乐</li>
    			<li>更多</li>
    		</ul>
    	   </div>
    	</div>
    </div>
    <!-- 下面实现留言板功能 -->
    <div class="mainframe">
    	<div class="title">留言板</div>
    	<div class="message">主人寄语</div>
    	<div class="info">
    		这是主人留下的寄语~
    	</div>
    	<div class="content" contenteditable="true"></div>
    	<input type="button" name="submit" value="发表" class="subbtn">
    	<div class="numofmessage">留言(0)</div>
    	<!-- 下面是留言区 -->
    	<div class="msgFrame">
    	   <!--  <div class="content_1">
    	         <img class="name" src="http://qlogo3.store.qq.com/qzone/1262283870/1262283870/100?1481718124" alt="photo">
    	         <div class="mainInfo">
    		         <div class="userId"><a href="#">zipple</a></div>
    		         <div class="conInfo">
    				       这是一条留言。
    		            </div>
    		         <div class="time">2016-12-19  23:46:11</div>
    		    </div> -->

    	    </div>
         </div>
    </div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
   $(".zoneName").hover(function(){
   	   $(".edit").show();
   },function(){
   	   $(".edit").delay(500).hide(0);//延时执行
   })
   //鼠标响应事件
   $(".support").mouseover(function(e){
   	   var left=e.pageX;
   	   var top=e.pageY;
   	   top=top-41;//这里是因为这个元素的父元素使用了margin-top属性，使得top值偏移了41像素。
   	   top=top+25;//加上鼠标自己的高度
   	   console.log(left+"px"+"   top:"+top)
   	   $(".tips").css({"left":left+"px","top":top+"px"});
   	   // $(".tips").delay(800).show(0);加了延时执行后会使得鼠标响应事件不灵敏
   	   // $(".tips").show("slow");
   	   $(".tips").fadeIn();
   })
   /*
    *鼠标离开事件，其中leave是指离开当前元素，而out包括其子元素
   */
   // $(".support").mouseout(function(){
   // 	   $(".tips").hide();
   // })
   $(".support").mouseleave(function(){
   	   console.log("leave");
   	   // $(".tips").css("display","none");
   	   // $(".tips").hide("slow");
   	    $(".tips").fadeOut();
   })
   //修改头像
   $(".photo").hover(function(){
   	   $(".uploadphoto").delay(800).show(0);
   },function(){
   	   $(".uploadphoto").hide();
   }) 
   $(".uploadphoto").hover(function(){
   	   if ($(this).is(":visible")) {
          console.log("visible")
   	   }
   	   else
   	   $(".uploadphoto").show();
   })
   //创建一个div
    function creatDiv(className,closeName,left,top){
          var div =$('<div style="left:' + left + 'px; top:' + top + 'px;"></div>');     
          div.addClass(className);
          $('body').append(div);
          left+=360;
          var close=$('<div style="left:' + left + 'px; top:' + top + 'px;"></div>'); 
          close.addClass(closeName);
          $('body').append(close);
      }     
   $(".uploadphoto").click(function(){
   	   var className='dialog';
   	   var closeName="close";
   	   console.log("点击上传");
   	   creatDiv(className,closeName,500,200);   
   	   $(".close").bind("click",function(){
   	   	      	  $(".dialog").remove();
   	              $(".close").remove();
   	              console.log("关闭成功");
   	              $(".uploadphoto").hide();
   	   });
   })
   //下面是错误的尝试，直接绑定一个函数名称可能导致该函数直接执行！
   // $(".close").bind("click",closeDialog());
   // function closeDialog(){
   // 	  $(".dialog").remove();
   // 	  $(".close").remove();
   // 	  console.log("关闭");
   // }


   //接下来储存留言数据
   var count=0;
   $(".subbtn").click(function(){
   	 var text= $(".content").text();
   	 var time=getCurrentTime();
   	 if(text==""){
   	 	alert("您还没有输入任何内容！");
   	 }
   	 else{
   	 	loadmessage(text,'zipple',time);
   	 	count++;
   	 	console.log('success!');
   	 	$(".content").text("");
   	 	$(".numofmessage").text("留言("+count+")");
   	 }
   })
   function loadmessage(message,id,time){
      	//创建content_index
      	//包含img.name + mainInfo
      	//.userId .conInfo .time
      	var contentDiv='<div class="content_1">';
      	   contentDiv+='<img class="name" src="http://qlogo3.store.qq.com/qzone/1262283870/1262283870/100?1481718124" alt="photo">';
      	   contentDiv+='<div class="mainInfo">'
      	   contentDiv+=' <div class="userId"><a href="#">';
      	   contentDiv+=id;
      	   contentDiv+='</a></div> <div class="conInfo">';
      	   contentDiv+=message;
      	   contentDiv+='</div> <div class="time">';
      	   contentDiv+=time;
      	   contentDiv+='</div> </div> </div>'
           $(".msgFrame").prepend(contentDiv);
   }
   function getCurrentTime(){
   	   var today=new Date();
   	   var y=today.getFullYear();
   	   var mh=today.getMonth();
   	   mh++;
   	   var d=today.getDate();
   	   var h=today.getHours();
   	   var m=today.getMinutes();
   	   var s=today.getSeconds();
   	   m=checkTime(m)
       s=checkTime(s)
       var time=y+"-"+mh+"-"+d+"  "+h+":"+m+":"+s;
       return time;
   }
   function checkTime(i){
       if(i<10)
         i="0"+i
       return i
    }

</script>
</html>
CSS样式表：

*{
	margin: 0;
	padding: 0;
}
body{
	background-image: url("http://i.gtimg.cn/qzone/space_item/orig/5/97349_bg1.png");
    font-family: punctuation,"PingFangSC-Regular","Microsoft Yahei","sans-serif";
    height: 1000px;
}
.header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 41px;
	background: #001e3b;
	text-align: center;
	line-height: 41px;
	font-size: 16px;
	color: grey;
	z-index: 100;
}
.topInfo{
	width: 100%;
	height: 300px;
    background-repeat: no-repeat;
    /*background-position: -276px 42px;*/
    margin-top: 41px;
    background-position:-275px top;
    background-attachment: scroll;
    background-image: url("http://i.gtimg.cn/qzone/space_item/orig/5/97349_top.jpg");
    position: relative;
}
.edit{
	position: absolute;
	left: 417px;
	/*width: 100%;*/
	height: 18px;
	background:#54B3E3;
	color: white;
	font-size: 14px;
    display: none;
}
.zoneName{
    position: absolute;
    top: 20px;
    left: 185px;
    color: white;
    width: 280px;
    height: 60px;
}
.zoneName h2{
    font-size: 28px;
    font-weight: normal;
}
.zoneName p{
	font-size: 14px;
	margin-top: 3px;
}
.support{
	width: 58px;
	height: 33px;
	position: absolute;
	right: 183px;
	top: 50px;
	background-color: rgba(0,0,0,.4);
	border-radius: 18px;
	color: white;
	line-height: 30px;
	cursor: pointer;
}

.support img{
	width: 18px;
	height: 18px;
	margin-top: 7px;
	margin-left: 13px;
}
.num{
	margin-top: -33px;
	width: 18px;
	height: 18px;
	margin-left: 40px;
	display: block;
	margin-bottom:2px;
	cursor: pointer;
}
.tips{
	width: 60px;
	height: 20px;
	font-size: 12px;
	background-color: white;
	color: black;
	text-align: center;
	line-height: 20px;
	position: absolute;
	left: 0;
	right: 0;
	display: none;
}
.top_bottom{
	width: 100%;
	height: 50px;
	background-image: url("http://i.gtimg.cn/qzone/space_item/orig/5/97349_menu_bg.png");
    position: absolute;
    bottom: 0;
}
.photo{
	width: 128px;
	height: 128px;
	position: absolute;
	left: 185px;
	top: -96px;
	padding: 1px;
}
.photo img{
	width: 120px;
	height:120px;
	border: #FFF 3px solid;
	border-radius: 2px;
	display: block;
}
.uploadphoto{
	width: 100px;
	height: 20px;
	font-size: 12px;
	color: #eee;
	background-color: rgba(0,0,0,.8);
	text-align: center;
	line-height: 20px;
	position: absolute;
	left: 200px;
	top: 8px;
	display: none;
	cursor: pointer;
}

.dialog{
	width: 400px;
	height: 300px;
	z-index: 100;
	position: fixed;
	background-image:url("../image/upload.png");
	background-color: white;
	background-repeat: no-repeat;
	background-position: center;
}

.close{
	width: 40px;
	height: 40px;
	z-index: 1000;
	position: fixed;
	background-image:url("../image/close.png");
	background-size: 100% 100%;
	/*background-color: red;*/
	cursor: pointer;
}
.container{
	width: 980px;
	margin: 0 auto;
	height: 100%;
	line-height: 50px;
}
.top_bottom ul.section{
	list-style: none;
	margin-left: 165px;
	float: left;
}
.top_bottom ul.section li{
	float: left;
	/*margin-right: 28px;*/
	font-size: 16px;
	color: #eee;
	font-weight: normal;
	/*font-family: Lucida Console, Monaco, Courier New, mono, monospace;*/
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	cursor: pointer;
}
.top_bottom ul.section li:hover{
	color: #36648B;
}
ul.section li:nth-child(1){
	margin-right: 20px
}
ul.section li:nth-child(2){
	margin-right: 20px
}
ul.section li:nth-child(3){
	margin-right: 15px
}
ul.section li:nth-child(4){
	margin-right: 20px
}
ul.section li:nth-child(5){
	margin-right: 17px
}
ul.section li:nth-child(6){
	margin-right: 15px
}
ul.section li:nth-child(7){
	margin-right: 18px
}


.mainframe{
	width: 900px;
	height: 2703px;
	margin:20px auto;
	background-color:#24639D;
	color:#EDEFF0;
    font-family: Tahoma, Helvetica, Arial, sans-serif;
}
.title{
	width: 858px;
	height: 52px;
	margin:0 auto;
	line-height: 52px;
	font-family: 微软雅黑,Tohoma;
	font-size: 14px;
	color: #2b9de6;
	/*border-color: #1f70bb;*/
	border-bottom: 2px solid #1f70bb;
}
.title:hover{
	color:#70CCFF;
}
.message{
	width: 858px;
	height: 35px;
	margin: 0 auto;
	line-height: 35px;
	color: #eee;
	border-bottom: 2px solid #1f70bb;
	font-family:微软雅黑, Tohoma;
}
.info{
	width: 858px;
	height: 140px;
	color: #EDEFF0;
	margin: 0 auto;
	line-height: 40px;
	border-bottom: 2px solid #1f70bb;
	font-size: 12px;
}
.content{
	width: 858px;
	height: 100px;
	word-break: break-all;
	margin: 0 auto;
	border: 2px solid #1f70bb;
	border-top: 0px;
	background-color: #e2e2e2;
	color: black;
	text-indent: 2px;
	font-size: 14px;
}
.subbtn{
	width: 72px;
	height: 28px;
	line-height: 28px;
	font-size: 14px;
	border-radius: 2px;
	background-color: #46B2EF;
	color: #FFFFFF;
    border: 1px solid #3686B3;
    cursor:pointer;
    margin-left: 20px;
    margin-bottom: 50px;
}
.subbtn:hover{
	background-color: #1a88cf;
}
.numofmessage{
	width: 858px;
	height: 20px;
	color: #EDEFF0;
	margin: 0 auto;
	line-height: 20px;
	border-bottom: 2px solid #1f70bb;
	font-family:微软雅黑, Tohoma;
}
.msgFrame{
	width: 858px;
	height: 2200px;
	margin: 0 auto;
}
.content_1{
	width: 858px;
	height: 190px;
	color: #EDEFF0;
	margin: 0 auto;
	border-bottom: 2px solid #1f70bb;
}
.name{
	width: 50px;
	height: 50px;
	margin: 20px 20px;
	border-radius: 5px;
}
a{
	color: #70CCFF;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
.mainInfo{
	width: 766px;
	height: 143px;
	float: right;
	margin-top: 20px;
}
.userId{
   width: 100%;
   height: 20px;
   font-size: 14px;
}
.conInfo{
   width: 100%;
   height: 100px;
   margin-top: 12px;
   font-size: 12px;
}
.time{
   width: 100%;
   height: 20px;
   font-size: 12px;
   margin-bottom: 20px;
   color: #8AB8E3;
}


  

csu_zipple
关注
  • 19
    点赞
  • 踩
  • 87
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
仿空间留言板简易界面设置
weixin_44239035的博客
03-17 1055
html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;留言板&lt;/title&gt; &lt;link href="css/留言板.css" rel="stylesheet
基于Node.js实现简易留言板
qq_40896145的博客
06-16 1407
一、效果图 二、功能点描述 ·发表提交留言内容 ·留言列表展示留言内容 ·实时展示留言发表时间 三、具体实现 安装art-template依赖包 npm install art-template 留言板首页 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
仿qq空间留言板功能
12-20
实现qq空间的留言功能，下载即可查看所有源代码及资源文件
【web前端开发网页设计】一步步实现：HTML + CSS + JavaScript 完整vue+elementui 留言板示例（超实用）轻松搞定留言板：完整源代码与详细教程（新手必看）轻松入门前端开
最新发布
南北极之间
06-15 1264
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
【高级Java开发】类QQ聊天工具的设计与实现（代码已上传）
m0_67463447的博客
01-14 3664
点击最上方的返回按钮(左边的符号)可以退回到消息页面，点击最上方的聊天记录按钮(右边的符号)可以查看聊天记录。注册页面可以跳转到登陆页面，实现新用户的注册，使用正则表达式判断用户输入是否符合格式，符合格式在数据库中判断是否用户名重复，重复则不能注册用户，不重复则成功注册用户，同时跳转到登陆页面。注册页面可以跳转到登陆页面，实现新用户的注册，使用正则表达式判断用户输入是否符合格式，符合格式在数据库中判断是否用户名重复，重复则不能注册用户，不重复则成功注册用户，同时跳转到登陆页面。
简易留言板HTML+JS代码
未休的博客
10-06 1万+
基于HTML+JS代码实现的简易留言板
jQuery仿QQ空间说说发表评论留言代码_files.zip
11-23
本项目“jQuery仿QQ空间说说发表评论留言代码”旨在实现一个与QQ空间类似的评论和留言功能，使用户能够在网页上轻松发布和回应动态，提升用户体验。以下是对这个项目的详细解析： 1. **jQuery基础** - jQuery的...
空间留言板
05-17
前端界面设计上，"仿qq空间留言板"的命名暗示了它可能借鉴了QQ空间的界面元素和交互体验，这可能意味着使用了流行的前端框架如React或Vue.js来构建动态、响应式的用户界面。这些框架能够实现与后端服务的无缝通信，...
PHP设计的留言板
04-23
此外，留言板的前端设计也不容忽视。通常会使用HTML和CSS构建用户界面，JavaScript负责客户端的交互逻辑，如表单验证和动态加载更多留言等功能。在PHP脚本中，可能会用到AJAX技术，使得页面在不刷新的情况下实现数据...
PHPK留言墙(仿QQ爱墙).7z
03-14
【PHPK留言墙】是一款基于PHP开发的在线互动平台，其设计灵感来源于QQ爱墙，旨在为用户提供一个表达情感、分享心情的虚拟空间。这款应用的主要功能是让用户能够留下自己的文字信息，与其他用户进行交流，形成一种...
仿QQ空间留言板
12-19
这里面是仿造QQ空间里面的留言板的功能，包括留言、回复留言、显示留言 以及多用户回复留言。
qq留言板代码
09-22
qq留言板代码
仿QQ空间-留言系统
11-07
jsp/servlet+mysql 实现了mvc三层架构，部分功能未实现，简单的增删查改都已经实现。
仿QQ空间留言
05-05
仿QQ空间留言
类似QQ空间留言板还有管理功能
10-25
1：可以留言； 2：可以回复留言； 3：显示模式分留言本模式和论坛模式； 4：加密留言,只有管理员以及知道密码的人可见；
HTML+CSS+JS案例展示(留言板)
weixin_42541725的博客
02-07 3822
留言板
PHP留言板html代码,html怎么操作来实现留言板样式？（代码示例）
weixin_39893205的博客
03-13 1719
本篇文章主要给大家介绍一个非常简单的HTML留言板及html 留言列表样式的相关代码操作。留言板是一些门户网站或者论坛等等必不可少的一部分。HTML留言板具体代码示例如下：网页留言板版源码示例简易留言板function saveStorage(id) {var data = document.getElementById(id).value;var time = new Date().getTim...
留言板 HTML5代码
热门推荐
vi_to的博客
06-05 2万+
先看效果图： 代码如下： 首先是style： #di1{ border: 1px solid #D3D3D3; width: 700px; height: 500px; background-color: azure; } p{ font-size: 10px; color: #008000; } #di2{ border: 1px solid #FFFFFF; width: 400px; height: 400px; } #di3{ border: 1px solid #FFFFFF; width: 40
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值