<!DOCTYPE HTML><!DOCTYPE html><html><head> <title>简易留言板</title> <meta http-equiv="content-type" content="text/htm; charset=utf-8"/> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script><style type="text/css">body { font-size: 14px;}textarea { height: 50px; width: 400px; border: 1px solid #ccc; margin: 10px;}button { cursor: pointer; margin-left: 15%; width: 100px;}div { height: 100px; width: 400px; border: 1px solid #ccc; margin: 10px; cursor: text;}.time { font-size: 12px; color: #ccc;}#show { overflow-y: scroll;}p { line-height: 12px;}span { display: block; height: 40px; width: 400px;}</style></head><body><div id="show" type="text"/></div><textarea id="content" type="text"/></textarea><br/><button>发 送</button><span id="tip"></span><script type="text/javascript">$(document).ready(function(){ $('button').click(function(){ if ($('#content').val() == '') { alert('发送不能为空！') } else { var msg=$('#content').val(); var mydate = new Date(); var newMsg = '<p class="time">'+mydate.getMonth()+1+'月'+mydate.getDate()+'日'+mydate.getHours()+':'+mydate.getMinutes()+':'+mydate.getSeconds()+'</p><br/>'+msg; $.ajax({ url:'', data: newMsg, success: function(data) { $('#show').append(newMsg); $('#content').val('').focus(); } }) } }) $('#tip').ajaxStart(function(){ $(this).show().html('正在发送消息……'); $(this).css('background-color','red'); }); $('#tip').ajaxStop(function(){ $(this).html('发送消息成功！'); $(this).css('background-color','red'); }); }) </script></body></html>
添加回答
举报
0/150
提交
取消