在电商网站中，有时候通过进度条来直观地显示用户是否到期以及用户当前的状态。
设计这样的一个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,布布扣,bubuko.com
时间： 2024-10-01 02:36:10