上个月为了练练手，加上本学期我有网站编程（jsp相关的）这们课，而且老师要求说学期末做个网站的作品，语言和工具不限，所以我先选择了用vs2010，asp.net 相关的知识来做这个小东西，接下来先看看这小东西的相貌如何
主界面：
简洁计算器：
简单留言板，用了ajax无刷新留言（忘了说，除了最后一个功能【转到百度地图】外，其他任意功能都不会刷新页面，每点击一个功能按钮，其他出现的层自动隐藏）
留言前：
留言后：
JQuery自带的UI(不实用功能):
一个music插件的应用，这是参考着文档来做的：
这个用了百度地图的api，可是没深入(用到再深入吧)，例如公交路线等。。。。
又一不实用功能，只是嵌套了个flash进去：
大家有问题可以提一下，互相学习，(∩_∩)请各位高手给下意见，比如我还可以加一些什么功能。。我想在我的能力范围内再把这东西弄的更好，谢谢大家先了。
还有我会看看评论的反应，继续更新一些细节。谢谢。
ps：本着一通百通的原则，javascript，html，jquery，css等相关的技术在jsp上都是一样的，所以用jsp的知识我也做了一个小小的留言板，后面也会发上来交流下。
主界面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WebOS</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/start/jquery-ui-1.8.9.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.5.1.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".loading").show("slow");
</script>
<script type="text/javascript">
//: 判断网页是否加载完成
document.onreadystatechange = function () {
if (document.readyState == "complete") {
$(".loading").hide("slow");
}
};
$(function () { // 放置所有初始化事件
$("#taskbar img").mouseenter(function () {
$(this).animate({ width: "120px", height: "120px" }, 500);
}).mouseout(function () {
$(this).animate({ width: "100px", height: "100px" }, 500);
});
$("#addMsg").button();
$("#addMsg").click(function () {
$(".loading").show("slow");
var nickName = $("#nickName").val();
var Msg = $("#commentMsg").val();
var d = new Date()
var day = d.getDate()
var month = d.getMonth() + 1
var year = d.getFullYear()
var dateString = year + "/" + month + "/" + day;
$.post("AddMsg.ashx", { "nickName": nickName, "Msg": Msg }, function (returnData, status) {
if (status == "success" && returnData == "success") {
var li = $("<li>" + dateString + "--" + nickName + "说：" + Msg + "</li>");
$("#msgUl").append(li).append("<li>------------------------------------------------------</li>");
}
});
$(".loading").hide("slow");
});
$("#clear").button();
$("#clear").click(function () {
$("#commentMsg").val("");
});
$("#Msg").click(function () {
$(".loading").show("slow");
$("#calculat").dialog("destroy");
$("#content>div").hide("slow"); //content 下一层的div都隐藏
$("#MsgCom").show("slow");
$.post("GetMsg.ashx", function (returnData, status) {
if (status == "success") {
var Msgs = $.parseJSON(returnData);
$("#content ul").empty(); //移除当前ul
for (var i = 0; i < Msgs.length; i++) {
var li = $("<li>" + Msgs[i].Time + "--" + Msgs[i].NickName + "说：" + Msgs[i].Msg + "</li>");
$("#msgUl").append(li).append("<li>------------------------------------------------------</li>");
}
$(".loading").hide("slow");
}
});
});
$("#calculator").click(function () {
$("#content ul").empty();
$("#content>div").hide("slow"); //content 下一层的div都隐藏
$("#calculat").dialog({ width: 287, height: 270, show: 'fade' });
});
$("#showDate").click(function () {
$("#content ul").empty();
$("#calculat").dialog("destroy"); //dialog要这样才能不显示，不能用hide
$("#content>div").hide("slow"); //content 下一层的div都隐藏
$("#date").datepicker().show("slow");
});
$("#Pic").click(function () {
$("#content ul").empty();
$("#calculat").dialog("destroy"); //dialog要这样才能不显示，不能用hide
$("#content>div").hide("slow"); //content 下一层的div都隐藏
$("#PicDiv").show("slow");
});
$("#music").click(function () {
$("#content ul").empty();
$("#calculat").dialog("destroy"); //dialog要这样才能不显示，不能用hide
$("#content>div").hide("slow"); //content 下一层的div都隐藏
$("#musicDiv").show("slow");
});
//转到百度地图
$("#map").click(function () {
document.location = "./Map.htm";
});
});
//实现计算器
var equalbefore = false;
$(function () { //初始化 计算器按钮的 onclick事件
$("#number input").click(function () { //数字按钮的事件
if (equalbefore) {
$("#result").val("");
equalbefore = false;
}
inputToResult(this.value);
});
$("#reset").click(function () { // 按钮复位键C
$("#result").val("");
});
$("#equal").click(function () {
$("#lastRes").val(eval($("#result").val()));
equalbefore = true;
});
});
function inputToResult(data) { //显示到input框，字符串连接
var pre = $("#result").val();
var res = pre + data;
$("#result").val(res);
}
// End 实现计算器
</script>
</head>
<body>
<div id="page">
<div class="loading" ><img src="images/loading.gif" /></div>
<!-- JiaThis Button BEGIN -->
<script type="text/javascript" src="http://v1.jiathis.com/code/jiathis_r.js?btn=r1.gif" charset="utf-8"></script>
<!-- JiaThis Button END -->
<div class="background" id="background">
<script charset="utf-8" type="text/javascript" id="TOOL_115_COM_JS" src="http://tool.115.com/static/tools/weather/tool_weather_api_text.js"></script>
<div class="content" id="content">
<div id="musicDiv" style="display:none;">
<object type="application/x-shockwave-flash" data="swf/dewplayer-playlist.swf" width="240" height="200" id="dewplayer" name="dewplayer">
<param name="wmode" value="transparent" />
<param name="movie" value="swf/dewplayer-playlist.swf" />
<param name="flashvars" value="showtime=true&autoreplay=true&xml=mp3/playlist.xml" />
</object>
</div>
<div id="PicDiv" style="display:none">
<script type="text/javascript">
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9.0.0.0"width=" 720" height="540" ID="sf" VIEWASTEXT>');
document.write(' <param name="movie" value="images/picshow.swf" />');
document.write(' <param name="quality" value="high" />');
document.write(' <param name="wmode" value="window" />');
document.write(' <param name="allowScriptAccess" value="always" />');
document.write(' <param name="allowFullScreen" value="True" />');
document.write(' <embed src="images/picshow.swf" quality="high" name="sf" allowScriptAccess="always" allowFullScreen="true" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="720" height="520"></embed>');
document.write('</object>');
</script>
</div>
<div id="MsgCom"style="display:none">
<div id="msg" ><ul id="msgUl"></ul></div>
<div id="comment">
<div id="tabCom">
<table >
<tr><td>昵称:</td><td><input type="text" id="nickName" /></td></tr>
<tr><td>留言内容:</td><td><textarea id="commentMsg" rows="10" cols="35"></textarea></td></tr>
<tr><td><button id="addMsg">留言</button></td><td><button id="clear">清空</button></td></tr>
</table>
</div>
</div>
</div>
<div id="date" style="display:none"></div>
<div id="calculat" title="简易计算器1.0" style="display:none" >
<div id="showResult"><input type="text" id="result"/><input type="text" id="lastRes"/></div>
<div id="number"><input type="button" id="number1" value="1"/><input type="button" id="number2" value="2" /><input type="button" id="number3" value="3" /><input type="button" id="number4" value="4" /><input type="button" id="number5" value="5" /><input type="button" id="number6" value="6" /><input type="button" id="number7" value="7" /><input type="button" id="number8" value="8" /><input type="button" id="number9" value="9" /><input type="button" id="number0" value="0" style="width:100px;" /><input type="button" id="dot" value="." /></div>
<div id="operation"><input type="button" id="add" value="+" onclick="inputToResult(this.value);"/><input type="button" id="minus" value="-" onclick="inputToResult(this.value);"/><input type="button" id="multiply" value="*" onclick="inputToResult(this.value);"/><input type="button" id="divide" value="/" onclick="inputToResult(this.value);"/><input type="button" id="reset" value="C" /><input type="button" id="equal" value="=" /></div>
</div>
</div>
<div id="taskbar">
<div class="center"><img id="Pic" src="images/Pic.png" alt="图片"/><img id="calculator" src="images/calculator.png" alt="计算器" /><img id="Msg" src="images/Msg.png" alt="留言板" /><img id="music" src="images/Music.png" alt="音乐"/><img id="showDate" src="images/Date.png" alt="日期" /><img id="map" src="images/Map.png" alt="地图" /></div>
</div>
</div>
</div>
</body>
</html>
代码还没有时间作优化，而且还这个小作品还没有完成，所以代码可能比较难看。望见谅，希望大家多给意见哈
转载请注明出处，谢谢！
浙公网安备 33010602011771号