一、网址
图灵网址：http://www.tuling123.com/
二、进入后注册，购买套餐，获取秘钥
三、代码
css代码【tuling.css】
* { padding: 0; margin: 0; } ::-webkit-scrollbar { display: none; } html, body { height: 100%; } .wrapper { 600px; height: 600PX; margin: 0 auto; background-color: rgba(100, 112, 154, 0.2); border-radius: 10px; } p { text-align: center; background-color: rgba(226, 190, 170, 0.8); height: 40px; line-height: 40px; font-size: 20px; color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px; } .content-box { overflow-y: auto; 100%; height: calc(100% - 90px) } .avitor { /*float:left;*/ 30px; height: 30px; border-radius: 50%; /*border: 1px solid black;*/ display: inline-block; } .mine { float: right; margin: 10px; calc(100% - 10px); } .robot { float: left; margin: 10px; calc(100% - 10px); } .mine .avitor { float: right; background-image: url("./4.png"); } .mine .text { float: right; background-color: rgba(112, 182, 163, 0.5); margin-right: 15px; position: relative; } .mine .text::after { content: ""; 0px; height: 0px; display: inline-block; position: absolute; right: -20px; top: 9px; border- 20px; border: 10px solid transparent; border-left-color: rgba(112, 182, 163, 0.5); } .robot .text { background-color: rgba(81, 173, 93, 0.5); margin-left: 15px; position: relative; } .robot .text::after { content: ""; 0px; height: 0px; display: inline-block; border: 10px solid transparent; border-right-color: rgba(81, 173, 93, 0.5); position: absolute; left: -20px; top: 9px; } .robot .avitor { background-image: url("./2.png"); } .mine .avitor, .robot .avitor { background-size: 100% 100%; vertical-align: top; } .text { max- 250px; border: 1px solid #ddd; display: inline-block; padding: 10px; border-radius: 10px; } .input-box { height: 50px; 100%; background-color: rgba(191, 155, 255, 0.5); line-height: 50px; text-align: center; } #inp { padding-left: 4px; font-size: 16px; 60%; height: 60%; border: 1px solid #ccc; border-radius: 6px; /*margin:10px auto;*/ } #submit { border-radius: 5px; font-size: 16px; padding: 3px 12px; margin: 0 5px; background-color: #FFFFFFFF; outline: none; border: none; font-weight: bolder; color: ##404040FF; box-shadow: 0px 1px 3px 1px #404040FF; transition: all 0.5 linear; } input::placeholder { color: #A0A0A0FF; font-size: 13px; } #submit:hover { transform: scale(1.1); box-shadow: 0px 3px 5px 1px #404040FF; }
js代码 【ajax.js】
1 function ajax(method, url, callback, data, flag) { 2 var xhr = null; 3 if (window.XMLHttpRequest) { 4 xhr = new XMLHttpRequest(); 5 } else { 6 xhr = new ActiveXObject('Microsoft.XMLHttp') 7 } 8 xhr.onreadystatechange = function() { 9 if (xhr.readyState == 4) { 10 if (xhr.status == 200) { 11 callback(xhr.responseText); 12 } else { 13 console.log('error'); 14 } 15 } 16 } 17 method = method.toUpperCase(); 18 if (method == 'GET') { 19 var date = new Date(), 20 timer = date.getTime(); 21 xhr.open(method, url + '?' + data + '&timer=' + timer, flag); 22 xhr.send(); 23 } else if (method == 'POST') { 24 xhr.open(method, url, flag); 25 xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 26 xhr.send(data); 27 } 28 }
html代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>智能机器人</title> 6 <link rel="stylesheet" href="css/tuling.css"> 7 </head> 8 <body> 9 <div class="wrapper"> 10 <p class="name">机器人客服</p> 11 <div class="content-box"> 12 <div class="robot"> 13 <div class="avitor"></div> 14 <div class="text">您好！请问有什么需要帮助？</div> 15 </div> 16 </div> 17 <div class="input-box"> 18 <input type="text" name="" id="inp" placeholder="你想说点啥~"> 19 <button type="" id="submit">发送</button> 20 </div> 21 </div> 22 <script src="./js/ajax.js"></script> 23 <script src="./js/jquery-3.6.0.min.js"></script> 24 <script> 25 //初始化方法 26 function init() { 27 bindEvent(); 28 } 29 30 //绑定事件 31 function bindEvent() { 32 33 $('#inp').keyup(function(e) { 34 if (e.keyCode == 13) { 35 $('#submit').trigger('click'); 36 } 37 }); 38 39 $('#submit').click(function(e) { 40 var val = $('#inp').val(); 41 if (val) { 42 addDom('mine', val); 43 getData(val); 44 $('#inp').val(''); 45 } 46 }) 47 } 48 49 // 文字添加到页面中去 50 function addDom(who, val) { 51 $(' <div class="' + who + '"> 52 <div class="avitor"></div> 53 <div class="text">' + val + '</div> 54 </div>').appendTo($('.content-box')); 55 var scrollHeight = $('.content-box')[0].scrollHeight; 56 var innerHeight = $('.content-box').innerHeight(); 57 $('.content-box').scrollTop(scrollHeight - innerHeight); 58 } 59 60 //获取数据 61 function getData(val) { 62 //key值为你购买的秘钥 63 var paras = "key=6a99ba9e46c94adaafe8c8dbd06f91b2&info=" + val; 64 ajax('POST', "http://www.tuling123.com/openapi/api", success, paras, true) 65 66 function success(data) { 67 // console.log(data) 68 da = eval("(" + data + ")") 69 addDom('robot', da.text); 70 } 71 72 } 73 init() 74 </script> 75 </body> 76 </html>
注意：一定要引用jq
四、项目截图
五、运行截图
六、总结
不推荐使用，不能发送语音，图片等信息，收费太贵，每月19.9，而且还要自己写皮肤，不值得，不推荐。
七、Demo链接
链接: https://pan.baidu.com/s/1pLNrP-7mcwrxQK4r1lLwHw 提取码: tqhn