jQuery实现留言板

已于 2022-01-18 23:42:57 修改
阅读量1.8k 收藏 25
点赞数 6
分类专栏： 前端 文章标签： jquery 前端 javascript
于 2022-01-18 23:35:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45971935/article/details/122570962
版权

效果展示：

目录

         HTML代码

         JS代码

         CSS代码

HTML代码

<body>
    <div id="msgBox">
        <form>
            <h2>来 , 说说你在做什么 , 想什么</h2>
            <div>
                <input id="userName" class="f-text" value="" />
                <p id="face">
                    <img src="img/face1.gif" class="current active" />
                    <img src="img/face2.gif" />
                    <img src="img/face3.gif" />
                    <img src="img/face4.gif" />
                    <img src="img/face5.gif" />
                    <img src="img/face6.gif" />
                </p>
            </div>
            <div><textarea id="conBox" class="f-text" maxlength="140"></textarea></div>
            <div class="tr">
                <p>
                    <span class="countTxt">还能输入</span><strong class="maxNum">140</strong><span>个字</span>
                    <input id="sendBtn" type="button" value="" title="快捷键 Ctrl+Enter" />
                </p>
            </div>
        </form>
        <div class="list">
            <h3><span>大家在说</span></h3>
            <ul>
                <li>
                    <div class="userPic"><img src="img/face.gif" /></div>
                    <div class="content">
                        <div class="userName"><a href="javascript:;">永不上线</a>:</div>
                        <div class="msgInfo">新增了好多你不知道的功能哦！</div>
                        <div class="times"><span>01月18日 18:22</span><a class="del" href="javascript:;">删除</a></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>

JS代码

<script src="../jquery/jquery.js"></script>
<script>
    let src = ''
    $('#face>img').on('mouseover', function () {
        $(this).addClass('active').siblings('img').removeClass('active')
    })
    $('#fase>img').on('mouseout', function () {
        $(this).removeClass('active')
    })
    $('#face>img').on('click', function () {
        $(this).addClass('current').siblings('img').removeClass('current')
        src = $(this).prop('src');
    })
    $('textarea').on('keyup', function () {
        let num = (140 - $(this).val().length)
        $('.maxNum').html(num)
    })
    $('#sendBtn').on('click', function () {
        console.log(1);
        let $li = $('<li></li>')
        $li.html(`<div class="userPic"><img src="${src}" /></div>
                    <div class="content">
                        <div class="userName"><a href="javascript:;">${$('#userName').val()}</a>:</div>
                        <div class="msgInfo">${$('#conBox').val()}</div>
                        <div class="times"><span>${getDay()}</span><a class="del" href="javascript:;">删除</a></div>
                    </div>`)
        $('.list>ul').append($li)
    })
</script>
function getDay(){
    let date = new Date();
    let m = date.getMonth()+1;
    let d = date.getDate();
    let h = date.getHours();
    let f = date.getMinutes();
    h = h<10?'0'+h:h;
    f = f<10?'0'+f:f;
    return m+'月'+d+'日'+" "+h+":"+f;
}

CSS代码

    <style type="text/css">
        body,
        div,
        h2,
        h3,
        ul,
        li,
        p {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        ul {
            list-style-type: none;
        }
        body {
            color: #333;
            background-color: lightblue;
            font: 12px/1.5 \5b8b\4f53;
        }
        #msgBox {
            width: 500px;
            background: #fff;
            border-radius: 5px;
            margin: 10px auto;
            padding-top: 10px;
        }
        #msgBox form h2 {
            font-weight: 400;
            font: 400 18px/1.5 \5fae\8f6f\96c5\9ed1;
        }
        #msgBox form {
            background: url(img/boxBG.jpg) repeat-x 0 bottom;
            padding: 0 20px 15px;
        }
        #userName,
        #conBox {
            color: #777;
            border: 1px solid #d0d0d0;
            border-radius: 6px;
            background: #fff url(img/inputBG.png) repeat-x;
            padding: 3px 5px;
            font: 14px/1.5 arial;
        }
        #userName.active,
        #conBox.active {
            border: 1px solid #7abb2c;
        }
        #userName {
            height: 20px;
        }
        #conBox {
            width: 448px;
            resize: none;
            height: 65px;
            overflow: auto;
        }
        #msgBox form div {
            position: relative;
            color: #999;
            margin-top: 10px;
        }
        #msgBox img {
            border-radius: 3px;
        }
        #face {
            position: absolute;
            top: 0;
            left: 172px;
        }
        #face img {
            width: 30px;
            height: 30px;
            cursor: pointer;
            margin-right: 6px;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }
        #face img.hover,
        #face img.current,
        #face img.active {
            width: 28px;
            height: 28px;
            border: 1px solid #f60;
            opacity: 1;
            filter: alpha(opacity=100);
        }
        #sendBtn {
            border: 0;
            width: 112px;
            height: 30px;
            cursor: pointer;
            margin-left: 10px;
            background: url(img/btn.png) no-repeat;
        }
        #sendBtn.hover {
            background-position: 0 -30px;
        }
        #msgBox form .maxNum {
            font: 26px/30px Georgia, Tahoma, Arial;
            padding: 0 5px;
        }
        #msgBox .list {
            padding: 10px;
        }
        #msgBox .list h3 {
            position: relative;
            height: 33px;
            font-size: 14px;
            font-weight: 400;
            background: #e3eaec;
            border: 1px solid #dee4e7;
        }
        #msgBox .list h3 span {
            position: absolute;
            left: 6px;
            top: 6px;
            background: #fff;
            line-height: 28px;
            display: inline-block;
            padding: 0 15px;
        }
        #msgBox .list ul {
            overflow: hidden;
            zoom: 1;
        }
        #msgBox .list ul li {
            float: left;
            clear: both;
            width: 100%;
            border-bottom: 1px dashed #d8d8d8;
            padding: 10px 0;
            background: #fff;
            overflow: hidden;
        }
        #msgBox .list ul li.hover {
            background: #f5f5f5;
        }
        #msgBox .list .userPic {
            float: left;
            width: 50px;
            height: 50px;
            display: inline;
            margin-left: 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        #msgBox .list .content {
            float: left;
            width: 400px;
            font-size: 14px;
            margin-left: 10px;
            font-family: arial;
            word-wrap: break-word;
        }
        #msgBox .list .userName {
            display: inline;
            padding-right: 5px;
        }
        #msgBox .list .userName a {
            color: #2b4a78;
        }
        #msgBox .list .msgInfo {
            display: inline;
            word-wrap: break-word;
        }
        #msgBox .list .times {
            color: #889db6;
            font: 12px/18px arial;
            margin-top: 5px;
            overflow: hidden;
            zoom: 1;
        }
        #msgBox .list .times span {
            float: left;
        }
        #msgBox .list .times a {
            float: right;
            color: #889db6;
            display: none;
        }
        .tr {
            overflow: hidden;
            zoom: 1;
        }
        .tr p {
            float: right;
            line-height: 30px;
        }
        .tr * {
            float: left;
        }
    </style>

weixin_45971935
关注
  • 6
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery发布留言案例
qq_42815580的博客
03-12 447
实现效果 可实现填写、添加、删除操作 创建元素 $("<li></li>") 添加元素 element.append("内容") 删除元素 element.remove()//删除匹配的元素，包含本身 代码展示 HTML结构 <div class="box" id="weibo"> <span>微博发布</span> <textarea name="" class="txt" co
一个简单的基于jQuery的留言板
fengya1112的博客
07-18 548
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.
jQuery设计留言板页面
m0_58736001的博客
05-16 906
【代码】jQuery设计留言板页面。
利用jQuery设计和实现一个简单的留言板网页
最新发布
2301_76675652的博客
04-19 630
我们设计和实现了一个简单的留言板网页。用户可以在文本框中输入留言，并通过提交按钮将其发布到页面上。这个示例可以作为学习如何构建更复杂留言板的基础，并可以根据实际需求进行扩展和定制。
jQuery实现留言板案例
明哥
03-17 4627
效果图： 源码如下： <!DOCTYPE html> <html lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.js"></scri.
jQuery实现留言板功能
热门推荐
意愿三七
04-01 6万+
jQuery实现留言板功能 绪论:今天课堂上做了一个小项目，使用jQuery实现留言板功能，秉着巩固和分享的心，来发布此篇文章。 留言样式效果: 以上是样式 下面我把css样式和排版放出来，功能的实现我单独讲 ...
开发一个简单的留言板应用——使用 Node.js 、Express 库 和 jQuery 库来实现一个简单的留言板应用程序
Mike白的博客
06-30 1322
本项目主要训练综合运用node+express技术搭建后台，html+css+JavaScript搭建前端页面,培养分析问题和解决问题的能力。使用 Node.js 、Express 库 和 jQuery 库来实现一个简单的留言板应用程序。它通过 AJAX 技术从服务器获取留言信息，并将其显示在页面上。它还允许用户提交新的留言信息，以及对输入信息进行基本的验证。
Jquery实现留言板
04-22
**jQuery实现简易留言板详解** 在Web开发中，创建一个交互性强、用户体验良好的留言板是常见的需求。jQuery，作为JavaScript的一个轻量级库，以其简洁的API和丰富的插件库，为实现这一功能提供了便利。本篇文章将...
jquery留言板
01-08
jq实现的留言板，可以进行发布留言和删除留言操作
PHP+mysql+jQuery说说留言板
11-24
在说说留言板的前端部分，jQuery用于增强用户体验，例如实现异步数据加载、动画效果和交互操作。当用户点击“发表”按钮时，jQuery可以发送AJAX（Asynchronous JavaScript and XML）请求，无刷新地将数据传递给后台...
jQuery+Canvas实现的手写留言板
12-15
这一篇文章，先简单讲解一下如何在canvas画板上画出一条红色的斜线，或许能帮助大家了解canvas画板的实现。jQuery+Canvas实现的手写留言板。 1）通过html5的canvas元素，创建一个宽800，高600的画板。 a）默认情况下，canvas在浏览器中看不到，因为它是透明的 b）最好不要用css样式定义canvas的宽度和高度，而直接用width、height定义 c）如果浏览器不支持canvas时，canvas标签中的文字就会显示出来了 2）使用js调用canvas的2D图形API接口 a）moveTo(x,y)：设定新路径的起始坐标。简单理解，我们在写毛笔字的时
jquery 留言板
02-22
jquery做的留言板,很不错,推荐大家下载一下试试看
jQuery简易留言板
Transparent_Mask的博客
01-16 526
我记得应该是改编的 但没找到。
Jquery-留言板
知识点沉淀包括不限于前端
01-16 3383
一键直达效果图htmlcss 效果图 html <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <title>模拟留言板</title> <link href="lyb_style.c...
制作简易留言板html5，使用jquery实现留言以及删除功能
kkkliao1的博客
06-21 2775
制作简易留言板html5，使用jquery实现留言以及删除功能
利用jq写一个留言板
个人笔记
04-07 1854
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>留言板</title> <link rel="stylesheet" type="text/css" href="css/01留言板.css"/> </head> <body> <!--留言板底部标签--> <div class="ro
今天给大家分享一下jq写留言板的一种方法
GeDeBiao的博客
04-18 2103
首先我要声明一下------- 我非常喜欢写博客，给大家分享自己的小难点 好了，下面进入正题 //这个是留言要加入的地方 <div class="lyb"> <div class="liuyanban"> <img src="images/tx1.png"/> <h2>如何学习Web前端开发课程</h2> ...
jQuery 微博发布留言案例
qq_50839755的博客
04-07 1438
发布微博案例 1.点击发布文本框输入的内容 显示在下面 2.点击后面的删除 可以删除留言 重点注意 文本框的值获取用 .val() 普通的用 .html() 动态生成 li 把输入的内容存在 li 里 添加到 ul里 添加在前用prepend() 添加在后用append() 绑定动态元素的事件 必须用 on slideUp()里面可以添加回调函数 代码展示 <!DOCTYPE html> <html> <head> <meta char
jQuery留言板
sty_star的博客
04-18 3818
html代码 <ul></ul> <textarea id="ltk"></textarea> <button id="fs">按钮</button> js代码 <script src="jquery-3.3.1.min.js"></script> //链入jQuery <script&...
jQuery留言板案例
05-13
以下是一个简单的 jQuery 留言板的示例代码： HTML 代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery 留言板</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <h1>jQuery 留言板</h1> <form id="message-form"> <label for="name">姓名：</label> <input type="text" id="name" name="name" required> <label for="message">留言：</label> <textarea id="message" name="message" required></textarea> <input type="submit" value="提交"> </form> <ul id="message-list"> <!-- 这里将显示留言列表 --> </ul> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="app.js"></script> </body> </html> ``` CSS 代码： ```css body { font-family: Arial, sans-serif; } #container { margin: 0 auto; max-width: 600px; padding: 20px; } h1 { text-align: center; } label { display: inline-block; margin-bottom: 5px; } input[type="text"], textarea { display: block; margin-bottom: 15px; width: 100%; } input[type="submit"] { display: block; margin: 15px auto; } ul { list-style: none; padding: 0; } li { margin-bottom: 20px; border: 1px solid #ccc; padding: 10px; } li h2 { margin-top: 0; } li p { margin-bottom: 0; } ``` JavaScript 代码： ```javascript $(function() { // 获取留言列表 getMessages(); // 提交留言 $('#message-form').submit(function(event) { event.preventDefault(); // 获取表单数据 var name = $('#name').val(); var message = $('#message').val(); // 发送 AJAX 请求 $.ajax({ type: 'POST', url: 'submit.php', data: { name: name, message: message }, success: function(response) { // 清空表单 $('#name').val(''); $('#message').val(''); // 刷新留言列表 getMessages(); } }); }); // 获取留言列表 function getMessages() { $.ajax({ type: 'GET', url: 'get.php', success: function(response) { // 清空留言列表 $('#message-list').empty(); // 显示留言列表 $.each(response, function(index, message) { var li = '<li><h2>' + message.name + '</h2><p>' + message.message + '</p></li>'; $('#message-list').append(li); }); } }); } }); ``` PHP 代码（submit.php）： ```php <?php // 获取表单数据 $name = $_POST['name']; $message = $_POST['message']; // 将留言保存到数据库或文件中，这里只是简单地输出到控制台 echo '姓名：' . $name . '<br>'; echo '留言：' . $message . '<br>'; ?> ``` PHP 代码（get.php）： ```php <?php // 从数据库或文件中获取留言列表，这里只是简单地返回一个数组 $messages = array( array( 'name' => '张三', 'message' => '你好，世界！' ), array( 'name' => '李四', 'message' => '今天天气不错。' ), array( 'name' => '王五', 'message' => '明天去旅游。' ) ); // 将留言列表转换成 JSON 格式并输出 echo json_encode($messages); ?> ``` 上述代码中，submit.php 和 get.php 分别用于提交留言和获取留言列表。在实际应用中，应该将留言保存到数据库或文件中，而不是简单地输出到控制台。 此外，还需要注意防止 XSS 攻击。可以使用 PHP 的 htmlspecialchars 函数将留言内容中的特殊字符转换成 HTML 实体，如下所示： ```php $message = htmlspecialchars($_POST['message'], ENT_QUOTES, 'UTF-8'); ``` 以上就是一个简单的 jQuery 留言板的示例代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值