资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

jQuery+HTML5实现声音提示效果-创新互联

本篇内容主要讲解“jQuery+HTML5实现声音提示效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jQuery+HTML5实现声音提示效果”吧!

创新互联2013年至今,是专业互联网技术服务公司,拥有项目成都网站建设、成都网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元漳县做网站,已为上家服务,为漳县各地企业和个人服务,联系电话:18982081108

在本例中,我们基于一个简易的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实现声音提示效果-创新互联
    URL分享:http://cdkjz.cn/article/hdhjc.html
    多年建站经验

    多一份参考,总有益处

    联系快上网,免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈,可以通过以下方式与我们联系

    大客户专线   成都:13518219792   座机:028-86922220