在部落格園中開通部落格已有一年多了，但至今未寫一篇技術文章與大家分享和交流，只將QQ空間中的日誌放了幾篇進來，究其原因，大致有以下幾點：1.比較忙(這點兒如果想寫，就可以擠出時間).2.想寫時，靜不下心，也感覺不知道該寫些什麼或從何處寫起——這大概就是程式設計師大多不善於表達，感覺寫文章比寫程式碼要費勁...,好了，言歸正傳，此文要說的'知易營養健康系統'是b/s架構，用.net開發的應用程式,這裡也只是說幾點值得做類似專案或功能時需注意、借鑑的地方。

圖1:

1. 如上圖是‘營養計算器’頁面，——看頁面(http://zhiyi2010.s242.iis3.com/calculator/calory.aspx

)就可以知道其大概的功能——主要包括：食物資訊檢索、新增食物到餐別中並分析所有餐別中食物各項營養素含量,整個頁面的功能程式碼量主要集中在jquery+Ajax的運用，js程式碼量大概在1000行左右(大家可能會問：這個頁面的功能有這麼複雜，需要寫這麼多的js程式碼嗎，——這個主要是我的實現方式的考慮所決定：想給使用者比較好的使用者體驗，快速響應，後臺只是做必要的資料處理),而且js程式碼還有待優化精簡,下面貼出的是 其中的一個核心方法，更多的應用 如：滑鼠點擊出彈出 新增/修改 食物重量框,jquey中一些方法的使用...

程式碼

1 function AddToCanBox(foodId,foodName,deHeat,isDefaultAdd,addWeight)

2 {
3 var can=GetHidCurrentCan();
4 var canValue=GetHidCanValue(can);
5 var tempArray=new Array();//食物項陣列
6 var foodProArray=new Array();//食物屬性陣列
7
8 var Weight_now=0;
9 var foodProStr="";
10 var isHased=false;//標識此食物是否已存在
11
12 var deWeight=100;
13 addWeight=GetZhengshu(addWeight);
14 addWeight=Round_number(addWeight);
15
16 if(canValue!=null && canValue!="")//如果已存在此餐類別的食物
17 {
18 foodItemArray=canValue.split("|");
19 var foodItem=new Array();
20 var findId=null;
21
22 for(var i in foodItemArray)
23 {
24 foodItem=foodItemArray[i];//得到是的：1,232,34,45...字串
25 if(foodItem!="" && foodItem!=null)
26 {
27 foodProArray=foodItem.split(",");
28 if(foodProArray!=null && foodProArray.length>0)
29 {
30 findId=foodProArray[0];//foodId
31
32 if(findId==foodId)//如果此食物已存在
33 {
34 Weight_now=foodProArray[3];//nowWeight
35 Weight_now=isDefaultAdd?(Number(Weight_now)+Number(deWeight)):(Number(Weight_now)+Number(addWeight));
36 Weight_now=Round_number(Weight_now);
37 foodProArray[3]=Weight_now;//修改其Weight_now
38 isHased=true;
39 }
40 foodProStr=foodProArray.join(",");
41 tempArray.push(foodProStr);//存放一個餐別下的食物資訊
42 }
43 }
44 }
45 }
46
47 foodProStr="";
48 if(!isHased)//新新增的
49 {
50 foodProArray=new Array();
51 foodProArray.push(foodId);
52 foodProArray.push(foodName);
53 foodProArray.push(deHeat);
54
55 Weight_now=isDefaultAdd?deWeight:(addWeight==0?deWeight:addWeight);
56 Weight_now=Round_number(Weight_now);
57 foodProArray.push(Weight_now);
58
59 foodProStr=foodProArray.join(",");
60 tempArray.push(foodProStr);//存放一個餐別下的食物資訊
61 }
62
63 DoAjax(tempArray,can,foodProStr,"");
64 }

2.滑動塊等效果的實現.

如上圖，具體實現js程式碼，這裡就不再貼出，需要的朋友可以直接下載參考使用:http://zhiyi2010.s242.iis3.com/calculator/energyloss.aspx

3.立體柱狀圖的實現,效果如下:

大家看圖片就可以知道使用效果還不錯，使用的是‘ FusionChart ’ flash 柱狀圖控制元件，其特點是：方便易用，且可以很好的使用ajax實現不同的條件顯示(後臺response

輸出xml），具體效果大家可以 登入網站 http://zhiyi2010.s242.iis3.com註冊會員後 在'營養足跡'裡看到，有需要 這方面應用或學習的朋友，可以加我QQ，互相學習和交流！

轉載於:https://blog.51cto.com/springsmile/1362786