类WebOS（添加了主界面，及相关功能代码）
生活随笔
收集整理的這篇文章主要介紹了
类WebOS（添加了主界面，及相关功能代码）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
上個月為了練練手，加上本學期我有網站編程（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() + 1var 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="+" οnclick="inputToResult(this.value);"/><input type="button" id="minus" value="-" οnclick="inputToResult(this.value);"/><input type="button" id="multiply" value="*" οnclick="inputToResult(this.value);"/><input type="button" id="divide" value="/" οnclick="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>代碼還沒有時間作優化，而且還這個小作品還沒有完成，所以代碼可能比較難看。望見諒，希望大家多給意見哈
轉載請注明出處，謝謝！
轉載于:https://www.cnblogs.com/sharpCode/archive/2011/04/08/2010021.html
總結
以上是生活随笔為你收集整理的类WebOS（添加了主界面，及相关功能代码）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 保存web.config文件(转载)
- 下一篇： javascript基础拾遗——词法作用