html5载入提示音,html5新消息提示声音

【实例简介】

【实例截图】

【核心代码】

HTML5手机声音提示

#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}

#trig2 {padding: 4px;border: solid 1px #666;background-color: #133783;color:#fff;

font-weight:bold; cursor:pointer}

#trig {border: 1px solid #390; color:#fff; background: #360;-webkit-border-radius: 3px;

-moz-border-radius:3px;padding:5px 8px; cursor:pointer}

教程：HTML5声音提示

• Hello Friends

• 你好，朋友！手册网shouce.ren欢迎你.

$(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();

}

});

});