前端模拟3

最新推荐文章于 2024-07-18 15:48:23 发布

一只fw程序猿

最新推荐文章于 2024-07-18 15:48:23 发布

阅读量645

点赞数 6

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_61383971/article/details/130326733

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>实验五</title>
  <link href="实验5.css" rel="stylesheet" type="text/css">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <!-- js内容 -->
  <script src="jquery-3.1.1.min.js"></script>
  <script type="text/javascript">
    function setRootFontSize(){
      var rootHtml = document.documentElement;
      var rem = rootHtml.clientWidth / (1080 / 100);   //1080为设计图px宽度
      rootHtml.style.fontSize = rem + "px";
    }
    setRootFontSize();   //网页首次载入时执行一次
    window.addEventListener("resize", setRootFontSize, false);   //网页大小改变时执行
    window.addEventListener("orientationchange", setRootFontSize, false);   //横屏切换时执行
    function regist(){
      var error = document.getElementById("errorArea");
      var name = document.getElementById("name");
      var phone = document.getElementById("phone");
      var re = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      var password = document.getElementById("password");
      var password1 = document.getElementById("password1");
      var ca2 = document.getElementById("ca2");
      if(name.value == ""){
        error.innerText="*用户名不能为空";
        error.style.display="block";
      }
      else if(phone.value == ""){
        error.innerText="*手机号不能为空";
        error.style.display="block";
      }
      else if(!re.test(phone.value)){
        error.innerText="*手机号不正确";
        error.style.display="block";
      }
      else if(password.value == ""){
        error.innerText="*密码不能为空";
        error.style.display="block";
      }
      else if(password1.value == ""){
        error.innerText="*确认密码不能为空";
        error.style.display="block";
      }
      else if(password.value != password1.value){
        error.innerText="*两次密码不一致";
        error.style.display="block";
      }
      else if(ca2.value == ""){
        error.innerText="*验证码不能为空";
        error.style.display="block";
      }
      else if(ca2.value != 123456){
        error.innerText="*验证码错误";
        error.style.display="block";
      }
      else {
        error.innerText="已提交全部注册信息";
        error.style.display="block";

      }
    }
    function captcha(){
      var error = document.getElementById("errorArea");
      var ca = document.getElementById("ca");
      var ca1 = document.getElementById("ca1");
      var phone = document.getElementById("phone");
      var re = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      ca.style.display="none";
      ca1.style.display="block";
      if(phone.value == ""){
        error.innerText="*手机号不能为空";
        error.style.display="block";
      }
      else if(!re.test(phone.value)){
        error.innerText="*手机号不正确";
        error.style.display="block";
      }
    }
    function hideError(){
      var error = document.getElementById("errorArea");
      error.style.display="none";
    }
  </script>
  <script>
    $().ready(function (){
      $("#loginBtn").click(function (){
        var errMsg = "";
        if($("#name").val() == ""){
          errMsg = "请输入用户名";
        }
        else if($("#phone").val() == ""){
          errMsg = "请输入手机号";
        }
        else if($("#password").val() == ""){
          errMsg = "请输入密码";
        }
        if(errMsg != ""){
          $("#errorArea").text(errMsg);
        }
        else{
          var paras = {name:$("#name").val(),phone:$("#phone").val(),password:$("#password").val()};
          $.ajax({
            url: "http://43.136.217.18:8081/registAsync",
            data: paras,
            type: "POST",
            datatype:"json",
            //访问成功，解析json
            success:function (data) {
              if(data.state == "SUC"){
                window.location.href="http://43.136.217.18:8081/success.html";
              }
              else{
                var msg = data.msg;//显示出错信息
              }
            },
            error:function (data) {
              var msg = data.msg;//显示无法连接到服务器
            }
          })
        }
      })
    });
  </script>
</head>

<body >
<!--头部-->
<div id="header">
  <div class="head_left"></div><!--宽 104px 高 132px-->
  <div class="head_right"></div>
  <div class="head_center">用户注册</div>
</div>
<!--正文-->
<div id="contentArea">
  <div class="content_left">用户名</div><!--宽 188 高 108-->
  <div class="content_center"><input type="text" id="name" placeholder="请输入用户名" οnclick="hideError()"></div>
  <div class="content_left">手机号</div><!--宽 188 高 108-->
  <div class="content_right" οnclick="captcha()" id="ca">发送验证码</div>
  <div class="content_right1" id="ca1"><input type="text" class="yanzhengma" placeholder="请输入验证码" id="ca2" οnclick="hideError()"></div>
  <div class="content2_center"><input class="content_right_center" type="tel" id="phone" placeholder="请输入手机号" οnclick="hideError()"></div>
  <div class="content_left">密码</div><!--宽 188 高 108-->
  <div class="content_center"><input type="password" id="password" οnclick="hideError()"></div>
  <div class="content_left">确认密码</div><!--宽 188 高 108-->
  <div class="content_center"><input type="password" id="password1" οnclick="hideError()"></div>
</div>
<!--交互-->
<div id="menu">
  <div id="errorArea">*测试错误信息</div>
  <input type="button" id="loginBtn" value="注册" οnclick="regist()">
  <div class="menu_left">已有帐号</div>
  <div class="menu_right">更换手机号</div>
</div>
<!-- 空白部分 -->
<div class="contentArea2"></div>

<!--底部-->
<div class="bottom">
  <div class="bottom-left">
    <!-- 文字 -->
    <div class="bottom-font">首页</div>
  </div>
  <div class="bottom-right"></div>
  <div class="bottom-font2">设置</div>
</div>

</body>
</html>

body{
    margin: 0px;
}
#header{
    background-color: #e66c05;
}
.head_left{
    width: 1.04rem;
    height: 1.32rem;
    float: left;
    background-image: url("sub_back.png");
    background-size: .55rem .55rem;
    background-repeat: no-repeat;
    background-position: .45rem .36rem;
}
.head_center{
    height: .57rem;
    margin: 0rem 1.04rem 0rem 1.04rem;
    text-align: center;
    color: white;
    line-height: .57rem;
    font-size: .57rem;
    padding: .37rem 0rem .38rem 0rem;

}
.head_right{
    width: 1.04rem;
    height: 1.32rem;
    float: right;
    background-image: url("sub_more.png");
    background-size: .55rem .55rem;
    background-repeat: no-repeat;
    background-position: 0rem .36rem;
}
#contentArea{
    margin: .64rem 0rem;
}
.content_left{
    height: .47rem;
    float: left;
    color: black;
    line-height: .47rem;
    font-size: .47rem;
    margin: 0rem .32rem;

}

.content_center{
    line-height: .47rem;
    font-size: .47rem;
    margin: 0rem  0 .43rem 2.64rem;


}
.content2_center{
    line-height: .47rem;
    font-size: .47rem;
    margin: 0rem  0 .43rem 2.64rem;


}
.content_right_center{
    width: 3.83rem;


}
input{
    width: 7.62rem;
    height: .47rem;
    border-style: none none solid none;
    font-size: .37rem;
    font-family: SimSun-ExtB;
}
.menu_left{
    font-size: .26rem;
    float: left;
    margin: .34rem .32rem;

}
.menu_right{
    font-size: .26rem;
    float:right;
    margin: .34rem .32rem;
    font-family: SimSun-ExtB;
}
.menu_center{
    background-color: #e66c05;
    height: .57rem;
    margin: 0rem .32rem 0rem .32rem;
    text-align: center;
    color: white;
    line-height: .57rem;
    font-size: .57rem;
    padding: .37rem 0rem .38rem 0rem;

}

.contentArea2{
    height:8.98rem;
    width:10.8rem;
}
.bottom{
    position: fixed;
    bottom: 0px;
    height:1.46rem;
    width:10.8rem;
    background-color:#e66c06;
    background-position: .35rem .55rem;
}
.bottom-left{
    width:1.19rem;
    height:1.26rem;
    position:relative;
    left:0.35rem;
    background-color: #ffffff;
    background-image: url("main_home2.png");
    background-repeat: no-repeat;
    background-size: .64rem .59rem;
    background-position:0.25rem 0.15rem;
}

.bottom-font{
    font-size:.32rem;
    color:#e66c05;
    position:relative;
    top:.87rem;
    left:.25rem;
}
.bottom-right{
    width:1.19rem;
    height:1.26rem;
    margin:0 0 ;
    position:relative;
    top:-1.3rem;
    left:9.54rem;
    background-image: url("main_config1.png");
    background-repeat: no-repeat;
    background-size: .64rem .59rem;
    background-position:0.25rem 0.15rem;

}
.bottom-font2{
    margin:0 0;
    font-size:.32rem;
    color:#ffffff;
    position:relative;
    top:-1.6rem;
    left:9.8rem;
}
#loginBtn{
    width:100%;
    font-size: .6rem;
    height: .9rem;
    background-color: #e66c05;
    color: white;

}
#errorArea{
    margin: 0.1rem 0rem 0.0rem 2rem;
    color: red;
    font-size: .4rem;
    display: none;
}
.content_right1{
    float: right;
    width: 1rem;
    font-size: .37rem;
    margin-right: 2.2rem;
    color: #e66c05;
    font-family: SimSun-ExtB;
    display: none;

}
.content_right{
    float: right;
    font-size: .37rem;
    margin-right: 2.07rem;
    color: #e66c05;
    font-family: SimSun-ExtB;

}
.yanzhengma{
    width: 2.5rem;

}