实时语音翻译

<!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.onkeydown=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>
猜你喜欢
