jquery评论留言代码

最新推荐文章于 2022-04-04 11:40:26 发布
最新推荐文章于 2022-04-04 11:40:26 发布
阅读量7.6k 收藏 8
点赞数
分类专栏： jq 文章标签： 评论 留言

<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Document</title>

<style type="text/css">
*{margin:0px; padding:0px;}
body{background:#3FC;}
#qq{width:600px;/*宽*/height:170px;/*高*/background:#fff;/*背景颜色*/
 margin:50px auto 30px; border-radius:5px;/*Html5 圆角*/}
#qq p{font-size:12px; color:#666; font-family:"微软雅黑";
  line-height:45px; text-indent:20px;}
#qq .message{width:560px; height:70px;margin:0px auto; outline:none;
   border:1px solid #ddd; /*粗细 风格 颜色*/}
#qq .But{width:560px;height:35px;margin:15px auto 0px; position:relative;/*相对，参考对象*/}
#qq .But img.bq{float:left;/*左浮动*/}
#qq .But span.submit{width:80px;height:30px; background:#ff8140;     display:block; float:right;/*右浮动*/        line-height:30px;border-radius:5px;        cursor:pointer;/*手指*/color:#fff;font-size:12px;     text-align:center;font-family:"微软雅黑";}

/*face begin*/
#qq .But .face{width:390px; height:160px; background:#fff; padding:10px;
    border:1px solid #ddd; box-shadow:2px 2px 3px #666;
    position:absolute;/*绝对定位*/ top:21px; left:15px;
    display:none;/*隐藏*/}
#qq .But .face ul li{width:22px;height:22px;
    list-style-type:none;/*去掉圆点*/ float:left;
    margin:2px; cursor:pointer;}

/*msgCon begin*/
.msgCon{width:600px;height:500px; margin:0px auto;}
.msgCon .msgBox{ background:#fff;
    padding:10px; margin-top:20px;}
.msgCon .msgBox dl{height:60px; border-bottom:1px dotted #ddd;}
.msgCon .msgBox dl dt{width:50px; height:50px;float:left;}
.msgCon .msgBox dl dt img{border-radius:25px;}
.msgCon .msgBox dl dd{width:500px; height:50px;  line-height:50px;float:right; font-size:16px;font-family:"微软雅黑";}
.msgCon .msgBox .msgTxt{font-size:12px; color:#666; line-height:25px;}
</style>


 </head>
 <body>

<div id="qq">
 <p>有什么新鲜事想告诉大家?</p>
 <div class="message" contentEditable='true'></div>

 <div class="But">
  <img src="images/bba_thumb.gif" class='bq'/>
  <span class='submit'>发表</span>
  <!--face begin-->
  <div class="face">
   <ul>
    <li><img src="images/zz2_thumb.gif" title="[织]" ></li>
    <li><img src="images/horse2_thumb.gif" title="神马]"></li>
    <li><img src="images/fuyun_thumb.gif" title="[浮云]"></li>
    <li><img src="images/geili_thumb.gif" title="[给力]"></li>
    <li><img src="images/wg_thumb.gif" title="[围观]"></li>
    <li><img src="images/vw_thumb.gif" title="[威武]"></li>
    <li><img src="images/panda_thumb.gif" title="[熊猫]"></li>
    <li><img src="images/rabbit_thumb.gif" title="兔子]"></li>
    <li><img src="images/otm_thumb.gif" title="[奥特曼]"></li>
    <li><img src="images/j_thumb.gif" title="[囧]"></li>
    <li><img src="images/hufen_thumb.gif" title="[互粉]"></li>
                <li><img src="images/bba_thumb.gif" title="[懒得理你]"></li>
                <li><img src="images/zz2_thumb.gif" title="[织]" ></li>
    <li><img src="images/horse2_thumb.gif" title="神马]"></li>
    <li><img src="images/fuyun_thumb.gif" title="[浮云]"></li>
    <li><img src="images/geili_thumb.gif" title="[给力]"></li>
    <li><img src="images/wg_thumb.gif" title="[围观]"></li>
    <li><img src="images/vw_thumb.gif" title="[威武]"></li>
    <li><img src="images/panda_thumb.gif" title="[熊猫]"></li>
    <li><img src="images/rabbit_thumb.gif" title="兔子]"></li>
    <li><img src="images/otm_thumb.gif" title="[奥特曼]"></li>
    <li><img src="images/j_thumb.gif" title="[囧]"></li>
    <li><img src="images/hufen_thumb.gif" title="[互粉]"></li>
    <li><img src="images/liwu_thumb.gif" title="[礼物]"></li>
    <li><img src="images/liwu_thumb.gif" title="[礼物]"></li>
    <li><img src="images/smilea_thumb.gif" title="呵呵]"></li>
    <li><img src="images/tootha_thumb.gif" title="嘻嘻]"></li>
    <li><img src="images/laugh.gif" title="[哈哈]"></li>
    <li><img src="images/tza_thumb.gif" title="[可爱]"></li>
    <li><img src="images/kl_thumb.gif" title="[可怜]"></li>
    <li><img src="images/kbsa_thumb.gif" title="[挖鼻屎]"></li>
    <li><img src="images/cj_thumb.gif" title="[吃惊]"></li>
    <li><img src="images/shamea_thumb.gif" title="[害羞]"></li>
    <li><img src="images/zy_thumb.gif" title="[挤眼]"></li>
    <li><img src="images/bz_thumb.gif" title="[闭嘴]"></li>
    <li><img src="images/bs2_thumb.gif" title="[鄙视]"></li>
    <li><img src="images/lovea_thumb.gif" title="[爱你]"></li>
    <li><img src="images/sada_thumb.gif" title="[泪]"></li>
    <li><img src="images/heia_thumb.gif" title="[偷笑]"></li>
    <li><img src="images/qq_thumb.gif" title="[亲亲]"></li>
    <li><img src="images/sb_thumb.gif" title="[生病]"></li>
    <li><img src="images/mb_thumb.gif" title="[太开心]"></li>
    <li><img src="images/bba_thumb.gif" title="[懒得理你]"></li>
                <li><img src="images/zz2_thumb.gif" title="[织]" ></li>
    <li><img src="images/horse2_thumb.gif" title="神马]"></li>
    <li><img src="images/fuyun_thumb.gif" title="[浮云]"></li>
    <li><img src="images/geili_thumb.gif" title="[给力]"></li>
    <li><img src="images/wg_thumb.gif" title="[围观]"></li>
    <li><img src="images/vw_thumb.gif" title="[威武]"></li>
    <li><img src="images/panda_thumb.gif" title="[熊猫]"></li>
    <li><img src="images/rabbit_thumb.gif" title="兔子]"></li>
    <li><img src="images/otm_thumb.gif" title="[奥特曼]"></li>
    <li><img src="images/j_thumb.gif" title="[囧]"></li>
    <li><img src="images/hufen_thumb.gif" title="[互粉]"></li>
    <li><img src="images/liwu_thumb.gif" title="[礼物]"></li>
    <li><img src="images/smilea_thumb.gif" title="呵呵]"></li>
    <li><img src="images/tootha_thumb.gif" title="嘻嘻]"></li>
    <li><img src="images/laugh.gif" title="[哈哈]"></li>
    <li><img src="images/tza_thumb.gif" title="[可爱]"></li>
    <li><img src="images/kl_thumb.gif" title="[可怜]"></li>
    <li><img src="images/kbsa_thumb.gif" title="[挖鼻屎]"></li>
    <li><img src="images/cj_thumb.gif" title="[吃惊]"></li>
    <li><img src="images/shamea_thumb.gif" title="[害羞]"></li>
    <li><img src="images/zy_thumb.gif" title="[挤眼]"></li>
    <li><img src="images/bz_thumb.gif" title="[闭嘴]"></li>
    <li><img src="images/bs2_thumb.gif" title="[鄙视]"></li>
    <li><img src="images/lovea_thumb.gif" title="[爱你]"></li>
    <li><img src="images/sada_thumb.gif" title="[泪]"></li>
    <li><img src="images/heia_thumb.gif" title="[偷笑]"></li>
    <li><img src="images/qq_thumb.gif" title="[亲亲]"></li>
    <li><img src="images/sb_thumb.gif" title="[生病]"></li>
    <li><img src="images/mb_thumb.gif" title="[太开心]"></li>
    
    <li><img src="images/smilea_thumb.gif" title="呵呵]"></li>
    <li><img src="images/tootha_thumb.gif" title="嘻嘻]"></li>
    <li><img src="images/laugh.gif" title="[哈哈]"></li>
    <li><img src="images/tza_thumb.gif" title="[可爱]"></li>
    <li><img src="images/kl_thumb.gif" title="[可怜]"></li>
    <li><img src="images/kbsa_thumb.gif" title="[挖鼻屎]"></li>
    <li><img src="images/cj_thumb.gif" title="[吃惊]"></li>
    <li><img src="images/shamea_thumb.gif" title="[害羞]"></li>
    <li><img src="images/zy_thumb.gif" title="[挤眼]"></li>
    <li><img src="images/bz_thumb.gif" title="[闭嘴]"></li>
    <li><img src="images/bs2_thumb.gif" title="[鄙视]"></li>
    <li><img src="images/lovea_thumb.gif" title="[爱你]"></li>
    <li><img src="images/sada_thumb.gif" title="[泪]"></li>
    <li><img src="images/heia_thumb.gif" title="[偷笑]"></li>
    <li><img src="images/qq_thumb.gif" title="[亲亲]"></li>
    <li><img src="images/sb_thumb.gif" title="[生病]"></li>
    <li><img src="images/mb_thumb.gif" title="[太开心]"></li>
    <li><img src="images/bba_thumb.gif" title="[懒得理你]"></li>
    
   </ul>
  </div>
  <!--face end-->
 </div>
</div>
<!--qq end-->
<div id="time1"></div>
<!--msgCon begin-->
<div class="msgCon">


</div>

<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">

 //点击小图片，显示表情
 $(".bq").click(function(e){
  $(".face").slideDown();//慢慢向下展开
  e.stopPropagation();   //阻止冒泡事件
 });

 //在桌面任意地方点击，他是关闭
 $(document).click(function(){
  $(".face").slideUp();//慢慢向上收
 });

 //点击小图标时，添加功能
 $(".face ul li").click(function(){
  var simg=$(this).find("img").clone();
  $(".message").append(simg);
 });

 //点击发表按扭，发表内容
 $("span.submit").click(function(){

  var txt=$(".message").html();
  if(txt==""){
   $('.message').focus();//自动获取焦点
   return;
  }

  $(".msgCon").prepend("<div class='msgBox'><dl><dt><img src='images/tx.jpg' width='50' height='50'/></dt><dd>神马都是浮云</dd></dl><div class='msgTxt'>"+txt+"</div></div>");

 });

</script>


 </body>
</html>

hupan_2014
关注
专栏目录
jQuery实现用户评论留言代码
10-08
jQuery实现用户评论留言代码　
Jquery实现留言板
04-22
Jquery实现简易留言板
jquery留言板
01-08
jq实现的留言板，可以进行发布留言和删除留言操作
jQuery评论插件可回复评论代码.zip
07-04
jQuery评论插件可回复评论代码是一款支持评论人回复功能代码。 jQuery评论插件可回复评论代码
原生js留言板发表评论代码
11-07
原生js留言板发表评论代码
jQuery无刷新留言评论发布代码.zip
06-05
【jQuery无刷新留言评论发布代码】是一个基于JavaScript库jQuery实现的网页交互功能，它使得用户在网站上发表或查看评论时无需重新加载整个页面，提高了用户体验。无刷新技术的核心是利用Ajax（Asynchronous ...
jQuery留言评论发布代码.zip
07-11
《jQuery留言评论发布代码详解与应用》 在Web开发领域，用户交互体验是提升网站质量的关键因素之一。jQuery，作为一款强大的JavaScript库，为开发者提供了丰富的API和便捷的语法，使得实现诸如留言评论发布这样的...
jQuery留言评论发布代码
06-24
本文将详细解析"jQuery留言评论发布代码"这一主题，以帮助你理解如何利用jQuery实现类似新浪微博的留言评论功能。 一、jQuery基础 在开始之前，我们需要对jQuery的基本概念有所了解。jQuery由John Resig于2006年...
jQuery无刷新留言评论发布代码
12-09
在现代Web开发中，用户体验是至关重要的，"jQuery无刷新留言评论发布代码"是一个实现这一目标的典型示例。无刷新技术使得用户在不重新加载整个网页的情况下就能完成交互操作，如发表评论或查看新评论，极大地提高了...
jQuery实现简单评论区功能
01-21
本文实例为大家分享了jQuery实现简单评论区的具体代码，供大家参考，具体内容如下 直接看代码吧 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA-Compatible content=ie=edge> <title>Document</title> <link rel=stylesheet href=css/
jQuery实现简单评论功能
11-19
本文实例为大家分享了jQuery实现简单评论功能的具体代码，供大家参考，具体内容如下
jQuery实现得评论模块
04-12
本模块可用于评论或留言，输入区模仿畅言，内容显示使用时间轴，以下是示例图。
jQuery仿QQ空间说说发表评论留言代码
07-28
jQuery仿QQ空间说说发表评论留言代码
jquery 留言板
02-22
jquery做的留言板,很不错,推荐大家下载一下试试看
留言板基于springmvc+js+jq+ajax+oracle开发的留言板项目简单适合新手，代码注释很详细，包括点赞，发布留言增删改查头像上传等
11-04
基于springmvc+js+jq+ajax+oracle开发的留言板项目简单适合新手，代码注释很详细，包括点赞，发布留言增删改查头像上传等等
JQuery 动态留言
sehnsucht
10-30 736
JQuery 动态留言 请设计一个动态留言的功能,满足如下要求: 页面默认有让用户填写昵称的及留言内容的文本框 用户输入的昵称及内容不可为空，当输入后点发布时，能将最新的留言显示在留言框及昵称文本框的上方,不断发布则不断添加 要求新留言默认在上，旧留言默认在下 每条新增的留言后方会跟随一个删除按钮,点击删除按钮的时候会删除该条留言 要求使用JQuery来实现;6.要求对整个留言功能进行简单的美化； <!DOCTYPE html> <html lang="en"> <hea
如何用jquery方法写留言版
Tone的博客
12-18 1717
留言板样式代码块 @charset 'utf-8'; /* 去除全局默认边距*/ * { margin: 0; padding: 0; } li { width: 100%; padding: 10px; list-style: none; display: flex; border-radius: 5px; border-bottom: 1px solid rgb(175, 58, 58); } ul { padding: 0p
jquery实现的企业留言表单介绍页面源码【92ui.net】
mazai5080的博客
04-04 1259
大家好，今天给大家介绍一款，简洁实用的企业留言表单和联系我们介绍页面源码（图1）。送给大家哦，获取方式在本文末尾。
Ajax留言板(纯代码)
登山小熊的博客
05-25 1254
前段时间一直在学习AJAX,所以自己写了个Ajax留言板(纯代码)不过此留言板的界面代码是摘自网上一大大的,但后台代码由个人实现,在此谢过那位大大!! 该留言板无任何AJAX控件,功能全由代码实现!下面是此留言板的源码下载地址和可视效果,希望大家能给点意见^_^!!http://j.99081.com/b94110535/Something/AjaxLeaveMsg(allcode).
jquery留言板代码
最新发布
10-20
这个jquery留言板代码主要实现了用户输入昵称和留言内容后，点击提交按钮就可以创建一条留言并显示在页面的留言板上。同时，每条留言都会有第几条的标记。用户也可以点击删除按钮来删除当前留言。这个留言板代码使用...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值