1. Mode.csl:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ProgressBar.Models
{
public class User
{
public int Id { get; set; }
public string Name { get; set; }
public DateTime JoinDate { get; set; }
public int ContractYears { get; set; }
}
}
2. HomeController.cs:
public class HomeController : Controller
{
//
public ActionResult Index()
{
return View();
}
public ActionResult GetNowProgressBarShow()
{
User user = new User() { Id = 1, Name = "tianqy", JoinDate = new DateTime(2014, 1, 1), ContractYears = 1 };
//判断合同是否到期
int expire = DateTime.Compare(DateTime.Now, user.JoinDate.AddYears(user.ContractYears));
if (expire <= 0) //未到期
{
//计算已过时间占得百分比
var pastDays = (DateTime.Now.Subtract(user.JoinDate)).TotalDays;
var totalDays = (user.JoinDate.AddYears(user.ContractYears).Subtract(user.JoinDate)).TotalDays;
var pastPercentage = (pastDays / totalDays) * 100;
//装载、返回Json数据
var data = new { IsExpire = false, PastPercentage = pastPercentage };
return Json(data,JsonRequestBehavior.AllowGet);
}
else //已过期
{
var data = new { IsExpire = true, PastPercentage = 100 };
return Json(data, JsonRequestBehavior.AllowGet);
}
}
}
3. Index.cshtml:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>合同到期进度条</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("GetNowProgressBarShow", "Home")‘, function (data) {
if (data.IsExpire == true) {
$("#msg").text("已到期！");
$("#pastContractDays").progressbar({
value: parseInt(data.PastPercentage)
});
} else {
$("#msg").text("");
$("#pastContractDays").progressbar({
value: parseInt(data.PastPercentage)
});
}
})
})
</script>
</head>
<body>
<div id="pastContractDays" style="width:200px; height:10px;">
</div>
<div>
<span id="msg"></span>
</div>
</body>
</html>
4.效果图：
时间： 2024-10-09 05:59:31