浏览效果
html
<div class="box">
<div class="tab-title">
<div class="tab-title1 active">留言页</div>
<div class="tab-title2">留言板</div>
</div>
<div id="tab1" class="tab-box">
<ul id="messageList">
<li>
<!-- 头像 -->
<div class="user">
<div class="portrait">
<img src="images/wx.png" alt="" srcset="">
</div>
<span class="appellation">青竹</span>
<div class="relation">
<p>39231314@qq.com</p>
<p>123456789</p>
</div>
</div>
<div class="performance">
成绩JavaScript :<span class="grade">100</span>
</div>
<div class="substance">
<p class="title">留言:</p>
<p class="substance">生活中，若一个工具箱出现了，我们就不得不考虑它出现了的事实。 一般来说， 一般来说， 一个工具箱的发生，到底需要如何做到，不一个工具箱的发生</p>
</div>
<div>
<button>删除</button>
</div>
</li>
</ul>
</div>
<div id="tab2" class="tab-box" style="display: none;">
<form id="messageForm">
<label for="name">姓名:</label>
<input type="text" id="name" required><br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" required><br><br>
<label for="phone">电话:</label>
<input type="tel" id="phone" required><br><br>
<label for="message">留言:</label><br>
<textarea id="message" required></textarea><br><br>
<label for="course">课程成绩:</label>
<input type="number" id="course" required><br><br>
<button type="submit">提交留言</button>
</form>
</div>
</div>css
.box{
width: 700px;
border: 1px solid #000;
text-align: center;
margin: 100px auto;
}
.tab-title{
display: flex;
padding: 10px 0;
}
.tab-title>div{
width: 50%;
/* height: 20px; */
font-size: 25px;
/* background-color: aqua; */
margin: 0 10px;
}
.active{
background-color: aqua;
}
.tab-box li{
padding: 10px;
margin: 10px;
border: 1px solid #000;
}
.user{
height: 50px;
}
.portrait{
float: left;
}
.appellation{
float: left;
}
.relation{
float: right;
padding: 6px 5px;
font-size: 15px;
color: #ccc;
}
.appellation{
padding: 6px 5px;
font-size: 20px;
}
.performance{
padding: 10px 0;
}
.performance .grade{
color: #ff0000;
}
.title{
text-align: left;
margin: 5px;
}
.substance{
padding: 10px;
}
/* 留言版 */
.box form{
border: 1px solid #000;
margin: 10px;
padding: 10px;
/* text-align: center; */
}JavaScript
$(document).ready(function() {
// 定义一个全局数组，用于存储留言和成绩
var messages = [
{
"name": "张三",
"email": "39231314@qq.com",
"phone": "13829309741",
"message": "12345678911",
"course": 30
}
];
// 获取表单元素
var $form = $('#messageForm');
var $nameInput = $('#name');
var $emailInput = $('#email');
var $phoneInput = $('#phone');
var $messageInput = $('#message');
var $courseInput = $('#course');
var $messageList = $('#messageList');
// 添加提交留言事件监听器
$form.on('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
var name = $nameInput.val();
var email = $emailInput.val();
var phone = $phoneInput.val();
var message = $messageInput.val();
var course = parseFloat($courseInput.val());
// 校验邮箱格式
if (!isValidEmail(email)) {
alert('请输入有效的邮箱地址');
return;
}
// 校验电话号码格式
if (!isValidPhone(phone)) {
alert('请输入有效的电话号码');
return;
}
// 创建一个包含姓名、邮箱、电话、留言内容和课程成绩的对象
var newMessage = {
name: name,
email: email,
phone: phone,
message: message,
course: course
};
// 将新留言对象添加到留言数组中
messages.push(newMessage);
// 清空输入框
$nameInput.val('');
$emailInput.val('');
$phoneInput.val('');
$messageInput.val('');
$courseInput.val('');
// 更新留言列表
renderMessages();
});
// 渲染留言列表
function renderMessages() {
// 清空留言列表
$messageList.empty();
// 遍历留言数组，创建并添加留言项到列表中
for (var i = 0; i < messages.length; i++) {
var messageItem = $('<li>');
// 创建留言内容的元素，可以使用自定义的HTML结构和CSS样式
var messageContent = $('<div>')
.html(
`
<div class="user">
<div class="portrait">
<img src="images/wx.png" alt="" srcset="">
</div>
<span class="appellation">`+ messages[i].name+`</span>
<div class="relation">
<p>`+messages[i].email+`</p>
<p>`+messages[i].phone+`</p>
</div>
</div>
<div class="performance">
成绩JavaScript :<span class="grade">`+messages[i].course +`</span>
</div>
<div class="substance">
<p class="title">留言:</p>
<p class="substance">`+messages[i].message+`</p>
</div>
`
);
// 创建删除按钮
var deleteButton = $('<button>')
.addClass('delete-button')
.text('删除')
.attr('data-index', i)
.on('click', deleteMessage);
messageItem.append(messageContent, deleteButton);
$messageList.append(messageItem);
}
}
// 删除留言函数
function deleteMessage(event) {
var index = $(this).attr('data-index'); // 获取要删除的留言在数组中的索引
messages.splice(index, 1); // 从数组中删除该留言
renderMessages(); // 重新渲染留言列表
}
// 邮箱格式校验函数
function isValidEmail(email) {
// 使用正则表达式进行邮箱格式校验
var emailRegex = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/;
return emailRegex.test(email);
}
// 电话号码格式校验函数
function isValidPhone(phone) {
// 使用正则表达式进行电话号码格式校验
var phoneRegex = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
return phoneRegex.test(phone);
}
// 选项
$('.tab-title1').click(function() {
$('.tab-title2').removeClass('active');
$(this).addClass('active');
$('#tab2').hide()
$('#tab1').show()
renderMessages(messages);
console.log(messages);
});
$('.tab-title2').click(function(){
$('.tab-title1').removeClass('active');
$(this).addClass('active');
$('#tab1').hide()
$('#tab2').show()
})
renderMessages(messages);
});
评论 (0)