h5仿qq聊天页面 图灵机器人api接入
2024-12-25 13:48
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小听问答</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src=https://download.csdn.net/download/gyx1549624673/"js/mui.min.js"></script>
<link href=https://download.csdn.net/download/gyx1549624673/"css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
<link href=https://download.csdn.net/download/gyx1549624673/"css/chat.css" rel="stylesheet" />
</head>
<body >
<header class="mui-bar mui-bar-nav" id="back">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">小听问答</h1>
</header>
<div class="mui-content" >
<!--center start-->
<div class="center" >
</div>
<!--center end-->
<!--send start-->
<div class="send" style="margin-left: 2px;">
<div class="mui-input-row " style="width: 84%; display: inline-block; vertical-align: middle;">
<input id="sendContent" type="search" class="mui-input-clear mui-input-speech" placeholder="请输入~" style="background-color: white;">
</div>
<div class="bottom">
<button id="button">发送</button>
</div>
</div>
</div>
<script type="text/javascript" src=https://download.csdn.net/download/gyx1549624673/"js/jquery-1.10.2.min.js">
</script>
<script type="text/javascript">
$(function(){
var htmll = "<div class='left'><img src='https://download.csdn.net/download/gyx1549624673/img/xiaoting.jpg' width='50' height='50'><span class='msg'>小听知道很多民族乐器哦！来和我聊聊吧~</span></div>"
$(".center").append(htmll);
});
$("#button").click(function(){
var content = $("#sendContent").val();
var center = $(".center");
// alert(content);
var htmlr = "<div class='right'><span class='msg'>"+content+"</span><img src='https://download.csdn.net/download/gyx1549624673/img/job.jpg' width='50' height='50'></div>"
center.append(htmlr);
$("#sendContent").val("");
$.ajax({
type:"post",
url:"http://www.tuling123.com/openapi/api?key=d93d7645d9224b018feadff7269aa38f&info="+content,
success:function(result){
var obj = result;
var tmp = "<span>"+obj.text+"</span>"
if (obj.url) {
tmp+= "<a href='https://download.csdn.net/download/gyx1549624673/"+obj.url+"' target='_blank'>"+obj.text+"</a>"
}
var htmll = "<div class='left'><img src='https://download.csdn.net/download/gyx1549624673/img/xiaoting.jpg' width='50' height='50'><span class='msg'>"+tmp+"</span></div>"
center.append(htmll);
center.scrollTop(center[0].scrollHeight);
}
});
});
window.onkeydown=function(e){
var key = e.keyCode;
//alert(key);
if (key == 13) {
$("#button").click();
}
}