.net"立体柱状图、滑动块等效果实现" 知易营养健康系统——开发总结

      

              在博客园中开通博客已有一年多了，但至今未写一篇技术文章与大家分享和交流，只将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