zoukankan      html  css  js  c++  java
  • MVC中Javascript封装代码Demo

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4     <meta charset="UTF-8">
      5     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      7     <title>xxx系统登陆</title>
      8     <link href="~/Content/css/framework-font.css" rel="stylesheet" />
      9     <link href="~/Content/css/framework-login.css" rel="stylesheet" />
     10     <script src="~/Content/js/jquery/jquery-2.1.1.min.js"></script>
     11     <script src="~/Content/js/cookie/jquery.cookie.js"></script>
     12     <script src="~/Content/js/md5/jquery.md5.js"></script>
     13     <!--[if lte IE 8]>
     14         <div id="errorie"><div>您还在使用老掉牙的IE,正常使用系统前请升级您的浏览器到 IE8以上版本 <a target="_blank" href="http://windows.microsoft.com/zh-cn/internet-explorer/ie-8-worldwide-languages">点击升级</a>&nbsp;&nbsp;强烈建议您更改换浏览器:<a href="http://down.tech.sina.com.cn/content/40975.html" target="_blank">谷歌 Chrome</a></div></div>
     15     <![endif]-->
     16 </head>
     17 <body>
     18     <div style="position: absolute; z-index: 999; top: 20px; left: 20px; color: #fff; font-size: 13px; line-height: 22px;">
     19         在线体验,基于阿里巴巴云主机,采用独立运行环境,提供持续稳定安全服务,24小时均可以访问<br>
     20         用户名 admin 或 guest,密码 0000,请勿在系统内发表不文明信息
     21     </div>
     22     <div class="wrapper">
     23         <div class="container">
     24             <div class="logo">
     25                 <i class="fa fa-modx"></i>
     26                 <h1><span>XXX系统</span>平台</h1>
     27             </div>
     28             <form class="form">
     29                 <div class="row">
     30                     <input id="txt_account" type="text" placeholder="用户名/手机号/邮箱">
     31                     <i class="fa fa-user"></i>
     32                 </div>
     33                 <div class="row">
     34                     <input id="txt_password" type="password" placeholder="登录密码">
     35                     <i class="fa fa-key"></i>
     36                 </div>
     37                 <div class="row">
     38                     <input id="txt_code" maxlength="4" type="text" placeholder="验证码" style=" 190px; float: left;">
     39                     <div style=" 110px; float: right; padding-top: 14px; padding-left: 14px;">
     40                         看不清?<a id="switchCode" href="javascript:void();" style="text-decoration: none;">换一张</a>
     41                         <img id="imgcode" class="authcode" src="~/Login/GetAuthCode" width="80" height="25" />
     42                     </div>
     43                 </div>
     44                 <div class="row">
     45                     <button id="login_button" type="button"><span>登录</span></button>
     46                 </div>
     47                 <div class="row">
     48                 </div>
     49             </form>
     50             <div class="login_tips"></div>
     51         </div>
     52         <ul class="bg-bubbles">
     53             <li></li>
     54             <li></li>
     55             <li></li>
     56             <li></li>
     57             <li></li>
     58             <li></li>
     59             <li></li>
     60             <li></li>
     61             <li></li>
     62             <li></li>
     63         </ul>
     64     </div>
     65     <div class="copyright">
     66         <a href="http://www.nfine.cn" style="text-decoration:none;color:#fff;">xxx开发团队出品</a>
     67         <br>
     68        适用浏览器:IE8以上、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
     69     </div>
     70     <script type="text/javascript">
     71         (function ($) {
     72             $.login = {
     73                 formMessage: function (msg) {
     74                     $('.login_tips').find('.tips_msg').remove();
     75                     $('.login_tips').append('<div class="tips_msg"><i class="fa fa-question-circle"></i>' + msg + '</div>');
     76                 },
     77                 loginClick: function () {
     78                     var $username = $("#txt_account");
     79                     var $password = $("#txt_password");
     80                     var $code = $("#txt_code");
     81                     if ($username.val() == "") {
     82                         $username.focus();
     83                         $.login.formMessage('请输入用户名/手机号/邮箱。');
     84                         return false;
     85                     } else if ($password.val() == "") {
     86                         $password.focus();
     87                         $.login.formMessage('请输入登录密码。');
     88                         return false;
     89                     } else if ($code.val() == "") {
     90                         $code.focus();
     91                         $.login.formMessage('请输入验证码。');
     92                         return false;
     93                     } else {
     94                         $("#login_button").attr('disabled', 'disabled').find('span').html("loading...");
     95                         $.ajax({
     96                             url: "/Login/CheckLogin",
     97                             data: { username: $.trim($username.val()), password: $.md5($.trim($password.val())), code: $.trim($code.val()) },
     98                             type: "post",
     99                             dataType: "json",
    100                             success: function (data) {
    101                                 if (data.state == "success") {
    102                                     $("#login_button").find('span').html("登录成功,正在跳转...");
    103                                     window.setTimeout(function () {
    104                                         window.location.href = "/Home/Index";
    105                                     }, 500);
    106                                 } else {
    107                                     $("#login_button").removeAttr('disabled').find('span').html("登录");
    108                                     $("#switchCode").trigger("click");
    109                                     $code.val('');
    110                                     $.login.formMessage(data.message);
    111                                 }
    112                             }
    113                         });
    114                     }
    115                 },
    116                 init: function () {
    117                     $('.wrapper').height($(window).height());
    118                     $(".container").css("margin-top", ($(window).height() - $(".container").height()) / 2 - 50);
    119                     $(window).resize(function (e) {
    120                         $('.wrapper').height($(window).height());
    121                         $(".container").css("margin-top", ($(window).height() - $(".container").height()) / 2 - 50);
    122                     });
    123                     $("#switchCode").click(function () {
    124                         $("#imgcode").attr("src", "/Login/GetAuthCode?time=" + Math.random());
    125                     });
    126                     var login_error = top.$.cookie('nfine_login_error');
    127                     if (login_error != null) {
    128                         switch (login_error) {
    129                             case "overdue":
    130                                 $.login.formMessage("系统登录已超时,请重新登录");
    131                                 break;
    132                             case "OnLine":
    133                                 $.login.formMessage("您的帐号已在其它地方登录,请重新登录");
    134                                 break;
    135                             case "-1":
    136                                 $.login.formMessage("系统未知错误,请重新登录");
    137                                 break;
    138                         }
    139                         top.$.cookie('nfine_login_error', '', { path: "/", expires: -1 });
    140                     }
    141                     $("#login_button").click(function () {
    142                         $.login.loginClick();
    143                     });
    144                     document.onkeydown = function (e) {
    145                         if (!e) e = window.event;
    146                         if ((e.keyCode || e.which) == 13) {
    147                             document.getElementById("login_button").focus();
    148                             document.getElementById("login_button").click();
    149                         }
    150                     }
    151                 }
    152             };
    153             $(function () {
    154                 $.login.init();
    155             });
    156         })(jQuery);
    157     </script>
    158 </body>
    159 </html>
  • 相关阅读:
    【xsy2506】 bipartite 并查集+线段树
    Linux K8s容器集群技术
    Linux 运维工作中的经典应用ansible(批量管理)Docker容器技术(环境的快速搭建)
    Linux Django项目部署
    Linux Django项目测试
    Linux 首先基本包安装(vim啊什么的),源,源优化,项目架构介绍, (LNMuWsgi)Django项目相关软件mysql,redies,python(相关模块)安装配置测试
    Linux centos系统安装后的基本配置,Linux命令
    Linux 虚拟机上安装linux系统 (ip:子网掩码,网关,dns,交换机,路由知识回顾)
    $ Django 调API的几种方式,django自定义错误响应
    $Django 路飞之显示视频,Redis存购物车数据,优惠卷生成表,优惠卷的一个领取表。(知识小回顾)
  • 原文地址:https://www.cnblogs.com/turnip/p/12092354.html
Copyright © 2011-2022 走看看