jQuery实现论坛发帖Demo

效果展示
思路
代码
改进空间

效果展示

思路

主要知识点：运用jQuery对HTML元素节点的操作(append)来添加帖子。

交互设计：用户点击页面上的“论坛发帖”按钮，出现表单，填写表单后点击“发帖”按钮，jQuery获取表单内容，创建新的节点（头像随机）来合成一个“帖子”，最终插入到当前页面的结尾。

代码

完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>论坛发帖</title>

    <style>

        h2 {

            text-align: center;

            padding: 10px;

            background-color: cornflowerblue;

            border: 1px solid cornflowerblue;

            border-radius: 6px;

            color: white;

            margin-bottom: 30px;

            letter-spacing: 0.8em;

            cursor: pointer;

        }

        .post {

            width: 50%;

            height: 400px;

            margin: 0 auto;

            border: 1px solid rgb(221, 221, 221);

            border-radius: 2px;

            display: none;

            position: absolute;

            top: 100px;

            background-color: white;

            left: 25%;

        }

        .title {

            width: 87%;

            margin-left: 5%;

            margin-top: 20px;

            height: 2em;

            border: 1px solid rgb(230, 230, 230);

            padding-left: 1em;

        }

        .text {

            width: 85%;

            margin-left: 5%;

            margin-top: 10px;

            height: 60%;

            border: 1px solid rgb(230, 230, 230);

            padding: 1em;

            font-size: 1.1em;

            overflow: auto;

        }

        .combtn {

            width: 30%;

            margin-top: 10px;

            margin-left: 35%;

            height: 10%;

            border: 1px solid rgb(230, 230, 230);

            background-color: cornflowerblue;

            color: white;

            border-radius: 5px;

        }

        .comment_block {

            margin: 0 auto;

            width: 50%;

            height: auto;

        }

        .touxiang {

            width: 60px;

            height: 60px;

            float: left;

        }

        .touxiang img {

            border: 1px white solid;

            border-radius: 50%;

            width: 100%;

            height: 100%;

        }

        .content {

            float: left;

            width: 80%;

            margin-left: 3%;

            border: 1px solid rgb(221, 221, 221);

            padding: 1em;

            border-radius: 5px;

            height: auto;

            margin-bottom: 20px;

        }

        h4 {

            font-size: 1.2em;

            font-weight: normal;

            margin-top: 0;

            border-left: 6px solid cornflowerblue;

            padding-left: 3%;

            background-color: rgba(100, 149, 237, 0.2);

            border-radius: 5px;

            margin-bottom: 3%;

            font-family: '宋体';

        }

        .com_body {

            font-family: '宋体';

            color: darkgray;

            height: auto;

            clear: both;

            width: 96%;

            margin: 0 auto;

            margin-bottom: 10px;

            /*text-indent: 2em;*/

        }

        .date {

            width: 100%;

            text-align: right;

            font-size: 0.8em;

            color: rgb(114, 114, 114);

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

        }

        ul {

            list-style: none;

        }

    </style>

</head>

<body>

    <div class="comment">

        <h2>论坛发帖</h2>

        <section>

            <ul></ul>

        </section>

        <div class="post">

            <input type="text" class="title" placeholder="请输入标题">

            <textarea class="text" placeholder="请输入评论"></textarea>

            <input type="button" value="发布评论" class="combtn">

        </div>

    </div>

    <script src="jquery-1.8.3.min.js"></script>

    <script>

        $(document).ready(function() {

            $("h2").click(function() {

                $(".post").show()

            })

            var tou = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg");

            $(".post .combtn").click(function() {

                var $newLi = $("<li></li>"); //创建一个新的li节点元素

                var iNum = Math.floor(Math.random() * 10); //随机获取头像

                var $block = $("<div class=comment_block></div>");

                var $touImg = $("<div class=touxiang><img src=stitch/" + tou[iNum] + "></div>"); //创建头像节点

                var $comment = $("<div class=content></div>");

                var $title = $("<h4>" + $(".title").val() + "</h4>"); //设置标题节点

                var $newComBody = $("<div class=com_body><pre>" + $(".text").val() + "</pre></div>"); //创建一个新的div节点元素

                var myDate = new Date();

                var currentDate = myDate.getFullYear() + "-" + parseInt(myDate.getMonth() + 1) + "-" + myDate.getDate() + " " + myDate.getHours() + ":" + myDate.getMinutes() + ":" + myDate.getSeconds();

                var $newDate = $("<div class=date>" + currentDate + "</div>") //在div节点中插入发布时间；

                $($block).append($touImg); //插入头像

                $($comment).append($title); //插入标题

                $($comment).append($newComBody); //插入评论内容

                $($comment).append($newDate);

                $($block).append($comment);

                $($newLi).append($block);

                $(".comment section ul").append($newLi);

                $(".post .text").val("");

                $(".post .title").val("");

                $(".post").hide();

            })

        });

    </script>

</body>

</html>

头像素材如下：

改进空间

1.交互方面可以再做得精细些，比如用户不想发帖时可以隐藏发帖表单；

2.布局考虑响应式，字体大小使用相对单位；

3.添加删帖/按时间排序功能；

jQuery实现论坛发帖Demo的更多相关文章

jquery制作论坛或社交网站的每天打卡签到特效
效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ...
适应手机端的jQuery图片滑块动画DEMO演示
在线预览下载地址实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
xTiNt 论坛发帖辅助软件 1.0 绿色版
软件名称:xTiNt 论坛发帖辅助软件 1.0 绿色版软件语言: 简体中文授权方式: 免费软件应用平台: Win7 / Vista / Win2003 / WinXP / Win2008 软件大小: ...
滚动加载|页面滑到底部加载数据|jquery.endless-scroll插件|使用demo
<html> <head> <link rel="dns-prefetch" href="http://i.tq121.com.cn&quo ...
ECharts 初识（基于MVC+jQuery+Angularjs实现的Demo）
一.背景: 我们这行做web开发的,很多时候都需要做数据统计报表,现在我所使用的是来自百度团队的ECharts.官方网址:http://echarts.baidu.com/ 我们知 ...
jquery 图片轮播demo实现
转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 图片轮播demo,弄清楚过程其实是一个很简单的东西,看网上都没有什么实质性的代码,就自己把过程捋了一遍实现了. 这次因为随手写的,所以没有做 ...
jquery版悬浮模块demo
在做在线客服时,代码就是按照该模块命名.现在,我要添加一个返回主页的功能,我觉得再复制一遍之前的代码,那个量有点多,如果我再添加一个功能,那个量会很多……现在我用创建对象字面量的方式来创建(其实我还想 ...
Jquery Mobile 百度地图 Demo
首先非常感谢franck分享的Demo! Demo截图: 下面是franck对此Demo的说明: 原理:1.通过百度拾取坐标系统获得点位的坐标. http://api.map.baidu.com/lb ...
jQuery插件Flot实战Demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
复选框、单选框 jquery判断是否选中Demo
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="eachcheckbox.a ...

随机推荐

python的排序问题
python的排序方法有两个 1 nums.sort() # 原数组上排序, 没有返回值, nums变为有序 2 # 或者 3 nums = sorted(nums) # 原数组不变, 会返回一个排好 ...
修改系统hosts文件访问github
C:\Windows\System32\drivers\etc 199.232.69.194 github.global.ssl.fastly.net 140.82.114.4 github.com
luna lunatic
Luna是罗马神话的月神.英语中Lunacy.Lunatic等意指疯狂的字语源均来自Luna.月亮的阴晴圆缺影响地球的潮汐涨退甚至生物周期,故此古时的人们相信月亮拥有使人疯狂的魔力,人狼等传说亦是因此 ...
什么叫SSH？原理详解。
SSH(Secure Shell,安全外壳)是一种网络安全协议,通过加密和认证机制实现安全的访问和文件传输等业务.传统远程登录或文件传输方式,例如Telnet.FTP,使用明文传输数据,存在很多的安全 ...
PowerShell学习笔记四_函数、IO操作、字符操作、数组
使用静态方法 $now = [DateTime]::Now 实例化 $var=New-Object System.DateTime(1991,12,14)#实例化不需要[] 函数定义 Function ...
$\bf{X} \bf{X}^T$和$ \bf{X}^T \bf{X}$的非零特征值和特征向量之间的关系
设$\lambda_i$为$\bf{X} \bf{X}^T$的特征值,对应的特征向量为$\mathbf{\alpha}_i$,则 \[\bf{X} \bf{X}^T \mathbf{\al ...
苹果手机备份及itunes下载更新路径
1.itunes备份路径: C:\Users\xxx.xxx\AppData\Roaming\Apple Computer\MobileSync\Backup\ 2.itunes更新IOS路径: C: ...
关于sql时间方面的处理
查询大于时间两小时(例:订单设置两小时后过期 $res = Order::where(['status'=>0,'sid'=>1])->whereRaw("created_ ...
nginx auth_basic uwsgi 目录简易认证。
mkdir /etc/nginx/conf.d/auth_pwd touch /etc/nginx/conf.d/auth_pwd/xx.pwd htpasswd -c -d /etc/nginx/c ...
b站
题目描述 n条鱼,每条鱼的体积是ai 每一轮,每一条鱼一定会吃掉右边比自己小的第一条鱼,一条鱼只能被吃一次. 多少轮后,鱼的数量会稳定. 例子: 6 6 3 3 --> 6 6 3(第二个3)- ...

jQuery实现论坛发帖Demo

效果展示

思路

代码

改进空间

jQuery实现论坛发帖Demo的更多相关文章

随机推荐

热门专题