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

来源：互联网发布：ubuntu 14.04 g 编辑：程序博客网时间：2024/05/29 03:18

主要技术要点：

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;}

2 0