MVC implements a time-related progress bar, using the progressbar and jqueryprogressbar of jQuery ui
On e-commerce websites, you can use progress bars to visually display whether a user expires or not and the current user status.
Design such a Model.
public class User{public int Id { get; set; }public string Name { get; set; }public int CoopTime { get; set; }public DateTime JoinTime { get; set; }}
The CoopTime attribute of the cooperative duration and the time attribute JoinTime are two attributes closely related to the progress.
In HomeController, an action method is used to display the interface and a GET request from the view to return json data.
public ActionResult Index(){return View();}public ActionResult GetStatus(){User user = new User(){Id = 1,Name = "XX user ",CoopTime = 1,JoinTime = new DateTime(2014, 3, 20)};// Determine whether the cooperation has expiredint result = DateTime.Compare(DateTime.Now, user.JoinTime.AddYears(user.CoopTime));If (result <= 0) // the current time is earlier than the cooperation expiration time, and the cooperation has not expired{// Calculation timevar 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 // the current time is later than the cooperation expiration time. The cooperation has expired.{var dataFail = new { msg = false, p = 100 };return Json(dataFail, JsonRequestBehavior.AllowGet);}}}
Above,
● Use the DateTime static method Compare to Compare two times. One is the current time, and the other is the join time + cooperation duration. If the result is smaller than or equal to 0, it indicates that it has not expired.
● Use the static DateTime method Subtract to Subtract two times.
In Home/Index. cshtml, after the page is loaded, an asynchronous GET request is sent to the server to display the returned data to progressbar.
<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 ('Expired ');$('#p').progressbar({value: parseInt(data.p)});}});});</script><body><div id="p"></div><div><span id="message"></span></div></body>
Progressbar implements the progress of event occurrence and termination (c #, aspnet, html, js)// Getter
Var value = $ ('. selector'). progressbar ('option', 'value ');
// Setter
Var seconds = 1;
$ ('. Selector'). progressbar ('option', 'value', seconds );//
Seconds ++;
Use setinterval to change every second.
How to Use JQuery EasyUI progressbar$ (Function (){
$ ("# Progressbar"). progressbar ({
Value: 33 // progress percentage value
});
});
Isn't there such a function?
You can set this value as a variable and pass your percentage value.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
