在电商网站中,有时候通过进度条来直观地显示用户是否到期以及用户当前的状态。

设计这样的一个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的更多相关文章

  1. 赞!带进度条的 jQuery 文件拖放上传插件

    jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果.作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 H ...

  2. 利用CoreAnimation实现一个时间的进度条

    (个人原创,转载请注明出处 http://www.cnblogs.com/pretty-guy/p/7460334.html) 在iOS中实现进度条通常都是通过不停的设置progress来完成的,这样 ...

  3. MVC 图片上传 带进度条(转)

    MVC 图片上传小试笔记 form.js 这个插件已经是很有名的,结合MVC的html辅助方法异步上传就很简单了.jQuery Form Plugin :http://www.malsup.com/j ...

  4. MVC自定义编辑视图,DateTime类型属性显示jQuery ui的datapicker

    实现的效果为:在编辑视图中,对DateTime类型的属性,显示jQuery UI的datepicker.效果如下: Student.cs public class Student    {       ...

  5. 带进度条的 jQuery 文件拖放上传插件

    jQuery File Uploader :jQuery File Uploader 是一个 jQuery 文件拖放上传插件 兼容性判断 下载:https://github.com/danielm/u ...

  6. Python实现进度条和时间预估的示例代码

    一.前言 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去学习更加高深的知识.那么针对这三类人,我给大家 ...

  7. JQuery入门——进度条

    越来越觉得常规javascript已经跟不上节奏了,打算学点进阶的,从JQuery学起. JQuery是一个Javascript库,可以从JQuery.com下载,放到本地,用 <script ...

  8. Android 自学之进度条ProgressBar

    进度条(ProgressBar)也是UI界面中的一种非常使用的组件,通常用于向用户显示某个耗时完成的百分比.因此进度条可以动态的显示进度,因此避免长时间地执行某个耗时操作时,让用户感觉程序失去了响应, ...

  9. 进度条(ProgressBar)的功能与用法

    进度条也是UI界面中一种非常实用的组件,通常用于向用户显示某个耗时操作完成的的百分比.进度条可以动态的显示进度,因此避免长时间的执行某个耗时的操作,让用户感觉程序失去了响应,从而更好的提高用户界面的友 ...

随机推荐

  1. Adapter.notifyDataSetChanged()源码分析以及与ListView.setAdapter的区别

    一直很好奇,notifyDataSetChanged究竟是重绘了整个ListView还是只重绘了被修改的那些Item,它与重新设置适配器即调用setAdapter的区别在哪里?所以特地追踪了一下源码, ...

  2. Phoenix的安装使用与SQL查询HBase

    一. Phoenix的简介 1. 什么是phoenix 现有hbase的查询工具有很多如:Hive,Tez,Impala,Shark/Spark,Phoenix等.今天主要说Phoenix.phoen ...

  3. 【LOJ】#2072. 「JSOI2016」独特的树叶

    题解 干脆题解套题解好了 毕竟我的hash方法是抄小迪的 https://www.cnblogs.com/RabbitHu/p/9165770.html 小迪太巨了%%% 之前模数是八位的WA了几个点 ...

  4. 几种JS&CSS框架

    易用的,图形种类丰富的,美观的几种: 1.bootstrap 文档地址: http://www.cnblogs.com/fnng/p/4446047.html http://www.runoob.co ...

  5. java 将class打包成jar包

    一.进入到java jdk安装目录(用cmd命令进入) c:cd C:\Program Files\Java\jdk1.8.0_45\bin 二.运行打包命令(将D盘下com中的class 打包成xy ...

  6. 一个将PDF转word、图片、PPT的在线工具

    smallpdf 真的超级棒! https://smallpdf.com/cn

  7. CSUOJ 1982 小M的移动硬盘

    Description 最近小M买了一个移动硬盘来储存自己电脑里不常用的文件.但是他把这些文件一股脑丢进移动硬盘后,觉得这些文件似乎没有被很好地归类,这样以后找起来岂不是会非常麻烦?小M最终决定要把这 ...

  8. CSU - 2062 Z‘s Array

    Description Z likes to play with array. One day his teacher gave him an array of n elements, and ask ...

  9. -bash: sdk: command not found

    Mac上安装过sdkman 但是由于某种原因使环境变量丢失久会出现使用sdk命令时 出现-bash: sdk: command not found提示 从新按照教程安装又提示电脑上sdkman已经安装 ...

  10. 解耦你的HTML,CSS和JAVASRIPT

    注:本文为翻译文章,原文<Decoupling Your HTML, CSS, and JavaScript> 今天在web上任何大一点的网站或应用程序都包含大量的html,css和jav ...