jQuery+HTML5实现声音提示效果-创新互联
本篇内容主要讲解“jQuery+HTML5实现声音提示效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jQuery+HTML5实现声音提示效果”吧!
在本例中，我们基于一个简易的WEB在线聊天应用为背景，当输入完信息点“发送”按钮后，信息将出现在聊天框中，并发出提示声音。本例依赖jQuery，以及支持HTML5的audio技术，所以什么IE6,7,8可以洗洗先睡了。
HTML
页面主体是一个聊天框#chatBox，由上部分聊天内容区#chat和下部分内容输入操作区组成，聊天内容以列表的形式展示在#chatMessages中。
Hello Friends
你好，朋友！Helloweba.com欢迎你.
CSS
我们用简单的CSS来美化HTML。
#chatBox{width:400px;border:1px solid #d3d3d3;margin:50px auto;}
#chat {max-height:220px;overflow-y:auto;max-width:400px;}
#chat > ul > li{padding:3px;clear:both;padding:4px;margin:10px 0px 5px 0px;overflow:auto}
#chatMessages{list-style:none}
#chatMessages > li > img{width:35px;float:left}
#chatMessages > li > span{width:300px;float:left;margin-left:5px}
#chatData{padding:5px;margin:5px;border-radius:5px;border:1px solid #999;width:300px}
#trig {border: 1px solid #390; color:#fff; background: #360;-webkit-border-radius: 3px;
-moz-border-radius:3px;padding:5px 8px; cursor:pointer}
jQuery
首先需要载入声音文件，我们使用HTML5标签
当用户在输入框中输入完信息，点击发送按钮，信息将插入到聊天内容区，并调整聊天区滚动条高度，同时播放声音，请看代码及注释。
$(function(){
$("#chatData").focus();//输入框获得焦点
$('').appendTo('body');//载入声音文件
$("#trig").click(function(){
var a = $("#chatData").val().trim();//获取输入的内容
if(a.length > 0){
$("#chatData").val(''); //清空输入框
$("#chatData").focus(); //获得焦点
$("").html('
'+a+'')
.appendTo("#chatMessages");//将输入的内容追加的聊天区
$("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow");//调整滚动条
$('#chatAudio')[0].play(); //播放声音
}
});
});
最后提醒下，不要忘了在html中先载入jQuery库文件，这是很多同学问到的问题，再次提醒如果下载本站的文件后在本地运行看不到效果的，请先检查下jQuery库文件是否已经加载。
到此，相信大家对“jQuery+HTML5实现声音提示效果”有了更深的了解，不妨来实际操作一番吧！这里是创新互联建站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
分享标题：jQuery+HTML5实现声音提示效果-创新互联
标题路径：http://6mz.cn/article/hdhjc.html