在电商网站中，有时候通过进度条来直观地显示用户是否到期以及用户当前的状态。

设计这样的一个Model。

    public class User



    {



        public int Id { get; set; }



        public string Name { get; set; }



        public int CoopTime { get; set; }



        public DateTime JoinTime { get; set; }



    }

以上，合作时长属性CoopTime，和加入时间属性JoinTime是和进度密切相关的2个属性。

在HomeController中，一个action方法用来显示界面，一个用来接收来自视图的GET请求，返回json数据。

        public ActionResult Index()



        {



            return View();



        }





        public ActionResult GetStatus()



        {



            User user = new User()



            {



                Id = 1,



                Name = "某某用户",



                CoopTime = 1,



                JoinTime = new DateTime(2014, 3, 20)



            };





            //判断合作是否已经到期



            int result = DateTime.Compare(DateTime.Now, user.JoinTime.AddYears(user.CoopTime));





            if (result <= 0) //当前时间比合作到期时间早，合作未到期



            {



                //计算时间



                var pastDays = (DateTime.Now.Subtract(user.JoinTime)).TotalDays;



                var oneYearDays = (user.JoinTime.AddYears(user.CoopTime).Subtract(user.JoinTime)).TotalDays;



                var pastPercentage = (pastDays / oneYearDays) * 100;





                var dataSuccess = new { msg = true, p = pastPercentage };



                return Json(dataSuccess, JsonRequestBehavior.AllowGet);





            }



            else //当前时间比合作到期时间晚，合作已到期



            {



                var dataFail = new { msg = false, p = 100 };



                return Json(dataFail, JsonRequestBehavior.AllowGet);



            }



        }





    }









以上，


● 使用DateTime的静态方法Compare来比较2个时间，一个是当前时间，另一个是加入时间 + 合作时长，如果结果小于或等于0，就表示没有过期。
● 使用DateTime的静态方法Subtract来给2个时间做减法。


Home/Index.cshtml中，当页面加载完毕后，向服务端发出一个异步GET请求，把返回的数据显示到progressbar中。


<head>



    <meta name="viewport" content="width=device-width" />



    <title>Index</title>



    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />



    <script src="~/Scripts/jquery-1.8.2.min.js"></script>



    <script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>



    <script type="text/javascript">



        $(function () {





            $.getJSON('@Url.Action("GetStatus","Home")', function(data) {



                if (data.msg == true) {



                    var temp = parseInt(data.p);



                    $('#p').progressbar({



                        value: temp



                    });



                } else {



                    $('#message').text('已到期');



                    $('#p').progressbar({



                        value: parseInt(data.p)



                    });



                }



            });



        });



    </script>



</head>



<body>



    <div id="p">



    </div>



    <div>



        <span id="message"></span>



    </div>



</body>


												


											
MVC实现有关时间的进度条，使用jQuery ui的progressbar的更多相关文章
	

    
								
  1. 赞！带进度条的 jQuery 文件拖放上传插件
		
    jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果.作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 H ...
    
		
    2. 
						
  2. 利用CoreAnimation实现一个时间的进度条
		
    (个人原创,转载请注明出处 http://www.cnblogs.com/pretty-guy/p/7460334.html) 在iOS中实现进度条通常都是通过不停的设置progress来完成的,这样 ...
    
		
    3. 
						
  3. MVC 图片上传 带进度条（转）
		
    MVC 图片上传小试笔记 form.js 这个插件已经是很有名的,结合MVC的html辅助方法异步上传就很简单了.jQuery Form Plugin :http://www.malsup.com/j ...
    
		
    4. 
						
  4. MVC自定义编辑视图,DateTime类型属性显示jQuery ui的datapicker
		
    实现的效果为:在编辑视图中,对DateTime类型的属性,显示jQuery UI的datepicker.效果如下: Student.cs public class Student    {       ...
    
		
    5. 
						
  5. 带进度条的 jQuery 文件拖放上传插件
		
    jQuery File Uploader :jQuery File Uploader 是一个 jQuery 文件拖放上传插件 兼容性判断 下载:https://github.com/danielm/u ...
    
		
    6. 
						
  6. Python实现进度条和时间预估的示例代码
		
    一.前言 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去学习更加高深的知识.那么针对这三类人,我给大家 ...
    
		
    7. 
						
  7. JQuery入门——进度条
		
    越来越觉得常规javascript已经跟不上节奏了,打算学点进阶的,从JQuery学起. JQuery是一个Javascript库,可以从JQuery.com下载,放到本地,用 <script  ...
    
		
    8. 
						
  8. Android 自学之进度条ProgressBar
		
    进度条(ProgressBar)也是UI界面中的一种非常使用的组件,通常用于向用户显示某个耗时完成的百分比.因此进度条可以动态的显示进度,因此避免长时间地执行某个耗时操作时,让用户感觉程序失去了响应, ...
    
		
    9. 
						
  9. 进度条（ProgressBar）的功能与用法
		
    进度条也是UI界面中一种非常实用的组件,通常用于向用户显示某个耗时操作完成的的百分比.进度条可以动态的显示进度,因此避免长时间的执行某个耗时的操作,让用户感觉程序失去了响应,从而更好的提高用户界面的友 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. SSIS 学习之旅  序章 和 简介
			
    SSIS 学习之旅目录: 第一章: SSIS 学习之旅 第一个SSIS 示例(一) 第二章: SSIS 学习之旅 第一个SSIS 示例(二) 第三章: SSIS 学习之旅 数据同步 第四章: SSIS ...
    
			
    2. 
						
  2. mysql 5.1 下载地址 百度云网盘下载
			
    mysql 百度云下载 链接: https://pan.baidu.com/s/1fPSEcgtDN7aU2oQ_sL08Ww 提取码: 关注公众号[GitHubCN]回复2539获取
    
			
    3. 
						
  3. 【51nod】1709 复杂度分析
			
    题解 考虑朴素的暴力,相当于枚举u点的每个祖先f,然后统计一下这个点f除了某个儿子里有u的那个子树之外的节点个数,乘上f到u距离的二进制1的个数 那么我们用倍增来实现这个东西,每次枚举二进制的最高位j ...
    
			
    4. 
						
  4. JavaScript中正则的使用（1）
			
    通过例子学习正则中的常见语法(1) $num javascript var a = 'javascript'; var b = a.replace(/(java)(script)/gi, '$2-$1 ...
    
			
    5. 
						
  5. CentOS7安装和配置mongodb3.6
			
    (1)安装mongodb 1.参考文档 https://docs.mongodb.com/manual/tutorial/install-mongodb-on-red-hat/ 2.创建yum源 #v ...
    
			
    6. 
						
  6. hdoj2191 珍惜现在，感恩生活（01背包 || 多重背包）
			
    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2191 思路 由于每种大米可能不止一袋,所以是多重背包问题,可以直接使用解决多重背包问题的方法,也可以将 ...
    
			
    7. 
						
  7. 使用Swing的JSpinner组件设置日期时间选择器
			
    代码: //获得时间日期模型 SpinnerDateModel model = new SpinnerDateModel(); //获得JSPinner对象 JSpinner year = new J ...
    
			
    8. 
						
  8. Java 中的异常处理机制
			
    生活中的异常:  不能够完整而顺利的完成一些工作 根据不同的异常进行相应的处理,而不会就此终端我们的生活 引出:  异常处理: 方式:  1.选择结构(逻辑判断)避免 demo:if逻辑处理异常 im ...
    
			
    9. 
						
  9. JAVA 获取分行符
			
    public static final String CR_LF = System.getProperty("os.name").startsWith("Windows& ...
    
			
    10. 
						
  10. iOS 9应用开发教程之创建iOS 9项目与模拟器介绍
			
    iOS 9应用开发教程之创建iOS 9项目与模拟器介绍 编写第一个iOS 9应用 本节将以一个iOS 9应用程序为例,为开发者讲解如何使用Xcode 7.0去创建项目,以及iOS模拟器的一些功能.编辑 ...
    
			
    11.