zoukankan      html  css  js  c++  java
  • 首页+注册验证

    第一页:<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;
      50%;
      height: 500px;
      margin: 0 auto;
      }*/
       
      .imgBox img {
      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{
      200px;
      height: 50px;
      border: 1px solid red;
      float: left;
      }
      #text,#text1{
      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>
     
  • 相关阅读:
    设为首页 和 收藏本页
    软件开发:需求分析的20条法则
    常用的50条网站推广方法
    IT人士在离职时可以做的14件事情
    需求文档的编写
    无法清除DNS缓存
    输入法没有了 输入法不见了
    CMS
    用户输入的防注入总结 简介和第一步
    winmail无法给新浪发送邮件
  • 原文地址:https://www.cnblogs.com/qq1561942060/p/14038169.html
Copyright © 2011-2022 走看看