添加发布评论功能
This commit is contained in:
804
web/index.jsp
804
web/index.jsp
@@ -9,12 +9,12 @@
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<head>
|
||||
<title>留言本</title>
|
||||
<%-- Lay-ui组件库--%>
|
||||
<%-- <script type="text/javascript" src="./static/layui/layui.js"></script>--%>
|
||||
<%-- <%– Lay-ui样式–%>--%>
|
||||
<%-- <link rel="stylesheet" type="text/css" href="./static/layui/css/layui.css">--%>
|
||||
<%-- <script type="text/javascript" src="./static/layui/layui.js"></script>--%>
|
||||
<%-- <%– Lay-ui样式–%>--%>
|
||||
<%-- <link rel="stylesheet" type="text/css" href="./static/layui/css/layui.css">--%>
|
||||
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<!-- 引入 layui.css -->
|
||||
<link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
|
||||
@@ -22,429 +22,481 @@
|
||||
<!-- 引入 layui.js -->
|
||||
<script src="//unpkg.com/layui@2.8.0/dist/layui.js">
|
||||
|
||||
// <link rel="stylesheet" href="./static/css/index.css" type="text/css">
|
||||
// <link rel="stylesheet" href="./static/css/index.css" type="text/css">
|
||||
|
||||
// <script language=JavaScript type="text/javascript" src="static/js/index.js"></script>
|
||||
// <script language=JavaScript type="text/javascript" src="static/js/index.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
@IMPORT url("./static/css/index.css");
|
||||
@IMPORT url("./static/css/index.css");
|
||||
|
||||
.submit {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background-color: #1dc48c;
|
||||
}
|
||||
|
||||
.layui-icon-down {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.layui-nav .layui-nav-more {
|
||||
position: absolute;
|
||||
top: -13px;
|
||||
right: 3px;
|
||||
left: auto !important;
|
||||
margin-top: 0;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all .2s;
|
||||
-webkit-transition: all .2s;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
|
||||
<div class="main">
|
||||
<div class="main">
|
||||
<div class="header">
|
||||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;">
|
||||
<div style="width: 570px;height: 45px;">
|
||||
<span style="font-size: 2rem;font-weight: 700;font-family: FZShuTi;color:coral;">留 言 本</span>
|
||||
</div>
|
||||
<button type="button" class="layui-btn layui-btn-warm layui-btn-radius" lay-on="wrap">
|
||||
<i class="layui-icon layui-icon-edit"></i>
|
||||
发布留言
|
||||
</button>
|
||||
<!-- <button type="button" class="layui-btn layui-btn-radius" lay-on="admin">
|
||||
<i class="layui-icon layui-icon-set-fill"></i>
|
||||
管理
|
||||
</button> -->
|
||||
<div>
|
||||
<ul class="layui-nav" style="background: transparent;">
|
||||
<li class="layui-nav-item" lay-unselect>
|
||||
<a href="javascript:;">
|
||||
<img src="./static/img/touxiang.png" class="layui-nav-img">
|
||||
</a>
|
||||
<dl class="layui-nav-child">
|
||||
<button type="button" class="layui-btn layui-btn-radius" lay-on="admin">
|
||||
<i class="layui-icon layui-icon-set-fill"></i>
|
||||
管理
|
||||
</button>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;">
|
||||
<div style="width: 570px;height: 45px;">
|
||||
<span style="font-size: 2rem;font-weight: 700;font-family: FZShuTi;color:coral;">留 言 本</span>
|
||||
</div>
|
||||
<button type="button" class="layui-btn layui-btn-warm layui-btn-radius" lay-on="wrap">
|
||||
<i class="layui-icon layui-icon-edit"></i>
|
||||
发布留言
|
||||
</button>
|
||||
<!-- <button type="button" class="layui-btn layui-btn-radius" lay-on="admin">
|
||||
<i class="layui-icon layui-icon-set-fill"></i>
|
||||
管理
|
||||
</button> -->
|
||||
<div>
|
||||
<ul class="layui-nav" style="background: transparent;">
|
||||
<li class="layui-nav-item" lay-unselect>
|
||||
<a href="javascript:;">
|
||||
<img src="./static/img/touxiang.png" class="layui-nav-img">
|
||||
</a>
|
||||
<dl class="layui-nav-child">
|
||||
<button type="button" class="layui-btn layui-btn-radius" lay-on="admin">
|
||||
<i class="layui-icon layui-icon-set-fill"></i>
|
||||
管理
|
||||
</button>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<blockquote class="layui-elem-quote layui-text">
|
||||
留言列表
|
||||
留言列表
|
||||
</blockquote>
|
||||
|
||||
<!-- 管理员登陆 -->
|
||||
<div class="layui-form" id="adminform" lay-filter="filter-test-layer" style="margin: 16px;display: none;">
|
||||
<form action="/Guestbook_war_exploded/login" method="post">
|
||||
<div class="demo-login-container">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
</div>
|
||||
<input type="text" name="username" value="" lay-verify="required" placeholder="用户名"
|
||||
lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-password"></i>
|
||||
</div>
|
||||
<input type="password" name="password" value="" lay-verify="required" placeholder="密 码"
|
||||
lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs7">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-vercode"></i>
|
||||
</div>
|
||||
<input type="text" name="code" value="" lay-verify="required" placeholder="验证码"
|
||||
lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
|
||||
<form action="/Guestbook_war_exploded/login" method="post">
|
||||
<div class="demo-login-container">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
</div>
|
||||
<input type="text" name="username" value="" lay-verify="required" placeholder="用户名"
|
||||
lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs5">
|
||||
<div style="margin-left: 10px;">
|
||||
<img src=VerifycodeServlet
|
||||
onclick="this.src='VerifycodeServlet?'+ new Date().getTime();">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-password"></i>
|
||||
</div>
|
||||
<input type="password" name="password" value="" lay-verify="required" placeholder="密 码"
|
||||
lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs7">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-vercode"></i>
|
||||
</div>
|
||||
<input type="text" name="code" value="" lay-verify="required" placeholder="验证码"
|
||||
lay-reqtext="请填写验证码" autocomplete="off" class="layui-input"
|
||||
lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs5">
|
||||
<div style="margin-left: 10px;">
|
||||
<img src=VerifycodeServlet
|
||||
onclick="this.src='VerifycodeServlet?'+ new Date().getTime();">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<input class="submit" type="submit" value="登录"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
|
||||
</div>
|
||||
<%-- <div class="layui-form-item">--%>
|
||||
<%-- <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>--%>
|
||||
<%-- </div>--%>
|
||||
<input type="submit" value="注册"/>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 发布留言的主体 -->
|
||||
<div class="wrap" id="warp" style="display: none;">
|
||||
<div class="userIfo">
|
||||
<div class="userIfo">
|
||||
<div class="layui-panel">
|
||||
<div style="padding: 32px;" class="panel">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
</div>
|
||||
<input type="text" id="name" name="name" placeholder="昵称" class="layui-input">
|
||||
</div>
|
||||
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-login-qq"></i>
|
||||
</div>
|
||||
<input type="text" id="qq" name="qq" placeholder="QQ" class="layui-input">
|
||||
</div>
|
||||
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-email"></i>
|
||||
</div>
|
||||
<input type="text" id="email" name="email" placeholder="Email" class="layui-input">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-panel">
|
||||
<div style="padding: 32px;" class="panel">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
</div>
|
||||
<input type="text" placeholder="昵称" class="layui-input">
|
||||
<div class="wrap-head">
|
||||
<div class="head-logo">
|
||||
<img src="./static/img/留言.png" style="height: 20px;width: 20px;"/>
|
||||
</div>
|
||||
<div class="head-txt">
|
||||
<a class="title-txt"
|
||||
href="javascript:void(0)">言无有善恶也，苟有得乎吾心而言也，则其辞不索而获。</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-txt">
|
||||
<textarea name="content" id="content" rows="" cols="" class="main-area"></textarea>
|
||||
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-login-qq"></i>
|
||||
</div>
|
||||
<input type="text" placeholder="QQ" class="layui-input">
|
||||
</div>
|
||||
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-email"></i>
|
||||
</div>
|
||||
<input type="text" placeholder="Email" class="layui-input">
|
||||
<div class="warp-footer">
|
||||
<div class="warp-icon-cont">
|
||||
<ul>
|
||||
<li><img src="./static/img/发表情.png" alt=""/>
|
||||
<a href="javascript:void(0)">表情</a>
|
||||
</li>
|
||||
<li><img src="./static/img/图片_填充.png" alt=""/>
|
||||
<a href="javascript:void(0)">图片</a>
|
||||
</li>
|
||||
<li><img src="./static/img/视频_填充.png" alt=""/>
|
||||
<a href="javascript:void(0)">视频</a>
|
||||
</li>
|
||||
<li><img src="./static/img/话题选中.png" alt=""/>
|
||||
<a href="javascript:void(0)">话题</a>
|
||||
</li>
|
||||
<li><img src="./static/img/文章.png" alt=""/>
|
||||
<a href="javascript:void(0)">文章</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="warp-footer-btns">
|
||||
<div class="release-btn">
|
||||
<a href="javascript:publish()">发布</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-panel">
|
||||
<div class="wrap-head">
|
||||
<div class="head-logo">
|
||||
<img src="./static/img/留言.png" style="height: 20px;width: 20px;" />
|
||||
</div>
|
||||
<div class="head-txt">
|
||||
<a class="title-txt"
|
||||
href="javascript:void(0)">111111111111111111111111111 热门</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-txt">
|
||||
<textarea name="" rows="" cols="" class="main-area"></textarea>
|
||||
|
||||
</div>
|
||||
<div class="warp-footer">
|
||||
<div class="warp-icon-cont">
|
||||
<ul>
|
||||
<li><img src="./static/img/发表情.png" alt="" />
|
||||
<a href="javascript:void(0)">表情</a>
|
||||
</li>
|
||||
<li><img src="./static/img/图片_填充.png" alt="" />
|
||||
<a href="javascript:void(0)">图片</a>
|
||||
</li>
|
||||
<li><img src="./static/img/视频_填充.png" alt="" />
|
||||
<a href="javascript:void(0)">视频</a>
|
||||
</li>
|
||||
<li><img src="./static/img/话题选中.png" alt="" />
|
||||
<a href="javascript:void(0)">话题</a>
|
||||
</li>
|
||||
<li><img src="./static/img/文章.png" alt="" />
|
||||
<a href="javascript:void(0)">文章</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="warp-footer-btns">
|
||||
<div class="release-btn">
|
||||
<a href="javascript:void(0)">发布</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- 显示留言的主体 -->
|
||||
<c:forEach items="${list}" var="list" varStatus="i">
|
||||
<div class="show">
|
||||
<div class="show-content">
|
||||
<div class="show-name">
|
||||
<div class="avtors"><img src="./static/img/touxiang.png" alt="" style="width: 40px;height: 40px;border-radius: 50%;"></div>
|
||||
<span style="margin-left: 10px;font-size: 1rem;">Xx</span>
|
||||
</div>
|
||||
<div class="show-txt">
|
||||
<p class="">这是内容111111111111111111111111111111111111111111111111111111111</p>
|
||||
</div>
|
||||
<div class="show-time">2018年10月24日</div>
|
||||
<!-- <button type="button" class="layui-btn layui-btn-xs" lay-on="wrap">
|
||||
<i class="layui-icon layui-icon-release"></i> 回复
|
||||
</button> -->
|
||||
<div class="layui-panel">
|
||||
|
||||
<div class="comments">
|
||||
|
||||
<div class="comment-wrap">
|
||||
<div class="photo">
|
||||
<div class="avatar" style="background-image: url('./static/img/touxiang.png')"></div>
|
||||
</div>
|
||||
<div class="comment-block">
|
||||
<form action="">
|
||||
<textarea name="" id="" cols="30" rows="3" placeholder="Say somthing..." style="resize:none"></textarea>
|
||||
<button type="button" class="layui-btn layui-btn-xs">
|
||||
<i class="layui-icon layui-icon-release"></i> 回复
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="show-content">
|
||||
<div class="show-name">
|
||||
<div class="avtors"><img src="./static/img/touxiang.png" alt=""
|
||||
style="width: 40px;height: 40px;border-radius: 50%;"></div>
|
||||
<span style="margin-left: 10px;font-size: 1rem;">${list.nickName}</span>
|
||||
</div>
|
||||
|
||||
<div class="comment-wrap">
|
||||
<div class="photo">
|
||||
<div class="avatar" style="background-image: url('./static/img/touxiang.png')"></div>
|
||||
</div>
|
||||
<div class="comment-block">
|
||||
<p class="comment-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto temporibus iste nostrum dolorem natus recusandae incidunt voluptatum. Eligendi voluptatum ducimus architecto tempore, quaerat explicabo veniam fuga corporis totam reprehenderit
|
||||
quasi sapiente modi tempora at perspiciatis mollitia, dolores voluptate. Cumque, corrupti?</p>
|
||||
<div class="bottom-comment">
|
||||
<div class="comment-date">23.5 2014</div>
|
||||
<ul class="comment-actions">
|
||||
<li class="complain">Complain</li>
|
||||
<li class="reply">Reply</li>
|
||||
</ul>
|
||||
<div class="show-txt">
|
||||
<p class="">${list.content}</p>
|
||||
</div>
|
||||
<div class="show-time">${list.dateTime}</div>
|
||||
<!-- <button type="button" class="layui-btn layui-btn-xs" lay-on="wrap">
|
||||
<i class="layui-icon layui-icon-release"></i> 回复
|
||||
</button> -->
|
||||
<div class="layui-panel">
|
||||
<c:choose>
|
||||
<c:when test="${not empty list.replyContent && !(list.replyContent eq null)}">
|
||||
<div class="comment-wrap">
|
||||
<div class="photo">
|
||||
<div class="avatar" style="background-image: url('./static/img/头像修改.png')"></div>
|
||||
</div>
|
||||
<div class="comment-block">
|
||||
<p class="comment-text">${list.replyContent}</p>
|
||||
<div class="bottom-comment">
|
||||
<div class="comment-date">${list.replyDateTime}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comments">
|
||||
<div class="comment-wrap">
|
||||
<div class="photo">
|
||||
<div class="avatar" style="background-image: url('./static/img/头像修改.png')"></div>
|
||||
</div>
|
||||
<div class="comment-block">
|
||||
<form action="">
|
||||
<textarea name="" cols="30" rows="3" placeholder="Say somthing..."
|
||||
style="resize:none"></textarea>
|
||||
<button type="button" class="layui-btn layui-btn-xs">
|
||||
<i class="layui-icon layui-icon-release"></i> 回复
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</c:when>
|
||||
<c:otherwise>
|
||||
<div class="comments">
|
||||
<div class="comment-wrap">
|
||||
<div class="photo">
|
||||
<div class="avatar" style="background-image: url('./static/img/头像修改.png')"></div>
|
||||
</div>
|
||||
<div class="comment-block">
|
||||
<form action="">
|
||||
<textarea name="" id="" cols="30" rows="3" placeholder="Say somthing..."
|
||||
style="resize:none"></textarea>
|
||||
<button type="button" class="layui-btn layui-btn-xs">
|
||||
<i class="layui-icon layui-icon-release"></i> 回复
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</c:otherwise>
|
||||
</c:choose>
|
||||
<div class="show-close">x</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="show-close">x</div>
|
||||
</div>
|
||||
</div>
|
||||
</c:forEach>
|
||||
|
||||
|
||||
</div>
|
||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||
|
||||
<script>
|
||||
layui.use(function () {
|
||||
var $ = layui.$;
|
||||
var layer = layui.layer;
|
||||
var util = layui.util;
|
||||
var form = layui.form;
|
||||
|
||||
util.on('lay-on', {
|
||||
|
||||
'wrap': function () {
|
||||
layer.open({
|
||||
type: 1,
|
||||
resize: true,
|
||||
title: '发表留言',
|
||||
shade: false, // 不显示遮罩
|
||||
content: $('#warp'), // 捕获的元素
|
||||
end: function () {
|
||||
// layer.msg('关闭后的回调', {icon:6});
|
||||
}
|
||||
});
|
||||
},
|
||||
'admin': function () {
|
||||
layer.open({
|
||||
type: 1,
|
||||
area: '350px',
|
||||
resize: false,
|
||||
shadeClose: true,
|
||||
title: '管理员登录',
|
||||
content: $('#adminform'),
|
||||
},)
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
function publish() {
|
||||
var name = document.getElementById('name').value;
|
||||
var qq = document.getElementById('qq').value;
|
||||
var email = document.getElementById('email').value;
|
||||
var content = document.getElementById('content').value;
|
||||
console.log(name + qq + email + content);
|
||||
axios({
|
||||
// 请求方式
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8080${pageContext.request.contextPath}/publish',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
name: name,
|
||||
qq: qq,
|
||||
email: email,
|
||||
content: content
|
||||
}
|
||||
}).then(function (result) {
|
||||
//定位 span id 名称 error 修改
|
||||
console.log(result);
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
<script>
|
||||
layui.use(function () {
|
||||
var $ = layui.$;
|
||||
var layer = layui.layer;
|
||||
var util = layui.util;
|
||||
var form = layui.form;
|
||||
$(function () {
|
||||
// 还能输入的字得个数
|
||||
var able_count = 140;
|
||||
// 是否可以发布留言
|
||||
var release_able = false;
|
||||
// 右上角文字
|
||||
var $title_txt = $('.title-txt');
|
||||
// 留言框
|
||||
var $main_area = $('.main-area');
|
||||
// 发布按钮
|
||||
var $release_btn = $('.release-btn');
|
||||
|
||||
util.on('lay-on', {
|
||||
// 输入框获取焦点
|
||||
$main_area.focus(function () {
|
||||
console.log("获取焦点");
|
||||
$(this).parent().addClass('outline');
|
||||
$title_txt.addClass('title');
|
||||
if (able_count >= 0) {
|
||||
$title_txt.html("还可以输入" + able_count + "个字");
|
||||
} else {
|
||||
$title_txt.html("你以超出" + (-able_count) + "个字");
|
||||
}
|
||||
})
|
||||
|
||||
'wrap': function () {
|
||||
layer.open({
|
||||
type: 1,
|
||||
resize: true,
|
||||
title: '发表留言',
|
||||
shade: false, // 不显示遮罩
|
||||
content: $('#warp'), // 捕获的元素
|
||||
end: function () {
|
||||
// layer.msg('关闭后的回调', {icon:6});
|
||||
}
|
||||
});
|
||||
},
|
||||
'admin': function () {
|
||||
layer.open({
|
||||
type: 1,
|
||||
area: '350px',
|
||||
resize: false,
|
||||
shadeClose: true,
|
||||
title: '管理员登录',
|
||||
content: $('#adminform'),
|
||||
}, )
|
||||
}
|
||||
// 输入框失去焦点
|
||||
$main_area.blur(function () {
|
||||
console.log("失去焦点");
|
||||
$(this).parent().removeClass('outline');
|
||||
$title_txt.removeClass('title');
|
||||
$title_txt.html("言无有善恶也，苟有得乎吾心而言也，则其辞不索而获。");
|
||||
})
|
||||
|
||||
})
|
||||
// 输入框文本修改
|
||||
$main_area.on('input', function () {
|
||||
console.log("文本修改");
|
||||
// 剩余可输入的字个数
|
||||
able_count = 140 - $main_area.val().length;
|
||||
// console.log(able_count);
|
||||
// 根据可输入字的个数决定右上角文本的提示 与 是否能发布的状态
|
||||
if (able_count >= 0 && able_count <= 140) {
|
||||
$title_txt.html("还可以输入" + able_count + "个字");
|
||||
if (able_count != 140) {
|
||||
release_able = true;
|
||||
} else {
|
||||
release_able = false;
|
||||
}
|
||||
} else {
|
||||
$title_txt.html("你以超出" + (-able_count) + "个字");
|
||||
release_able = false;
|
||||
}
|
||||
// 根据发布状态决定发布按钮的样式
|
||||
if (release_able) {
|
||||
$release_btn.css({
|
||||
backgroundColor: "orange",
|
||||
borderColor: "orange"
|
||||
})
|
||||
} else {
|
||||
$release_btn.css({
|
||||
backgroundColor: "#ffc09f",
|
||||
borderColor: "#ffc09f"
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
// 发布事件
|
||||
// $release_btn.click(function () {
|
||||
// console.log("发布");
|
||||
// if (release_able) {
|
||||
// console.log('可以发布');
|
||||
// // 创建show对象的各个部位
|
||||
// var $showContent = $('<div class="show-content"></div>'),
|
||||
// $showName = $('<div class="show-name"></div>'),
|
||||
// $showTxt = $('<div class="show-txt"></div>'),
|
||||
// $showTime = $('<div class="show-time"></div>'),
|
||||
// $showClose = $('<div class="show-close"></div>'),
|
||||
// $showP = $('<p class=""></p>');
|
||||
//
|
||||
// var date = new Date();
|
||||
// // 设置，对象结构内内容
|
||||
// $showName.text("XxXx");
|
||||
// $showP.text($main_area.val());
|
||||
// $showTime.text(date);
|
||||
// $showClose.text("x");
|
||||
// // 添加进入主结构
|
||||
// $showTxt.append($showP);
|
||||
// $showContent.append($showName);
|
||||
// $showContent.append($showTxt);
|
||||
// $showContent.append($showTime);
|
||||
// $showContent.append($showClose);
|
||||
//
|
||||
// // 向所有匹配元素内部的开始处插入内容
|
||||
// $('.show').prepend($showContent);
|
||||
//
|
||||
// // 添加动画
|
||||
// // 位置从输入框处下移
|
||||
// $showContent.css({
|
||||
// top: '-150px'
|
||||
// })
|
||||
// $showContent.animate({
|
||||
// top: 0
|
||||
// }, 200)
|
||||
//
|
||||
// // 删除事件
|
||||
// $showClose.click(function () {
|
||||
// // 显示插入的索引位置
|
||||
// // console.log($(this).parent().index());
|
||||
// // console.log($showContent.index());
|
||||
//
|
||||
//
|
||||
// // 删除操作为顺便
|
||||
// // $showContent.remove();
|
||||
//
|
||||
// // 使用删除动画，创建效果
|
||||
// $showContent.animate({
|
||||
// height: 0
|
||||
// }, 200, function () {
|
||||
// // 动画结束后将自身从dom中移除
|
||||
// $showContent.remove();
|
||||
// })
|
||||
//
|
||||
//
|
||||
// })
|
||||
//
|
||||
// // 发布成功后收尾工作
|
||||
// $main_area.val(""); //输入框清空
|
||||
// able_count = 140; //输入框可输入内容数重置
|
||||
// release_able = false;
|
||||
// $release_btn.css({
|
||||
// backgroundColor: '#ffc09f',
|
||||
// borderColor: '#ffc09f'
|
||||
// }) //按钮点击事件重置
|
||||
//
|
||||
// }
|
||||
// })
|
||||
|
||||
|
||||
// 匿名函数包裹，防止外界操作的修改
|
||||
})
|
||||
|
||||
|
||||
|
||||
$(function () {
|
||||
// 还能输入的字得个数
|
||||
var able_count = 140;
|
||||
// 是否可以发布留言
|
||||
var release_able = false;
|
||||
// 右上角文字
|
||||
var $title_txt = $('.title-txt');
|
||||
// 留言框
|
||||
var $main_area = $('.main-area');
|
||||
// 发布按钮
|
||||
var $release_btn = $('.release-btn');
|
||||
|
||||
// 输入框获取焦点
|
||||
$main_area.focus(function () {
|
||||
console.log("获取焦点");
|
||||
$(this).parent().addClass('outline');
|
||||
$title_txt.addClass('title');
|
||||
if (able_count >= 0) {
|
||||
$title_txt.html("还可以输入" + able_count + "个字");
|
||||
} else {
|
||||
$title_txt.html("你以超出" + (-able_count) + "个字");
|
||||
}
|
||||
})
|
||||
|
||||
// 输入框失去焦点
|
||||
$main_area.blur(function () {
|
||||
console.log("失去焦点");
|
||||
$(this).parent().removeClass('outline');
|
||||
$title_txt.removeClass('title');
|
||||
$title_txt.html("111");
|
||||
})
|
||||
|
||||
// 输入框文本修改
|
||||
$main_area.on('input', function () {
|
||||
console.log("文本修改");
|
||||
// 剩余可输入的字个数
|
||||
able_count = 140 - $main_area.val().length;
|
||||
// console.log(able_count);
|
||||
// 根据可输入字的个数决定右上角文本的提示 与 是否能发布的状态
|
||||
if (able_count >= 0 && able_count <= 140) {
|
||||
$title_txt.html("还可以输入" + able_count + "个字");
|
||||
if (able_count != 140) {
|
||||
release_able = true;
|
||||
} else {
|
||||
release_able = false;
|
||||
}
|
||||
} else {
|
||||
$title_txt.html("你以超出" + (-able_count) + "个字");
|
||||
release_able = false;
|
||||
}
|
||||
// 根据发布状态决定发布按钮的样式
|
||||
if (release_able) {
|
||||
$release_btn.css({
|
||||
backgroundColor: "orange",
|
||||
borderColor: "orange"
|
||||
})
|
||||
} else {
|
||||
$release_btn.css({
|
||||
backgroundColor: "#ffc09f",
|
||||
borderColor: "#ffc09f"
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
// 发布事件
|
||||
$release_btn.click(function () {
|
||||
console.log("发布");
|
||||
if (release_able) {
|
||||
console.log('可以发布');
|
||||
// 创建show对象的各个部位
|
||||
var $showContent = $('<div class="show-content"></div>'),
|
||||
$showName = $('<div class="show-name"></div>'),
|
||||
$showTxt = $('<div class="show-txt"></div>'),
|
||||
$showTime = $('<div class="show-time"></div>'),
|
||||
$showClose = $('<div class="show-close"></div>'),
|
||||
$showP = $('<p class=""></p>');
|
||||
|
||||
var date = new Date();
|
||||
// 设置，对象结构内内容
|
||||
$showName.text("XxXx");
|
||||
$showP.text($main_area.val());
|
||||
$showTime.text(date);
|
||||
$showClose.text("x");
|
||||
// 添加进入主结构
|
||||
$showTxt.append($showP);
|
||||
$showContent.append($showName);
|
||||
$showContent.append($showTxt);
|
||||
$showContent.append($showTime);
|
||||
$showContent.append($showClose);
|
||||
|
||||
// 向所有匹配元素内部的开始处插入内容
|
||||
$('.show').prepend($showContent);
|
||||
|
||||
// 添加动画
|
||||
// 位置从输入框处下移
|
||||
$showContent.css({
|
||||
top: '-150px'
|
||||
})
|
||||
$showContent.animate({
|
||||
top: 0
|
||||
}, 200)
|
||||
|
||||
// 删除事件
|
||||
$showClose.click(function () {
|
||||
// 显示插入的索引位置
|
||||
// console.log($(this).parent().index());
|
||||
// console.log($showContent.index());
|
||||
</script>
|
||||
|
||||
|
||||
// 删除操作为顺便
|
||||
// $showContent.remove();
|
||||
|
||||
// 使用删除动画，创建效果
|
||||
$showContent.animate({
|
||||
height: 0
|
||||
}, 200, function () {
|
||||
// 动画结束后将自身从dom中移除
|
||||
$showContent.remove();
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
|
||||
// 发布成功后收尾工作
|
||||
$main_area.val(""); //输入框清空
|
||||
able_count = 140; //输入框可输入内容数重置
|
||||
release_able = false;
|
||||
$release_btn.css({
|
||||
backgroundColor: '#ffc09f',
|
||||
borderColor: '#ffc09f'
|
||||
}) //按钮点击事件重置
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -56,6 +56,7 @@ ul {
|
||||
.demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
|
||||
|
||||
|
||||
|
||||
/*最外层*/
|
||||
.wrap {
|
||||
width: 700px;
|
||||
@@ -74,7 +75,7 @@ ul {
|
||||
}
|
||||
|
||||
.head-logo {
|
||||
width: 40%;
|
||||
width: 20%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@@ -87,6 +88,7 @@ ul {
|
||||
padding: 4px 0;
|
||||
width: 60%;
|
||||
float: right;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.head-txt a {
|
||||
@@ -306,6 +308,8 @@ p {
|
||||
.photo {
|
||||
padding-top: 0.625rem;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
width: 3.5rem;
|
||||
}
|
||||
.photo .avatar {
|
||||
|
||||
BIN
web/static/img/头像修改.png
Normal file
BIN
web/static/img/头像修改.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Reference in New Issue
Block a user