jQuery+HTML5實(shí)現(xiàn)聲音提示效果-創(chuàng)新互聯(lián)

本篇內(nèi)容主要講解“jQuery+HTML5實(shí)現(xiàn)聲音提示效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“jQuery+HTML5實(shí)現(xiàn)聲音提示效果”吧!

創(chuàng)新互聯(lián)2013年至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元漳縣做網(wǎng)站,已為上家服務(wù),為漳縣各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

在本例中，我們基于一個(gè)簡易的WEB在線聊天應(yīng)用為背景，當(dāng)輸入完信息點(diǎn)“發(fā)送”按鈕后，信息將出現(xiàn)在聊天框中，并發(fā)出提示聲音。本例依賴jQuery，以及支持HTML5的audio技術(shù)，所以什么IE6,7,8可以洗洗先睡了。

HTML

頁面主體是一個(gè)聊天框#chatBox，由上部分聊天內(nèi)容區(qū)#chat和下部分內(nèi)容輸入操作區(qū)組成，聊天內(nèi)容以列表的形式展示在#chatMessages中。

<p id="chatBox"> <p id="chat"> <ul id="chatMessages"> <li> <img src="user.gif"/><span>Hello Friends</span> </li> <li> <img src="user.gif"/><span>你好，朋友！Helloweba.com歡迎你.</span> </li> </ul> </p> <input type="text" id="chatData" placeholder="Message" /> <input type="button" value=" 發(fā)送 " id="trig" /> </p>

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標(biāo)簽<audio>,通過source預(yù)加載聲音文件到頁面中。關(guān)于audio的相關(guān)知識(shí)，大家可以參照本站文章：使用HTML5的Audio標(biāo)簽打造WEB音頻播放器

當(dāng)用戶在輸入框中輸入完信息，點(diǎn)擊發(fā)送按鈕，信息將插入到聊天內(nèi)容區(qū)，并調(diào)整聊天區(qū)滾動(dòng)條高度，同時(shí)播放聲音，請(qǐng)看代碼及注釋。

$(function(){ $("#chatData").focus();//輸入框獲得焦點(diǎn) $('<audio id="chatAudio"><source src="notify.ogg" type="audio/ogg">    <source src="notify.mp3" type="audio/mpeg"><source src="notify.wav" type="audio/wav">    </audio>').appendTo('body');//載入聲音文件 $("#trig").click(function(){ var a = $("#chatData").val().trim();//獲取輸入的內(nèi)容 if(a.length > 0){ $("#chatData").val(''); //清空輸入框 $("#chatData").focus(); //獲得焦點(diǎn) $("<li></li>").html('<img src="qq.gif"/><span>'+a+'</span>')            .appendTo("#chatMessages");//將輸入的內(nèi)容追加的聊天區(qū) $("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow");//調(diào)整滾動(dòng)條 $('#chatAudio')[0].play(); //播放聲音 } }); });

最后提醒下，不要忘了在html中先載入jQuery庫文件，這是很多同學(xué)問到的問題，再次提醒如果下載本站的文件后在本地運(yùn)行看不到效果的，請(qǐng)先檢查下jQuery庫文件是否已經(jīng)加載。

到此，相信大家對(duì)“jQuery+HTML5實(shí)現(xiàn)聲音提示效果”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)建站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

網(wǎng)站名稱：jQuery+HTML5實(shí)現(xiàn)聲音提示效果-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://bm7419.com/article22/hdhjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、品牌網(wǎng)站建設(shè)、面包屑導(dǎo)航、網(wǎng)站設(shè)計(jì)、服務(wù)器托管、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司