web服務器，驗證碼，Xftp使用方法

時間 2019-11-16

標籤 web 服務器驗證碼 xftp 使用方法欄目 HTML 简体版

原文原文鏈接

IIS操做步驟javascript

直接裝的wamp 騰訊雲主機控制檯安全組裏能夠配置要開放的端口關閉防火牆html

（C:\wamp\bin\apache\Apache2.4.4）打開httpd.conf文件 require all denied 改爲：前端

wamp用localhost能夠訪問，用公網ip沒法訪問用外網訪問提示403 forbbidenjava

最好關閉防火牆web

打開http://localhostapache

創建web服務器將網站掛在8080端口上安全

在IIS中能夠選擇「添加虛擬目錄」和「添加應用程序」兩種方法bash

選擇一個網站或者虛擬目錄服務器

驗證碼功能dom

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>前端驗證碼功能</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      background: rgba(0, 0, 0, .1);
      /* background: #061227; */
    }
    form{
      width: 600px;
      margin: 100px auto;
    }
    .box{
      height: 40px;
      line-height: 40px;
    }
    .tip{
      float: left;
    }
    input{
      float: left;
      width: 200px;
      height: 30px;
      padding: 3px 10px;
      line-height: 30px;
    }
    #identify{
      float: left;
      width: 100px;
      height: 40px;
      line-height: 40px;
      font-weight: bold;
      text-align: center;
      letter-spacing: 2px;
      background: #365c64;
      color: #fff;
      border-radius: 5px;
      margin: 0 10px;
    }
    .btn{
      margin: 25px auto;
    }
    .btn button{
      width: 200px;
      height: 36px;
      line-height: 36px;
      background: #409eff;
      border-radius: 5px;
      border: 0;
      color: #fff;
    }
  </style>
</head>

<body>
  <form action="">
    <div class="box">
      <span class="tip">驗證碼：</span>
      <input type="text" id="text" value="" placeholder="請輸入驗證碼" autocomplete="off">
      <span id="identify" onclick="generatedCode()"></span>
      <a href="javascript:void(0)" onclick="generatedCode()">看不清，換一張</a>
    </div>
    <div class="btn"><button onclick="checkCode()">驗證</button></div>
  </form>
</body>
<script>
  generatedCode();
  // 隨機生成驗證碼
    function generatedCode() {
      var code1 = "";//生成的驗證碼 
      var array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
      for (let i = 0; i < 4; i++) {
        var index = Math.floor(Math.random() * 36);//隨機0-35
        code1 += array[index];
        document.getElementById("identify").innerHTML = code1;
      }
      console.log("二維碼是：",code1)
    };
    // 驗證用戶輸入
    function checkCode() {
      var code2 = document.getElementById("identify").innerHTML;//獲取當前生成的驗證碼
      code2 = code2.toUpperCase();

      var code3 = document.getElementById("text").value; //客戶輸入的驗證碼
      code3 = code3.toUpperCase();//把客戶輸入的驗證碼轉換爲大寫
      console.log("生成的二維碼是:"+ code2 +"\n用戶輸入的驗證碼是:"+ code3)

      if (code2 === code3) {
        alert("恭喜驗證成功");
        // window.open('http://www.baidu.com');
      } else {
        alert("輸入的驗證碼不正確");
        code3 = "";//清空用戶輸入
      }
    }
</script>
</html>
複製代碼