jQuery运行后的结果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>留言板</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body{
background-color:#f5f5f5;
}
.container{
max-width:500px;
margin:0 auto;
overflow-y:scroll;
height:400px;
overflow-x:hidden;
}
h4{
text-align:center;
}
form{
margin-bottom:20px;
}
input[type="text"],textarea{
width:100%;
padding:10px;
margin-bottom:10px;
}
.rating{
display:flex;
align-items:center;
}
.rating label{
margin-right:10px;
}
.message{
background-color:#f0f0f0;
padding:10px;
margin-bottom:10px;
display:flex;
justify-content:space-between;
}
.delete-button{
background-color:lightskyblue;
color:azure;
padding:5px 10px;
border:none;
cursor:pointer;
}
.star{
color:#ccc;
cursor:pointer;
}
.star.active{
color:gold;
}
.slideshow{
position:relative;
width:100%;
height:300px;
margin-bottom:20px;
}
.slideshow img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
}
.dots{
position:absolute;
bottom:10px;
left:50%;
transform:translateX(-50%);
}
.dot{
width:10px;
height:10px;
background-color:#bbb;
border-radius:50%;
margin:0 5px;
cursor:pointer;
}
.dot.active{
background-color:#555;
}
.button{
position:absolute;
top:50%;
transform:translateY(-50%);
width:30px;
height:30px;
background-color:rgba(0,0,0,0.5);
color:white;
border:none;
border-radius:50%;
font-size:16px;
line-height:30px;
text-align:center;
cursor:pointer;
}
.prev-button{
left:10px;
}
.next-button{
right:10px;
}
</style>
</head>
<body>
<div class="slideshow">
<button class="button prev-button"><i class="fas fa-chevron-left"></i></button>
<img src="h1.jpg" alt="Image1">
<img src="h2.webp" alt="Image2">
<img src="ht标.jpg" alt="Image3">
<button class="button next-button"><i class="fas fa-chevron-right"></i></button>
<div class="dots">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<header>
<div></div>
<a href="http://www.scavc.com/">航天官网</a>
</header>
<div class="container">
<h4>留言板</h4>
<div id="messageArea"></div>
<form id="messageForm">
<input type="text" id="name" placeholder="姓名" required>
<textarea id="content" placeholder="留言内容" required></textarea>
<div class="rating">
<label for="rating">评分:</label>
<span class="stars">
<i class="fas fa-star star" data-rating="1"></i>
<i class="fas fa-star star" data-rating="2"></i>
<i class="fas fa-star star" data-rating="3"></i>
<i class="fas fa-star star" data-rating="4"></i>
<i class="fas fa-star star" data-rating="5"></i>
</span>
<input type="hidden" id="rating" name="rating" value="0">
</div>
<input type="submit" value="提交">
</form>
<div id="messageList"></div>
</div>
<script>
$(function(){
$('.star').click(function(){
var rating = $(this).data('rating');
$('#rating').val(rating);
$(this).addClass('active');
$(this).prevAll('.star').addClass('active');
$(this).nextAll('.star').removeClass('active');
});
$('#messageForm').submit(function(event){
event.preventDefault();
var name = $('#name').val();
var content = $('#content').val();
var rating = $('#rating').val();
var messageElement = $('<div class="message"><p><strong>'+name+':</strong>'+content+'</p><p>评分:'+'<i class="fas fa-star"></i>'.repeat(rating)+'</p><button class="delete-button">删除</button></div>');
$('#messageList').append(messageElement);
$('#name').val('');
$('#content').val('');
$('#rating').val('0');
$('.star').removeClass('active');
});
$(document).on('click', '.delete-button', function(){
$(this).parent('.message').remove();
});
//Slideshow functionality
var slideIndex = 0;
var slides = $('.slideshow img');
var dots = $('.dot');
function showSlide(index){
slides.hide();
slides.eq(index).show();
dots.removeClass('active');
dots.eq(index).addClass('active');
}
dots.click(function(){
slideIndex = $(this).index();
showSlide(slideIndex);
});
$('.prev-button').click(function(){
slideIndex = (slideIndex - 1 + slides.length) % slides.length;
showSlide(slideIndex);
});
$('.next-button').click(function(){
slideIndex = (slideIndex + 1) % slides.length;
showSlide(slideIndex);
});
setInterval(function(){
slideIndex = (slideIndex + 1) % slides.length;
showSlide(slideIndex);
}, 2000);
});
</script>
</body>
</html>