99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

本篇內(nèi)容主要講解“jQuery+HTML5實(shí)現(xiàn)聲音提示效果”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(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è)簡(jiǎn)易的WEB在線聊天應(yīng)用為背景，當(dāng)輸入完信息點(diǎn)“發(fā)送”按鈕后，信息將出現(xiàn)在聊天框中，并發(fā)出提示聲音。本例依賴jQuery，以及支持HTML5的audio技術(shù)，所以什么IE6,7,8可以洗洗先睡了。

HTML

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

• Hello Friends
• 你好，朋友！Helloweba.com歡迎你.

CSS

我們用簡(jiǎn)單的CSS來(lái)美化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)簽

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

$(function(){ $("#chatData").focus();//輸入框獲得焦點(diǎn) $('').appendTo('body');//載入聲音文件 $("#trig").click(function(){ var a = $("#chatData").val().trim();//獲取輸入的內(nèi)容 if(a.length > 0){ $("#chatData").val(''); //清空輸入框 $("#chatData").focus(); //獲得焦點(diǎn) $("

").html(''+a+'')            .appendTo("#chatMessages");//將輸入的內(nèi)容追加的聊天區(qū) $("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow");//調(diào)整滾動(dòng)條 $('#chatAudio')[0].play(); //播放聲音 } }); });

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

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

本文題目：jQuery+HTML5實(shí)現(xiàn)聲音提示效果-創(chuàng)新互聯(lián)
本文URL：http://ef60e0e.cn/article/hdhjc.html