homework2
/
form.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>

    <form action="data.html">
      <p>欢迎注册会员</p>
      <th>
        <label for="phonenumber"
        >手机号码：</label
      ><input
      id="phonenumber"
      type="text"
      name="phonenumber"
      maxlength="11"
      placeholder="11位手机号" /><span class="required">必填</span>
      </th>

      <div><label
        >创建密码：<input
          type="text"
          name="createpassword"
          maxlength="8"
          placeholder="8位密码" /></label
      ><span class="required">必填</span></div>
    <div><label
        >注册邮箱：<input
          type="text"
          name="registeredemail"
          placeholder="例如：wustzz@sina.com" /></label
      ><span class="required">必填</span></div>
    <div><label for="verificationcode" id="verificationcodelabel">验证码：</label><input type="text" name="verificationcode" id="verificationcode"/>

        <span id="capcha">5位验证码</span>

      </span>
    </div>
  <div>
      <label for="sex" id="sexlabel"
        >性别：</label
      ><input type="radio" name="sex" id="sex"/>男<input
      type="radio"
      name="sex"
    />女</div>
      <div><label for="birthday" id="birthdaylabel">生日：</label><input type="text" name="birthday" id="birthday"/></div>
    <div><label for="age" id="agelabel">年龄：</label><input type="date" name="age" id="age"/></div>
  <div><label id="place"
        >籍贯：
        </label
      ><select name="籍贯" size="1">
        <option value="湖北省">湖北省</option>
        <option value="河南省">河南省</option>
        <option value="山东省">山东省</option>
        <option value="湖南省">湖南省</option>
        <option value="5">广东省</option>
      </select>
      <select name="名称" size="1">
        <option value="武汉">武汉</option>
        <option value="黄冈">黄冈</option>
        <option value="襄阳">襄阳</option>
        <option value="荆州">荆州</option>
      </select> </div>
    <div><label
        >个人学历：
        <select name="学历" size="1">
          <option value="本科">本科</option>
          <option value="研究生">研究生</option>
          <option value="3">博士</option>
          <option value="4">硕士</option>
          <option value="5">中专</option>
        </select> </label
      ></div>
    <div><label for="wage" id="wagelabel"
        >月薪：</label
      ><input
      type="range"
      name="wage"
      min="0"
      max="10000"
      step="100"
      value="5000"
      id="wage" /><span id="msg"></span></div>
    <div><label
        >个人爱好：<input type="checkbox" name="sing" />唱歌<input
          type="checkbox"
          name="run"
        />跑步<input type="checkbox" name="swim" />游泳</label
      ></div>
    <div><label
        >个人照片：<input
          type="file"
          name="photo"
          accept="image/*"
          id="test-image-file"
        />
        <div id="test-image-preview"></div>
      </label>
    </div>
  <div><label
        >个人简历：<br /><textarea
          name="jianli"
          id=""
          cols="30"
          rows="10"
        ></textarea></label
      ><br />
      <input type="submit" value="提交" />
      <input type="reset" value="重填" />
    </form>

    <!-- //进度条 -->
    <script>
      var msg = document.getElementById("msg"); // 根据id值找到span元素
      window.onload = function () {
        msg.innerHTML = document.getElementById("wage").value; // 获取区间域初始value值
      };
      document.getElementById("wage").onchange = function () {
        msg.innerHTML = this.value; // 将当前区间域的value作为span元素的内容
      };
    </script>
    <!-- //图片预览 -->
    <script>
      var fileInput = document.getElementById("test-image-file");
      var preview = document.getElementById("test-image-preview");
      fileInput.addEventListener("change", function () {
        // 监听change事件
        preview.style.backgroundImage = ""; // 清除背景图片
        var file = fileInput.files[0]; // 获取File引用
        // 获取File信息:
        var reader = new FileReader(); // 读取文件
        reader.onload = function (e) {
          // 发起一个异步操作来读取文件内容
          var data = e.target.result; // data串形如： 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'
          preview.style.backgroundImage = "url(" + data + ")";
        };
        reader.readAsDataURL(file); // 以DataURL的形式读取文件
      });
    </script>
    <!-- 验证码 -->
    <script>
      let codeStr =
        "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
      //验证码长度
      let length = 5;
      let capcha = document.getElementById("capcha");
      let change_capcha = document.getElementById("change_capcha");
      // 用来生成一个[n,m]随机整数
      function getRandom(n, m) {
        return parseInt(Math.random() * (m - n + 1) + n);
      }
      function getCode() {
        let str = "";
        // 验证码有几位就循环几次
        for (let i = 0; i < length; i++) {
          let index = getRandom(0, 61);
          str += codeStr.charAt(index);
        }
        capcha.innerHTML = str;
      }
      // 页面初始加载时就调用函数生成验证码，页面刷新也会执行
      getCode();
      // 点击刷新验证码
      capcha.addEventListener("click", getCode);
      change_capcha.addEventListener("click", getCode);
    </script>
  </body>
</html>