<!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>發(fā) 送</button><span id="tip"></span><script type="text/javascript">$(document).ready(function(){ ??? ? $('button').click(function(){? ? ? ? if ($('#content').val() == '') {?? ? ? ? alert('發(fā)送不能為空！') ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? } ? ? ? ? ? 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('正在發(fā)送消息……');? ? $(this).css('background-color','red'); }); $('#tip').ajaxStop(function(){? ? $(this).html('發(fā)送消息成功！');? ? $(this).css('background-color','red'); }); ?})? ??</script></body></html>
添加回答
舉報
0/150
提交
取消