菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 赵强-20221108-DOM&BOM02 [打印本页]
作者: BlueFlame    时间: 2022-11-8 23:39
标题: 赵强-20221108-DOM&BOM02
今日所学内容：
<!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>

  </head>
  <body>
    <div id="form">
      <p>姓名：<input type="text" id="name" /></p>
      <p>手机：<input type="text" id="tel" /></p>
      <p>
        密码：<input type="password" id="pwd" /><input
          type="button"
          id="toggleType"
          value="显示密码"
        />
      </p>
      <p>
        性别：<input type="radio" name="sex" id="sex"/>男<input
          type="radio"
          name="sex" id="sex"
        />女 <input type="radio" name="sex" id="sex" />保密
      </p>
      <p>
        爱好：<input type="checkbox" class="hob" name="hobs" />打球
        <input type="checkbox" class="hob" name="hobs" />唱歌
        <input type="checkbox" class="hob" name="hobs" />跳舞
        <input type="checkbox" class="hob" name="hobs" />睡觉
        <input type="checkbox" class="hob" name="hobs" />打游戏
        <input type="checkbox" class="hob" name="hobs" />敲代码
      </p>
      <p>简介：<textarea id="desc" cols="30" rows="10"></textarea></p>
      <p>
        <button id="btn">提交</button>
        <!-- <input type="button" id="check" value="单选复选" /> -->
      </p>
    </div>
    <!-- 弹窗--蒙版层 -->
    <div id="cover">
      <div id="msgBox">
        <h4>提示标题</h4>
        <p id="msg">提示成功或失败</p>
        <input type="button" id="closeBtn" value="关闭" />
      </div>
    </div>
    <script>
      //获取dom节点
      const userName = document.querySelector("#name");
      const hobs = document.querySelectorAll(".hob");
      const pwd = document.querySelector("#pwd");
      const tel = document.querySelector("#tel");
      const sex = document.querySelectorAll("#sex");
      const btn = document.querySelector("#btn");
      const desc = document.querySelector("#desc");

      const cover = document.querySelector("#cover");
      const msgBox = document.querySelector("#msgBox");
      const msg = document.querySelector("#msg");
      const closeBtn = document.querySelector("#closeBtn");

      const toggleType = document.querySelector("#toggleType");







    </script>
  </body>
</html>







欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/) Powered by Discuz! X3.4