JavaScript学习笔记（二）--创建登录界面，链接服务器

最新推荐文章于 2023-04-12 11:48:36 发布

weixin_30487317

最新推荐文章于 2023-04-12 11:48:36 发布

阅读量197

点赞数

文章标签： javascript 前端 json ViewUI

原文链接：http://www.cnblogs.com/zyh-blog123/p/11016527.html

版权

第一个前端项目--创建登录界面，链接服务器

笔者最近在写一个电子工资条的登录、首页、导入、查看的前端页面。因为自己大学主修.net，前后台代码都是自己编写，突然只写前台，对JavaScript基础编写很不熟悉（以前总是引用插件，在学校学的还是太少了），尤其是链接服务器后台，简直是抓狂。就算引用最基础的js文件也总报错。

依据同部门老师的建议，笔者计划近期多花时间精力掌握JavaScript的基础知识，因为网上的资料都是理论性的，并没有实战开发可以参考，所以笔者打算边学边摸索。万事开头难，相信在这次前端设计中能够总结出很多有实际意义的文章。

html部分：

<body>
<div class="division-line line1"></div>
<div class="division-line line2"></div>
<div class="container">
    <div class="header">
        <div class="logo fl"></div>
        <span class="title1">
            <a href="http://www.jift.edu.cn"><img src="images/logo.png" height="40" width="200"/></a>
        </span>
        <span class="title2">联系我们</span>
    </div>
    <div class="main">
        <div class="login-box">
            <form    id="login-form" method="post"><!--οnsubmit="submitLogin()"-->
                <div class="login-title">登录薪资核算平台</div>
                <!------左侧登录----->
                <div class="input-box">
                    <table class="table-style">
                        <tr>
                            <td>

                                <input class="input-style" id="teacherId" placeholder="用户名" name="teacherId"/>
                            </td>
                        </tr>
                        <tr>
                            <td>

                                <input class="input-style" id="password" type="password" placeholder="密码" name="password"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                               <input  class="login-btn" value="登录" id="login"  onclick="submitLogin()" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                未开通应用 现在注册
                            </td>
                        </tr>
                    </table>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="footer">
    <div class="l-link">
        <a href="javascript:;">关于我们</a>|<a href="javascript:;">常见问题</a>|<a href="javascript:;">服务条款</a>|<a
            href="javascript:;">投诉建议</a>
    </div>
</div>
</body>

登录代码

css部分：

body{

    margin: 0px;
    background: #f6f6f6;
}
.container {
    width: 100%;
    margin: 0 auto;
}
.header {
    height: 77px;
    position: relative;
    background-color: White;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
}

.header .title1 {
    font-size: 18px;
    color: #666;
    display: block;
    position: relative;
    top: 21px;
}

.header .title2 {
    font-size: 18px;
    color: #999;
    display: block;
    position: relative;
    float: right;
    width: 200px;
    padding-right: 300px;
    text-decoration: none;
    margin-bottom: 40px;
}

.header .logo {
    height: 77px;
    width: 59px;
    margin-left: 143px;
    _margin-left: 70px;
    margin-right: 10px;
}

/*********************header end******************************************/
/*********************main begin******************************************/
.main {
    height: 520px;

    position: relative;
    margin-left: 30px;
    margin-right: 30px;
    text-align: center;
    align:center ;
}

.login-box {
    width: 810px;
    height: 380px;
    margin-left: -405px;
    position: absolute;
    text-align: center;
    margin-top: 90px;
    border: 1px solid #eee;
    box-shadow: 0px 0px 1px #f6f6f6;
    background-color: White;
    border-radius: 4px;
    align:center ;
    left: 50%;
    text-align: center;

}

.login-title {
    height: 80px;
    line-height: 80px;
    color: #555555;
    font-size: 24px;
    width: 90%;
    margin-left: 5%;
    border-bottom: 1px solid #d4d4d4;
}

.input-box {
    height: 260px;
    width: 99%;
    margin: 0 auto;
    position: relative;
  text-align: center;
}
.input-box2{
    height: 300px;
    width: 48%;
    float:right;

}
.table-style{
    height: 80%;
    width: 100%;
    text-align: center;
    margin-top: 5%;
    margin-bottom: 10%;
}
.input-style{
    height: 35px;
    width:258px;
    border-radius: 3px;
    border: 1px solid #cccccc;

}
.login-button{
    height: 45px;
    cursor: pointer;
    padding: 10px ;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 5px;
    color: #fff;
    background-color: #43907c;
    border-width: 0px;
    border-color: #3ca58a;
    width: 275px;
}

/*用户名前小图标正常样式 灰色*/
.input-box .user-name {
    top: 15px;
    background-position: -810px -156px;
}

/*获得焦点样式 蓝色*/
.user-name.focus {
    background-position: -737px -156px;
}

/*密码前小图标正常样式 灰色*/
.input-box .password {
    top: 58px;
    background-position: -736px -188px;
}

/*获得焦点样式，蓝色*/
.password.focus {
    background-position: -810px -188px;
}

.input-box .password-ipt {
    border-top: 1px solid #d4d4d4;
    top: 46px;
    clip: rect(0px 235px 44px 20px);
}
.login-text {
    font-size: 14px;
    color: #999;
}
/*记住密码前的选项框 未选择样式*/
.remember-icon {
    display: inline-block;
    height: 18px;
    width: 18px;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    float: left;
    margin-top: 12px;
    margin-right: 5px;
    _line-height: 18px;
    cursor: pointer;
}
/*选中样式 多个蓝色对勾*/
.remember-icon.cur {

    background-position: -740px -228px;
}
.remember-text {
    display: inline-block;
    float: left;
}
.login-btn {
    clear: both;
    display: block;
    width: 260px;
    height: 45px;
    line-height: 45px;
    margin: 0 auto;
    border-radius: 5px;
    color: #fff;
    background: #55b6e9;
  /*  cursor: pointer;*/
    font-size: 16px;
   text-align: center;
}
.login-btn:hover {
    background: #a1defd;
}
.login-btn:active {
    background:  #55b6e9;
}
/*********************main begin******************************************/
/*********************footer begin******************************************/
.footer {
    height: 80px;
    margin-top: 48px;
    line-height: 80px;
    text-align: center;
    clear: both;
    font-size: 12px;
    color: #999;
    width: 100%;
    background-color: White;
    position: absolute;
    bottom: 0px;

}
.footer a {
    text-decoration: none;
    color: #999;
}
/*********************footer end******************************************/
.fl {
    float: left;
}
.fr {
    float: right;
}
.line1 {
    top: 112px;
}
.line2 {
    top: 631px;
}

登录css代码

js部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>电子工资条</title>
    <meta charset="utf-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="css/login.css">
    <script src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
      //创建Cookie
      function setCookie(cname,cvalue,exdays){
          var d = new Date();
          d.setTime(d.getTime()+(exdays*2*60*60*1000));//2小时Cookie失效
          var expires = "expires="+d.toGMTString();
          document.cookie = cname+cvalue+"; "+expires;
      }
      //获取Cookie
      function getCookie(cname){
          var name = cname + "=";
          var ca = document.cookie.split(';');
          for(var i=0; i<ca.length; i++) {
              var c = ca[i].trim();
              if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
          }
          return "";
      }
      function submitLogin(){
           // var name = $("#teacherId").val();
           // var pwd = $("#password").val();
          var name= document.getElementById("teacherId").value;
          var pwd= document.getElementById("password").value;
            if (name == "") {
                alert('用户名不能为空');
                return;
            }
            if (pwd == "") {
                alert("密码不能为空");
                return;
            }
          setCookie('当前账号：',name,1);
          getCookie(name);
          var url="链接地址";
          $.ajax({
                url:url,
                dataType: "json",
                type:'POST',
                data:
                  {
                      "teacherId":name,
                      "password":pwd
                  },
                success: function (msg) {
                    var code=msg.code;
                   if(code=="0"){
                      // alert("登录系统成功");
                       window.location.href = "index.html";    //0 新增信息成功，-1失败
                   }
                   else
                   {
                       alert("登录系统失败");
                   }
               },
                error: function (msg) {
                   alert(msg);
                }
            })
        }
    </script>
</head>