Tạo đoạn chat chạy ngẫu nhiên bằng jquery

Khi các bạn vào web bán hàng nào đó, bạn thấy dưới cùng xuất hiện dòng chữ, có khàng hàng tên ABC mua hàng cách đây 30 phút ,,, và cứ liên tục như vậy.

Tạo đoạn chat chạy ngẫu nhiên bằng jquery trên web

Hôm nay mình hướng dẫn cách bạn cách làm nhé.



<!DOCTYPE html>

<html>

<head>

    <title>Tiêu đề</title>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <style>

        #floating-text {

            position: fixed;

            bottom: 20px;

            right: 20px;

            background-color: #f1f1f1;

            padding: 10px;

            border: 1px solid #ccc;

            border-radius: 5px;

            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

            display: none; /* Ban đầu ẩn đoạn văn bản */

        }

    </style>

</head>

<body>

  <h1 style="text-align:center;">WEB HỌC LẬP TRÌNH</h1>

  <h2 style="text-align:center;">LÀ TRANG WEB ĐÀO TẠO LẬP TRÌNH VIÊN THỰC CHIẾN</h2>

    <div id="floating-text"></div>



    <script>

        $(document).ready(function() {

            function chuoiNgauNhien()

            {

               // đoạn này nếu web bạn có API hãy lấy dữ liệu từ CSDL SQL Server nhé

               var replies = [

                    "Xin chào! Bạn cần giúp gì không?",

                    "Đó là một câu hỏi thú vị!",

                    "Mình không chắc lắm, bạn có thể giải thích thêm không?",

                    "Cảm ơn vì đã chia sẻ điều đó!",

                    "Hãy tiếp tục trò chuyện nhé!"

                ];

                return replies[Math.floor(Math.random() * replies.length)];

            }

         

            function hienThiTinNhan()

            {

              $("#floating-text").text("Bạn đã gửi: " + chuoiNgauNhien()).fadeIn();

                    // Tự động ẩn sau 3 giây

                    setTimeout(function() {

                        $("#floating-text").fadeOut();

                    }, 3000);



                    $("#user-input").val("");

            }

            animateNumber(1000, 1500, 110, function (number) {

                   hienThiTinNhan();

          })

           function animateNumber(finalNumber, delay, startNumber = 0, callback) {

              let currentNumber = startNumber

              const interval = window.setInterval(updateNumber, delay)

              function updateNumber() {

                if (currentNumber >= finalNumber) {

                  clearInterval(interval)

                } else {

                  currentNumber++

                }

                callback(currentNumber)

              }

            }//animateNumber

            

        }); //document

    </script>

</body>

</html>

Tạo đoạn chat chạy ngẫu nhiên bằng jquery