首页 > 代码库 > 一个指示合同到期的进度条（mvc+jquery）
一个指示合同到期的进度条（mvc+jquery）
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 = http://www.mamicode.com/new { IsExpire = false, PastPercentage = pastPercentage }; return Json(data,JsonRequestBehavior.AllowGet); } else //已过期 { var data = http://www.mamicode.com/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=http://www.mamicode.com/"~/Content/themes/base/jquery-ui.css" rel="stylesheet" /> <script src=http://www.mamicode.com/"~/Scripts/jquery-1.8.2.min.js"></script> <script src=http://www.mamicode.com/"~/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.效果图：
一个指示合同到期的进度条（mvc+jquery）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。