<html>
<head>
<meta charset="UTF-8">
<title>两数区间求和</title>
<style type="text/css">
.resCls{
width: 100%
height: auto
border: solid 1px #ddd
word-break: break-all /* 允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行 */
word-wrap: break-word /* 允许英文单词内断句换行 */
box-shadow: 4px 6px 8px #ccc
}
input{
box-shadow: 2px 4px 6px #ccc
width: 80px
}
p{
text-shadow: 4px 3px 4px #678
}
</style>
<script src="jquery-1.8.3.min.js"></script>
</head>
<body>
<p>输入两个非负整数:</p>
<input type="text" id="tx0" value="0" />
<input type="text" id="tx1" value="130" />
<input type="button" value=" 求和 " onclick="getSum()"/>
<br><br>
<span id="sum0"></span>
<div id="sum"></div>
<script>
$(function(){
//0~9的keyCode: 主键区48~57 , keyup/keydown:数字小键盘96~105 , keypress:全同
$("#tx0").bind("keypress",function(e){
if(!(e.keyCode>47 && e.keyCode<58)){
return false
}
})
$("#tx1").bind("keypress",function(e){
if(!(e.keyCode>47 && e.keyCode<58)){
return false
}
})
})
function getSum(){
var int0=Number($("#tx0").val())
var int1=Number($("#tx1").val())
if(isNaN(int0)){ //如果为“非数值”
return
}
if(isNaN(int1)){
return
}
var sum=0
var process=""
if(int0<int1){
for(var i=int0i<=int1i++){
sum+=i
process+=i+"+"
}
}else{
for(var i=int1i<=int0i++){
sum+=i
process+=i+"+"
}
}
process=process.substring(0,process.lastIndexOf("+"))+" = "
$("#sum").text(process + sum).addClass("resCls")
}
</script>
</body>
</html>
首先我们用到的两个微信JS-SDK的独特接口:1、音频接口:
即通过js调用微信录音相关功能,包括录制、上传、播放,控制等。
2、智能接口:
所谓“智能”接口,目前只有一个“识别音频并返回识别结果接口”,即”声音转文字“。
我们的产品"语速达人”基本功能逻辑是这样的:
用户读出题词板文字,手机录音,实时识别用户的语速,在完成几秒钟测试后,计算出用户平均语速水平,与小伙伴们愉快的PK“打嘴仗“。
为了推广,希望基于Web做一个简单版的HTML5测试互动,用于微信传播。
很遗憾,这个功能在微信JS-SDK推出之前,是无法实现的:一方面JS调用设备录音功能受限,一方面通过JS进行实时语速识别的算法,性能会有问题,于是我们决定放弃了。
但是微信JS-SDk推出后,突然发现,这个测语速功能的实现一下变得非常简单。于是经过了简单的功能设计后,前端攻城师立即开干,与APP上线同步做出了一个”语速达人“网页版。
(1)Landing界面:
包括主视觉banner、挑战题目标题(摇一摇换一个题),以及一个”开始测试“按钮,
(2)开始测试:
点击开始测试后,会显示题词板。并在3秒倒计时后开始录音。
请注意!用户首次使用时,微信会在这里弹出提示“网页请求录音功能,是否允许”的提示,只有用户选择允许,录音接口才能正常调用。
(3)测试结果:
关键步骤来了!用户录音完成后,调用语音上传和智能识别接口,即可获得将语音转换后的文字。接口非常简单!
1、目前还没有用户在录音授权后的回调接口,JS无法掌握用户授权的情况,如果用户在第一次使用时,请求录音权限时点了”不允许“,功能就废了。
2、如果文字长的话,声音转文字还是比较慢的。
3、微信很大方,我们用到的几个接口都没有使用频次的限制。
4、JS-SDK的文档简单但是很有效,Token获取的逻辑刚开始读的时候有点晕晕的,读完了准备开始写后台程序时发现微信的工程师已经都准备好了,拿来改个Key直接就能用了。这里赞一下微信团队。
5、原本计划在每个语速挑战下面,显示一个已经挑战了的用户的列表,并放上他们挑战时的录音。这个功能在JS-SDK支持下也能实现,但是为了更好地呈现,需要微信服务号的权限,才能获取用户的头像和昵称。时间原因,没有做出这个功能。
6、吐槽一下:微信服务号300RMB/年,微信开放平台接入300RMB/年,帐号不互通,分开申请分开审核分开收钱~真心觉得鹅长有必要计较这点收入么。。。
PS:补充一个,
最近刚发现,有团队用语音接口做了”朋友圈发语音”的功能。
听起来很不错的功能,通过JS-SDK实现起来真是太容易了,我觉得也是精巧的使用典范吧。
设:公鸡的数量为 a = 20
母鸡的数量为 b = 33
小鸡的数量为 c = a - b
打印结果:
公鸡有4只
母鸡有18只
小鸡有78只
公鸡有8只
母鸡有11只
小鸡有81只
公鸡有12只
母鸡有4只
小鸡有84只