标签:style blog http java color 使用 os io
在电商网站中,有时候通过进度条来直观地显示用户是否到期以及用户当前的状态。
设计这样的一个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
MVC实现有关时间的进度条,使用jQuery ui的progressbar
标签:style blog http java color 使用 os io
原文地址:http://www.cnblogs.com/darrenji/p/3876760.html