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

創新互聯2013年至今，是專業互聯網技術服務公司，擁有項目成都網站建設、成都網站設計網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元漳縣做網站,已為上家服務,為漳縣各地企業和個人服務,聯系電話:18982081108

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

HTML

頁面主體是一個聊天框#chatBox，由上部分聊天內容區#chat和下部分內容輸入操作區組成，聊天內容以列表的形式展示在#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=" 發送 " 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標簽<audio>,通過source預加載聲音文件到頁面中。關于audio的相關知識，大家可以參照本站文章：使用HTML5的Audio標簽打造WEB音頻播放器

當用戶在輸入框中輸入完信息，點擊發送按鈕，信息將插入到聊天內容區，并調整聊天區滾動條高度，同時播放聲音，請看代碼及注釋。

$(function(){ $("#chatData").focus();//輸入框獲得焦點 $('<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();//獲取輸入的內容 if(a.length > 0){ $("#chatData").val(''); //清空輸入框 $("#chatData").focus(); //獲得焦點 $("<li></li>").html('<img src="qq.gif"/><span>'+a+'</span>')            .appendTo("#chatMessages");//將輸入的內容追加的聊天區 $("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow");//調整滾動條 $('#chatAudio')[0].play(); //播放聲音 } }); });

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

到此，相信大家對“jQuery+HTML5實現聲音提示效果”有了更深的了解，不妨來實際操作一番吧！這里是創新互聯建站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！

網站名稱：jQuery+HTML5實現聲音提示效果-創新互聯
網頁地址：http://vcdvsql.cn/article22/hdhjc.html

成都網站建設公司_創新互聯，為您提供Google、品牌網站建設、面包屑導航、網站設計、服務器托管、網站導航

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯