首页+注册验证

第一页：<html>
   
  <head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap-3.3.7-dist/css/bootstrap-theme.css" />
  <link rel="stylesheet" type="text/css" href="css/bootstrap-3.3.7-dist/css/bootstrap.css" />
  <script src="css/bootstrap-3.3.7-dist/js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="css/bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
  <style type="text/css">
  /*div{
  border: 1px solid red;
  }*/
   
  /*p {
  text-align: center;
  font-size: 25px;
  color: cadetblue;
  font-family: fantasy;
  }*/
   
  /*.imgBox {
  border-top: 2px solid cadetblue;
  width: 50%;
  height: 500px;
  margin: 0 auto;
  }*/
   
  .imgBox img {
  width: 60%;
  height: 500px;
  margin: 0 auto;
  padding-top: 30px;
  }
   
  .img1 {
  display: block;
  }
   
  .img2 {
  display: none;
  }
   
  .img3 {
  display: none;
  }
  </style>
  <script type="text/javascript">
  var index = 0;
  //改变图片
  function ChangeImg() {
  index++;
  var a = document.getElementsByClassName("img-slide");
  if(index >= a.length) index = 0;
  for(var i = 0; i < a.length; i++) {
  a[i].style.display = 'none';
  }
  a[index].style.display = 'block';
  }
  //设置定时器，每隔两秒切换一张图片
  setInterval(ChangeImg, 2000);
  </script>
  </head>
   
  <body>
  <div class="container">
  <div class="row">
  <div class="navbar navbar-default">
  <div class="col-md-10">
  <ul class="nav navbar-nav">
  <li>
  <a href="">首页</a>
  </li>
  <li>
  <a href="">娱乐</a>
  </li>
  <li>
  <a href="">新闻</a>
  </li>
  <li>
  <a href="">视频</a>
  </li>
  <li>
  <a href="">图书</a>
  </li>
  <li>
  <a href="">汉字</a>
  </li>
   
  </ul>
  </div>
  <div class="col-md-2" style="margin-top: 10px;">
  <a href="js/new_file.html"><button>注册</button></a>
  </div>
  </div>
  </div>
  <div class="row">
  <div class="col-md-12">
  <div class="imgBox">
  <img class="img-slide img1" src="img/0ef31b26263320c13d0aa2e3acfb3dc.jpg" alt="1">
  <img class="img-slide img2" src="img/109951162970433694.jpg" alt="2">
  <img class="img-slide img3" src="img/89dd90efafab2c668d9f96004aabec4.jpg" alt="3">
  </div>
  </div>
  </div>
  </div>
  </body>
   
 

</html>

第二页：

<html>
  <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  .p{
  width: 200px;
  height: 50px;
  border: 1px solid red;
  float: left;
  }
  #text,#text1{
  width: 400px;
  height: 300px;
  border: 1px solid red;
  }
  input{
  margin-top: 30px;
  }
  #one,#two{
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  }
  </style>
  <script type="text/javascript">
  function y(){
  var one=document.getElementById("yhm").value;
  var two=document.getElementById("span1")
  var deg=/^\d{9}$/;
  if (deg.test(one)) {
  two.innerHTML="正确";
  return true;
  } else{
  two.innerHTML="错误";
  return false;
  }
  }
  function m(){
  var one=document.getElementById("mm").value;
  var two=document.getElementById("span2")
  var deg=/^\d{6}$/;
  if (deg.test(one)) {
  two.innerHTML="正确";
  return true;
  } else{
  two.innerHTML="错误";
  return false;
  }
  }
  function yx(){
  var one=document.getElementById("yx").value;
  var two=document.getElementById("span3")
  var deg=/^(\d{9||\d{10})+(@qq.com)$/;
  if (deg.test(one)) {
  two.innerHTML="正确";
  return true;
  } else{
  two.innerHTML="错误";
  return false;
  }
  }
  function s(){
  var one=document.getElementById("sjh").value;
  var two=document.getElementById("span4")
  var deg=/^1[2-9]\d{9}$/;
  if (deg.test(one)) {
  two.innerHTML="正确";
  return true;
  } else{
  two.innerHTML="错误";
  return false;
  }
  }
  </script>
  <script type="text/javascript">
  function fengye(i){
  xx(i);
  }
  function xx(i){
  switch (i){
  case 1:
  document.getElementById("text").style.display="block";
  document.getElementById("text1").style.display="none";
  break;
  case 2:
  document.getElementById("text").style.display="none";
  document.getElementById("text1").style.display="block";
  }
  }
  </script>
  </head>
  <body>
  <div class="p" id="one" onmouseover="fengye(1)">登录验证</div>
  <div class="p" id="two" onmouseover="fengye(2)">注册验证</div>
  <div id="text">
  用户名：<input type="text" name="" id="yhm" placeholder="请输入用户名" onblur="y()"/>
  <span id="span1"></span><br />
  密码：<input type="text" name="" id="mm" placeholder="请输入密码" onblur="m()"/>
  <span id="span2"></span><br />
  </div>
  <div id="text1" style="display: none;">
  邮箱：<input type="text" name="" id="yx" placeholder="请输入邮箱" onblur="yx()"/>
  <span id="span3"></span><br />
  手机号：<input type="text" name="" id="sjh" placeholder="请输入手机号" onblur="s()"/>
  <span id="span4"></span><br />
  </div>
  </body>
  </html>
 
posted @ 2020-11-25 20:00  浅夏时光  阅读(110)  评论(0)  编辑  收藏  举报