作品目的： 作品描述： 主要代碼及技術：
點擊首頁，顯示列表，用ajax的load方法
點擊日記本，開啟日記本菜單
點擊寫日記，進入寫日記介面，能用Ie儲存到本地
點擊看日記，Ie中會在看日記下方顯示日記串連
點擊關於我，開啟關於我菜單
點擊自我介紹，會用表格方式顯示本人基本資料，同時，表格的右側是可編輯的
點擊我的相簿，會有jquery外掛程式的投影片方式顯示顯示本人最近的旅遊照片
首頁html代碼:<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link type="text/css" rel="stylesheet" href="css/mData.css"/><link rel="stylesheet" href="css/jQuery.css" type="text/css" media="screen" charset="utf-8"><script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript" src="js/mData.js"></script><script src="js/jquery-image-scale-carousel.js" type="text/javascript" charset="utf-8"></script><script> //載入日記列表，只能用Iefunction searchFiles(){ var fso = new ActiveXObject("Scripting.FileSystemObject"); var f = fso.GetFolder(document.all.fixfolder.value); var fc = new Enumerator(f.files); var s = ""; var node=""; for (; !fc.atEnd(); fc.moveNext()) { node=fc.item()+"";if(node.match("2013年+")){s +="<a target='_blank' href="+node+">" +node+"</a>"; //s += "<br/>"; } } fk = new Enumerator(f.SubFolders); for (; !fk.atEnd(); fk.moveNext()) { node=fc.item()+"";if(node.match("2013年+")){s +="<a target='_blank' href="+node+">" +node+"</a>"; //s += "<br/>"; } } textarea.innerHTML = s } </script> <title>日記本</title></head><body><div id="head"></div><div id="content"><div id="left"><ul><li class="main"><a href="#" class="fistPage">首頁</a><ul class="hmain"><li ><a href="#">初始狀態</a></li></ul></li><li class="main"><a href="#">日記本</a><ul class="hmain"> <li ><a href="#" class="write">寫日記</a></li><li ><input style="display:none" type="text" name="fixfolder" value ="K:\test1"> <a href="#" class="read" onclick="searchFiles()">看日記</a></li> <li> <div id = "textarea"> </div> </li></ul></li><li class="main"><a href="#">關於我</a><ul class="hmain"><li ><a href="#" class="inturduse">自我介紹</a></li> <li ><a href="#" class="photo">我的相簿</a></li></ul></li><li class="main"><a href="#">聯絡我</a><ul class="hmain"><li ><a href="#">初始狀態</a></li></ul></li> <li >我的連結<ul class="ha"><li ><a href="http://www.sina.com">新浪</a></li><li ><a href="http://wwww.baidu.com">百度</a></li></ul></li></ul></div> <div id="show"> </div></div><div id="root">copyright2010 my</div></body></html>
/* CSS Document */body,div,li{margin:0px;padding:0px;}body{background-image:url(../images/background.gif);background-repeat:repeat-y;background-position:center top;}#head{width:700px;height:90px;margin:0px auto 0px;background-image:url(../images/header.jpg);}#left{width:160px;background:#D3D8C4;margin-left:5px;float:left;}#content{width:700px;margin:0px auto 0px;}#right{width:535px;margin:0px auto 0px;background:#E5E7E1;float:right;}#root{width:690px;height:50px;clear:both;background:#717F51;margin:0px auto 00px;border-top:5px solid #F9F9F9;text-align:center;font-size:10px;color:#FFF;}ul,li{list-style-type:none;width:160px;padding:0px;text-indent:1em;}.main a{ background-image:url(../images/bg_navbutton.gif);}a{display:block;text-decoration:none;color:#00CC99;}.hmain a,.ha a{background:#D3D8C4;background-image:url(../images/bullet_extlink.gif);background-repeat:no-repeat;background-position:10px center;}.hmain{display:none;}p{text-indent:2em;font-size:12px;}#mimage{float:right;}#mimage img{border:10px solid #FFF;}.wirteData{width:350px;margin:0px auto 0px;}.textarea{width:350px;height:400px;}.myself{border-collapse:collapse;width:500px;;margin:0px auto 200px;}table{border-collapse:collapse;width:100%;height:100%;}tbody th{background-color:#3CC;}tbody td{padding:0px;width:50%;}#photo_container {width: 480px;height: 800px;margin:0px auto 20px;background-color: #000;}
// JavaScript Documentvar $firstPage;var fileId=1;var fileNameId;$(document).ready(function(){loadA();$(".main > a").click(function()//.main 下邊的直接子類，a的兄弟節點ul，使用slideToggle函數，同時改變表徵圖{var ulNode=$(this).next("ul");ulNode.slideToggle();changeIcon($(this));});$(".hmain a").click(function()//a更換顏色{$(this).css("color","#CC0000");});$(".write").click(function()//點擊寫日記{$firstPage=$("#right");//用以在右邊的show中顯示$("div").remove("#right");$("#show").load("a.html",function(){$("#sub").click(function(){save_record() ;$("#show").empty();$("#show").load(fileNameId);$("#count_container").remove();});});return false;});$(".fistPage").click(function(){$("#show").empty();loadA();$("#count_container").remove();});$(".inturduse").click(function(){$("#show").empty().load("myself.html",function(){editTable();});$("#count_container").remove();});$(".photo").click(function(){$("#show").empty().load("showPhoto.html",function(){$("#show").empty().append($(" <div id='photo_container'></div>"));var carousel_images = ["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg","images/06.jpg","images/07.jpg"];$("#photo_container").isc({imgArray: carousel_images,autoplay: true,autoplayTimer: 4000 // 4 seconds.});});})});function loadA()//{$("#show").load("mainPage.html",function()//利用ajax的load方法載入mainPage{var $p=$("p");//p標籤隱藏$p.hide()//p標籤淡出$p.fadeIn("slow");//滑鼠放到p上或者從p上離開變換背景色$p.hover( function () { //$(this).animate({fontSize:'18px'},"fast"); $(this).css("background","#9F6") }, function () { // $(this).animate({fontSize:'12px'},"fast"); $(this).css("background","#E5E7E1"); });});}function changeIcon(mainNode) {//檢測變換表徵圖if (mainNode) {if (mainNode.css("background-image").indexOf("bg_navbutton.gif") >= 0) {mainNode.css("background-image","url('images/bg_navbutton_over.gif')");mainNode.css("color","#CC0000");} else {mainNode.css("background-image","url('images/bg_navbutton.gif')");mainNode.css("color","#00CC99");}}}//儲存聊天記錄到本地 function save_record() { //取得當前日期作為檔案名稱 fileId++;var time=new Date(); var filename=time.toLocaleDateString(); //擷取當前頁面部分內容 var record=$(".textarea").html(); //開啟新視窗儲存 var winRecord=window.open('about:blank','_blank','top=500'); winRecord.document.open("text/html","utf-8"); winRecord.document.write("<div class='writedate'><pre>"+record+"</pre></div>"); fileNameId=filename+fileId+".html";winRecord.document.execCommand("SaveAs", true, fileNameId); winRecord.close(); }function editTable(){$("tbody tr:odd").css("background-color","#FF9");//隔行顯示背景顏色var tableTd=$("tbody td:odd");tableTd.click(function(){var tdobj=$(this);if(tdobj.hasClass("me"))return false;if(tdobj.children("input").length>0)//防止事件冒泡{return false;}var text=tdobj.html();tdobj.html("");//把文字框設定成tdvar inputobj=$("<input type='text'/>").css("border-width","0").css("background-color",tdobj.css("background-color")).css("font-size","15px").width(tdobj.width()).val(text).appendTo(tdobj);inputobj.trigger("focus").trigger("select");inputobj.click(function(){return false;});//按enter鍵儲存資料，esc鍵返回原始文本inputobj.keyup(function(event){var keycode=event.which;if(keycode==13){tdobj.html($(this).val())}if(keycode==27){tdobj.html(text);}});})}
寫日記： 看日記：
自我介紹：
我的相簿：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
