<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<style type="text/css">
* { margin: 0; padding: 0; }
#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; }
</style>
<script type="text/javascript">
$(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(); //播放声音
}
});
});
</script>
</head>
<body>
<div id="chatBox">
<div 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>
</div>
<input type="text" id="chatData" placeholder="Message" />
<input type="button" value=" 发送 " id="trig" />
</div>
</body>
</html>
时间： 2024-08-29 09:28:53