Ajax — 聊天机器人演示
生活随笔
收集整理的這篇文章主要介紹了
Ajax — 聊天机器人演示
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<body><div class="wrap"><!-- 頭部 Header 區域 --><div class="header"><h3>小思同學</h3><img src="img/person01.png" alt="icon" /></div><!-- 中間 聊天內容區域 --><div class="main"><ul class="talk_list" style="top: 0px;" id="talk_list"><!-- <li class="left_word"><img src="img/person01.png" /> <span>嗨，最近想我沒有？</span></li> --><!-- <li class="right_word"><img src="img/person02.png" /> <span>你好哦</span></li> --></ul><div class="drag_bar" style="display: none;"><div class="drager ui-draggable ui-draggable-handle" style="display: none; height: 412.628px;"></div></div></div><!-- 底部 消息編輯區域 --><div class="footer"><img src="img/person02.png" alt="icon" /><input type="text" placeholder="說的什么吧..." class="input_txt" id="ipt" /><input type="button" value="發 送" class="input_sub" id="btnSend" /></div></div><!-- 注意：只要為 audio 指定了新的 src 屬性，而且指定了 autoplay，那么，語音就會自動播放 --><audio src="" id="voice" autoplay style="display: none;"></audio>//已下是滾動條函數添加<script type="text/javascript" src="js/scroll.js"></script><!-- <script src="./js/chat.js"></script> -->
</body>
//重置文件<link rel="stylesheet" href="css/reset.css" />
//文本主體文件<link rel="stylesheet" href="css/main.css" />body {font-family: 'Microsoft YaHei';
}
.wrap {position: fixed;width: 450px;left: 50%;margin-left: -225px;top: 20px;bottom: 20px;border: 1px solid #ebebeb;background-color: #fff;border-radius: 10px;box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);overflow: hidden;
}
.header {height: 55px;background: linear-gradient(90deg, rgba(246, 60, 47, 0.6), rgba(128, 58, 242, 0.6));overflow: hidden;
}
.header h3 {color: #faf3fc;line-height: 55px;font-weight: normal;float: left;letter-spacing: 2px;margin-left: 25px;font-size: 18px;text-shadow: 0px 0px 5px #944846;
}
.header img {float: right;margin: 7px 25px 0 0;border-radius: 20px;box-shadow: 0 0 5px #f7f2fe;
}
.main {position: absolute;left: 0;right: 0;top: 55px;bottom: 55px;background-color: #f4f3f3;box-sizing: border-box;padding: 10px 0;overflow:hidden;
}
.talk_list{position: absolute;width:100%;left:0px;top:0px;
}
.talk_list li {overflow: hidden;margin: 20px 0px 30px;
}
.talk_list .left_word img {float: left;margin-left: 20px;
}
.talk_list .left_word span {float: left;background-color: #fe9697;padding: 10px 15px;max-width: 290px;border-radius: 12px;font-size: 16px;color: #fff;margin-left: 13px;position: relative;line-height: 24px;
}
.talk_list .left_word span:before {content: '';position: absolute;left: -8px;top: 3px;width: 13px;height: 12px;background: url('../img/corner01.png') no-repeat;
}
.talk_list .right_word img {float: right;margin-right: 20px;
}
.talk_list .right_word span {float: right;background-color: #fff;padding: 10px 15px;max-width: 290px;border-radius: 12px;font-size: 16px;color: #000;margin-right: 13px;position: relative;line-height: 24px;
}
.talk_list .right_word span:before {content: '';position: absolute;right: -8px;top: 3px;width: 13px;height: 12px;background: url('../img/corner02.png') no-repeat;
}
.drag_bar{position:absolute;right:0px;top:0px;background-color: #fff;height:100%;width:6px;box-sizing:border-box;border-bottom:1px solid #f4f3f3;
}
.drager{position:absolute;left:0px;top:0px;background-color: #cdcdcd;height:100px;width:6px;border-radius:3px;cursor: pointer;
}.footer{width:100%;height: 55px;left:0px;bottom:0px;background-color:#fff;position: absolute;
}.footer img{float: left;margin:8px 0 0 20px;
}.input_txt{float: left;width:270px;height:37px;border:0px;background-color: #f4f3f3;margin:9px 0 0 20px;border-radius:8px;padding:0px;outline:none;text-indent:15px;
}
.input_sub{float: left;width:70px;height:37px;border:0px;background-color: #fe9697;margin:9px 0 0 15px;border-radius:8px;padding:0px;outline:none;color:#fff;cursor: pointer;
}
以下引入文件請自行下載：<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script><script type="text/javascript" src="js/jquery-ui.min.js"></script><script type="text/javascript" src="js/jquery.mousewheel.js"></script>
//* http://jqueryui.com
//(http://brandon.aaron.sh)
$(function () {// 初始化右側滾動條// 這個方法定義在scroll.js中resetui()// 為發送按鈕綁定鼠標點擊事件$('#btnSend').on('click', function () {var text = $('#ipt').val().trim()if (text.length <= 0) {return $('#ipt').val('')}// 如果用戶輸入了聊天內容，則將聊天內容追加到頁面上顯示$('#talk_list').append('<li class="right_word"><img src="img/person02.png" /> <span>' + text + '</span></li>')$('#ipt').val('')// 重置滾動條的位置resetui()// 發起請求，獲取聊天內容getMsg(text)})// 獲取聊天機器人發送回來的消息function getMsg(text) {$.ajax({method: 'GET',url: 'http://www.liulongbin.top:3006/api/robot',data: {spoken: text},success: function (res) {// console.log(res)if (res.message === 'success') {// 接收聊天消息var msg = res.data.info.text$('#talk_list').append('<li class="left_word"><img src="img/person01.png" /> <span>' + msg + '</span></li>')// 重置滾動條的位置resetui()// 調用 getVoice 函數，把文本轉化為語音getVoice(msg)}}})}// 把文字轉化為語音進行播放function getVoice(text) {$.ajax({method: 'GET',url: 'http://www.liulongbin.top:3006/api/synthesize',data: {text: text},success: function (res) {// console.log(res)if (res.status === 200) {// 播放語音$('#voice').attr('src', res.voiceUrl)}}})}// 為文本框綁定 keyup 事件$('#ipt').on('keyup', function (e) {// console.log(e.keyCode)if (e.keyCode === 13) {// console.log('用戶彈起了回車鍵')$('#btnSend').click()}})
})
實現效果：
總結
以上是生活随笔為你收集整理的Ajax — 聊天机器人演示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Ajax — 评论列表
- 下一篇： Ajax — 第三天