jQuery 的5星好评 + 留言板--模板

半冬_

已于 2023-12-15 10:10:53 修改

阅读量108

点赞数

文章标签： jquery 前端 javascript

于 2023-12-13 11:39:52 首次发布

本文链接：https://blog.csdn.net/m0_74771959/article/details/134968207

版权

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>