<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>实时语音翻译</title>
<style type="text/css">/*页面上的样式*/
*{/*通配符选择器 选择所有的标签*/
margin: 0;/*清除默认外边距*/
}
.content{/*类选择器 类名为content的元素 .+类名*/
display: flex;/*开启弹性盒子模型*/
flex-direction: column;/*改变主轴方向*/
/*内部元素主轴(纵向)方向排列方式(居中)*/
justify-content: space-around;
/*内部辅素主轴(横向)方向排列方式(居中)*/
align-items: center;
width: 900px;/*宽度 900*/
height: 500px;/*高度 500*/
margin: 100px auto;/*外边距 上下 左右(自动居中)*/
/*css3 盒子阴影 x位移 y位移 羽化与半径 颜色*/
box-shadow: 0 0 4px #222;
/*css3 圆角属性 左上 左下 右上 右下内角半径*/
border-radius: 8px;
}
.content textarea,.content p{
/*怪异和模型 盒子的尺寸保证为设置的尺寸*/
box-sizing: border-box;
width: 800px;
height: 200px;
padding: 8px;
font-size: 24px;
/*css3 圆角属性*/
border-radius: 8px;
}
.content textarea.input_box{
/*禁止缩放*/
resize: none;
/*聚焦框*/
outline: none;
box-shadow: 0 0 4px #f60;
}
.content p.show_box{
border: 1px solid #568;
box-shadow: 0 0 4px #568;
}
</style>
</head>
<body>
<div class="content">
<textarea class="input_box"></textarea>
<p class="show_box"></p>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
//声明一个变量 变量名称为oInput = 获取到的元素
var oInput=document.querySelector('.input_box');
var oShow=document.querySelector('.show_box');
//谁 在什么时候||触发了什么事件 谁做了什么事情
oInput.οnkeydοwn=function(){
//当前输入的内容
str=this.value;
console.log(str);
//展示框的内容=获取的输入文本
oShow.innerHTML=str;
}
//ajax连接翻译接口
$.ajax({
url:'http://route.showapi.com/32-9',
data:{
showapi_appid:'30603',
showapi_sign:'98960666afe4992ae9197ld13494090',
q:'我是海绵宝宝',
fromLanguage:'auto',
toLanguage:'auto'
},
success:function(res){
//翻译结果
var result=JSON.parse(res).showapi_res_body.translation[0];
}
})
</script>
</body>
</html>
实时语音翻译
最新推荐文章于 2024-06-10 23:05:23 发布