本文實例為大家分享了jquery實現聊天機器人的具體代碼，供大家參考，具體內容如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./demo.css" rel="external nofollow" ></head><body> <div class="wrapper"> <h4 class="header">俊凱</h4> <div class="content"> <div class="mine"> <img src="./image/5.jpg" alt=""> <div class="text"> 今天天氣怎么樣 </div> </div> <div class="robot"> <img src="./image/5.jpg" alt=""> <div class="text"> 天氣很好呀適合出門呢~~ </div> </div> </div> <div class="inp"> <input type="text" id="word"> <button id="submit">發送</button> </div> </div> <script src="./jquery.js"></script> <script src="./demo.js"></script> <script> </script> </body></html>
CSS:
* { padding: 0; margin: 0;}::-webkit-scrollbar { width: 0px;}html, body { height: 100%;}.wrapper { width: 600px; margin: 0 auto; border: 1px solid #eee; height: 100%; position: relative; background-color: #eee; /* overflow: hidden; */}.wrapper .content { /* overflow-x: hidden; overflow-y: scroll; */ overflow: auto; height: calc(100% - 110px); line-height: 30px; padding: 10px;}.wrapper .header { background-color: grey; text-align: center; color: #fff; height: 40px; line-height: 40px; font-weight: 700;}.wrapper .content .mine { float: right; width: 400px;}.wrapper .content .robot { float: left; width: 400px;}.wrapper .content img { width: 30px; height: 30px; border-radius: 50%; vertical-align: middle;}.content .mine img { float: right;}.content .mine .text { float: right; background-color: greenyellow;}.content .robot img { float: left;}.content .robot .text { float: left; background-color: #fff;}.text { max-width: 250px; font-size: 16px; padding: 0 10px; border-radius: 3px; /* border: 1px solid #fff; */}.inp { width: 100%; height: 50px; line-height: 50px; position: absolute; bottom: 0px; font-size: 0; text-align: center; /* padding: 0 10px; */ background-color: #ddd; /* vertical-align: middle; */}.inp input { width: calc(100% - 80px); height: 30px; line-height: 30px; border: none; outline: none; font-size: 14px; display: inline-block; vertical-align: middle;}.inp button { width: 60px; height: 30px; font-size: 14px; border: none; outline: none; background-color: #ccc; display: inline-block; vertical-align: middle; cursor: pointer;}
新聞熱點
疑難解答
圖片精選
