详细病情
(支持语音输入识别)
-
's
-
语音输入病情
.fill-case dl:last-child, .fill-text dl {
border-bottom: none;
}
.fill-text dl dt{
padding: 15px 0 10px;
font-size: 1.6rem;
}
.fill-text dl dt span {
color: #fe4847;
font-size: 1.2rem;
}
.fill-text dl dd {
position: relative;
}
.fill-text dl dd .tape {
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
height: 30px;
}
.fill-text dl dd .tape .hear {
width: 171px;
height: 24px;
margin-top: 6px;
display: none;
background: url(../images/bg/icon_doctor_yuyinshuru.png) center center no-repeat;
background-size: 100% 100%;
position: relative;
color: #fff;
font-size: 1.2rem;
line-height: 24px;
}
.fill-text dl dd .tape .hear b {
font-weight: 400;
padding-left: 30px;
}
.fill-text dl dd .tape .hear i {
width: 14px;
height: 14px;
display: inline-block;
background: url(../images/bg/icon_doctor_shangchuyuyin.png) center center no-repeat;
background-size: 100% 100%;
position: absolute;
right: -24px;
top: 5px;
}
.fill-text dl dd .tape .say {
width: 30px;
height: 30px;
float: right;
display: inline-block;
background: url(../images/bg/icon_doctor_shurubingq.png) center center no-repeat;
background-size: 100% 100%;
}
.fill-text dl dd textarea {
width: 100%;
height: 140px;
vertical-align: top;
border: 1px solid #dcdcdc;
border-radius: 2px;
padding: 10px 10px 50px;
line-height: 21px;
font-size: 1.4rem;
}
/* 录音弹窗 */
.sound-recording {
width: 150px;
height: 143px;
position: fixed;
top: 50%;
left: 50%;
padding: 20px;
margin-top: -71px;
margin-left: -75px;
background: rgba(0,0,0,.3);
border-radius: 5px;
display: none;
}
.sound-recording dl {
width: 100%;
font-size: 0;
}
.sound-recording dl i {
width: 50px;
height: 73px;
display: inline-block;
background: url(../images/bg/icon_home_speak.png) center center no-repeat;
background-size: 100% 100%;
}
.sound-recording dl dt {
width: 50%;
display: inline-block;
}
.sound-recording dl dd {
width: 50%;
display: inline-block;
padding-left: 10px;
text-align: right;
}
.sound-recording dl dd span {
max-width: 48px;
background: #fff;
display: block;
margin-top: 10px;
height: 2px;
border-radius: 2px;
}
.sound-recording p {
width: 100%;
text-align: center;
font-size: 1.2rem;
color: #fffefe;
padding-top: 15px;
}
//语音识别
var timeout = undefined; //定时器
var state = 0; //状态
var lastTime = null; //最后时间
var nowTime = null; //开始时间
$("#talk_btn").on("touchstart", function (event) {
lastTime = new Date().getTime(); //创建时间
event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动
//span的width随机变化
setInterval(function (){
$(".sound-recording dd span").each(function (){
$(this).width(48*Math.random() + 'px');
});
},200)
clearTimeout(timeout);
state = 0;
timeout = setTimeout(function() {
state = 1;
}, 1000);
$(".sound-recording").show();//显示录音
});
$("#talk_btn").on("touchend", function (event) {
event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动
$(".sound-recording").hide();//关闭录音
$("#hear").css("display","inline-block");
clearTimeout(timeout);
state = 0;
nowTime = new Date().getTime();
var timeLength = ((nowTime-lastTime)/1000).toFixed(1); //时间差
$("#hear b").text(timeLength);
});
$("#hear i").on("click", function (){
$(this).parent().hide();
})
模仿语音输入效果
最新推荐文章于 2022-11-09 09:46:21 发布