JavaScript学习记录《二》

川长思鸟来 2024-04-03 11:25 193阅读 0赞

JavaScript学习记录《二》

  1. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  7.     <title>初次网</title>
  8. </head>
  10. <body>
  12.     <table>
  14.         <!--第一行-->
  16.         <tr>
  18.             <td>姓名：</td>
  20.             <td>诗栋</td>
  22.         </tr>
  23.         <!--第二行-->
  25.         <tr>
  27.             <td rowspan="2">喜欢水果：</td>
  29.             <td>苹果</td>
  31.         </tr>
  33.         <!--第三行-->
  35.         <tr>
  37.             <td>香蕉</td>
  38.         </tr>
  39.     </table>
  41.     <img id="Light" scr="时钟光影.jpg" width="450" height="450" /> <br />
  43.     <div class="cls">传统教育</div>       <br />
  44.     <div class="cls">诗栋无敌</div>       <br />
  46.     <input type="checkbox" name="hobby" />电影
  47.     <input type="checkbox" name="hobby" />旅游
  48.     <input type="checkbox" name="hobby" />游戏
  49.     <br />
  50.     <script>
  52.         //Location:地址栏对象；属性：href
  53.         /*
  54.         alert("要跳转了！")
  55.        // location.href = "http://www.baidu.com";
  57.         document.write("3秒跳转到首页。。。");
  58.         setTimeout(
  59.             function () {
  60.                 location.href = "http://www.baidu.com";
  62.             }, 3000
  63.         )
  64.         */
  66.         //DOM:文档对象模型：将标记语言的各个组成部分封装成对象
  67.         /*
  68.          * document:
  69.          * Element:
  70.          * Attribute:
  71.          * Text:文本对象
  72.          * Comment：注释对象
  73.          * */
  75.         /*
  76.            javaScript通过DOm，就能够对HTML进行操作了
  77.            .改变HTML元素的内容
  78.            .改变html元素的样式（CSS）
  79.            .对HTML DOM事件作出反应
  80.            .添加和删除HTML元素
  81.          */
  83.         /*
  84.          *   DOM:
  85.          *
  86.            1 .获取Element对象
  87.            2 .常见HTML Element对象的使用
  88.          */
  91.         // 1.获取Element对象;       Element:元素对象
  93.                 /*
  94.                     .getElementById() 根据id属性值获取，返回一个Element对象
  95.                     .getElementsByTagName()  根据标签名称获取，返回Element对象数组
  96.                     .getElementsByName()  根据name属性值获取，返回Element对象数组
  97.                     .getElementsByClassName() 根据class属性值获取，返回Element对象数组
  98.                  */
  100.                // var img = document.getElementById("img");
  101.                 //alert(img);
  102.         var img = document.getElementById("Light");
  103.         img.src = "周传雄.jpg";
  105.         var divs = document.getElementsByTagName("div");
  106.         /*
  107.          * style:设置元素CSS样式
  108.          * InnerHTML:设置元素内容
  109.          * */
  110.         for (let i = 0; i < divs.length; i++) {
  111.             // divs[i].style.color = "red";
  112.             divs[i].innerHTML = "hahahha"
  113.             divs[i].style.color = "red";
  114.         }
  115.                 //alert(divs.length);
  116.                 /*
  117.                     for (let i = 0; i < divs.length; i++) {
  118.                         alert(divs[i]);//[object HTMLDivElement]
  119.                     }
  120.                 */
  122.                 var hobbys = document.getElementsByName("hobby");
  123.                 /*
  124.                 for (let i = 0; i < hobbys.length; i++) {
  125.                     alert(hobbys[i]);//[object HTMLInputElement]
  126.                 }
  127.                 */
  128.         var clss = document.getElementsByClassName("cls");
  129.         /*
  130.                 for (let i = 0; i < clss.length; i++) {
  131.                     alert(clss[i]);//[object HTMLDivElement]
  132.         }
  133.         */
  134.       //  2.常见HTML Element对象的使用
  135.         //1-src 2-cheched设置或返回checkbox是否应被选中：checkboxObject.check=true|false;
  137.         var hobbys = document.getElementsByName("hobby");
  139.         for (let i = 0; i < hobbys.length; i++) {
  140.             //alert(hobbys[i]);//[object HTMLInputElement]
  141.             hobbys[i].checked = true;//全选中 
  143.         }
  146.     </script>
  147. </body>
  149. </html>

2022-10-11

2022-10-11

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>表单验证</title>
  8. </head>
  9. <body>
  10.     <div class="form-div">
  11.         <div class="reg-content">
  12.             <h1>
  13.                 欢迎注册
  14.             </h1>
  15.             <span>已有账号？</span> <a href="#">登陆</a>
  16.         </div>
  17.         <form id="reg-form" action="#" method="get">
  19.             <table>
  21.                 <tr>
  22.                     <td>
  23.                         用户名
  24.                     </td>
  25.                     <td class="inputs">
  26.                         <input name="username" type="text" id="username">
  27.                         <br>
  28.                         <span id="username_err" class="err_msg" style="display:none">
  29.                         用户名不太受欢迎
  30.                         </span>
  31.                     </td>
  32.                 </tr>
  34.                 <tr>
  35.                     <td>
  36.                         密码
  37.                     </td>
  38.                     <td class="inputs">
  39.                         <input name="password" type="password" id="password">
  40.                         <br>
  41.                         <span id="password_err" class="ree_msg" style="display: none">
  42.                             密码格式有误
  43.                         </span>
  44.                     </td>
  45.                 </tr>
  47.                 <tr>
  48.                     <td>手机号</td>
  49.                     <td class="inputs"><input name="tel" type="text" id="tel">
  50.                         <br>
  51.                         <span id="tel_err" class="err_msg" style="display: none">
  52.                             手机号码格式错误
  53.                         </span>
  54.                     </td>
  55.                 </tr>
  56.             </table>
  58.             <div class="buttons">
  59.                 <input value="注册" type="submit" id="reg_bin">
  60.             </div>
  61.             <br class="clear">
  62.         </form>
  63.     </div>
  65.     <script>
  67.         //1.验证用户名是否符合规则
  68.         //1-1:获取用户名的输入框：
  69.         var usernameInput=document.getElementById("username");
  71.         //1-2:绑定onblur事件 失去焦点
  72.        usernameInput.onblur=checkUsername;
  73.        function checkUsername(){
  74.         //1-3:获取用户输入的用户名
  75.         var username=usernameInput.value.trim();//实现错误啊？
  76.         //alert(username);
  78.         var flag=username.length>=6&&username.length<=12;
  79.          //1-4:判断用户名是否符合规则：长度：6-12
  80.          if(flag){
  81.             //符合规则
  82.             document.getElementById("username_err").style.display='none';
  83.          }else{
  84.             //不符合规则
  85.             document.getElementById("username_err").style.display='';
  86.          }
  87.          return flag;
  88.        }
  90.         //1.验证密码是否符合规则
  91.         //1-1:获取密码的输入框：
  92.         var passwordInput=document.getElementById("password");
  94.         //1-2:绑定onblur事件 失去焦点
  95.        passwordInput.onblur=checkPassword;
  96.        function checkPassword(){
  97.         //1-3:获取用户输入的密码
  98.         var password=passwordInput.value.trim();//实现错误啊？
  99.        // alert(password);
  101.        var flag=password.length>=6&&password.length<=12;
  102.          //1-4:判断密码是否符合规则：长度：6-12
  103.          if(flag){
  104.             //符合规则
  105.             document.getElementById("password_err").style.display='none';
  106.          }else{
  107.             //不符合规则
  108.             document.getElementById("password_err").style.display='';
  109.          }
  110.          return flag;
  111.        }
  116.         //1.验证手机号是否符合规则
  117.         //1-1:获取手机号的输入框：
  118.         var telInput=document.getElementById("tel");
  120.         //1-2:绑定onblur事件 失去焦点
  121.        telInput.onblur=checkTel;
  122.        function checkTel(){
  123.         //1-3:获取用户输入的手机号
  124.         var tel=telInput.value.trim();//实现错误啊？
  125.         //alert(tel);
  127.         var flag=tel.length==11;
  128.          //1-4:判断手机号是否符合规则：长度：6-12
  129.          if(flag){
  130.             //符合规则
  131.             document.getElementById("tel_err").style.display='none';
  132.          }else{
  133.             //不符合规则
  134.             document.getElementById("tel_err").style.display='';
  135.          }
  136.          return flag;
  137.        }
  141.        //1.获取表单对象
  142.        var regForm=document.getElementById("reg-form");
  144.        //2.绑定onsubmit事件
  145.        regForm.onsubmit=function(){
  146.         //挨个判断每一个表单项是否符合要求，如果有一个不符合，则返回false
  148.         var flag=checkUsername()&&checkPassword()&&checkTel();
  150.         return flag;
  151.        }
  152.        //运行后提交表单后：
  153.        //file:///E:/VSCode/VS%E4%BB%A3%E7%A0%81/Untitled-1.html?
  154.        //username=sghsghd&password=gsghdha&tel=13146789136#
  155.     </script>
  156. </body>
  157. </html>

运用正则表达式后：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>表单验证</title>
  8. </head>
  9. <body>
  10.     <div class="form-div">
  11.         <div class="reg-content">
  12.             <h1>
  13.                 欢迎注册
  14.             </h1>
  15.             <span>已有账号？</span> <a href="#">登陆</a>
  16.         </div>
  17.         <form id="reg-form" action="#" method="get">
  19.             <table>
  21.                 <tr>
  22.                     <td>
  23.                         用户名
  24.                     </td>
  25.                     <td class="inputs">
  26.                         <input name="username" type="text" id="username">
  27.                         <br>
  28.                         <span id="username_err" class="err_msg" style="display:none">
  29.                         用户名不太受欢迎
  30.                         </span>
  31.                     </td>
  32.                 </tr>
  34.                 <tr>
  35.                     <td>
  36.                         密码
  37.                     </td>
  38.                     <td class="inputs">
  39.                         <input name="password" type="password" id="password">
  40.                         <br>
  41.                         <span id="password_err" class="ree_msg" style="display: none">
  42.                             密码格式有误
  43.                         </span>
  44.                     </td>
  45.                 </tr>
  47.                 <tr>
  48.                     <td>手机号</td>
  49.                     <td class="inputs"><input name="tel" type="text" id="tel">
  50.                         <br>
  51.                         <span id="tel_err" class="err_msg" style="display: none">
  52.                             手机号码格式错误
  53.                         </span>
  54.                     </td>
  55.                 </tr>
  56.             </table>
  58.             <div class="buttons">
  59.                 <input value="注册" type="submit" id="reg_bin">
  60.             </div>
  61.             <br class="clear">
  62.         </form>
  63.     </div>
  65.     <script>
  67.         //1.验证用户名是否符合规则
  68.         //1-1:获取用户名的输入框：
  69.         var usernameInput=document.getElementById("username");
  71.         //1-2:绑定onblur事件 失去焦点
  72.        usernameInput.onblur=checkUsername;
  73.        function checkUsername(){
  74.         //1-3:获取用户输入的用户名
  75.         var username=usernameInput.value.trim();//实现错误啊？
  76.         //alert(username);
  78.         //var flag=username.length>=6&&username.length<=12;
  79.          //1-4:判断用户名是否符合规则：长度：6-12,单词字符组成（正则表达式）
  80.          var reg=/^\w{6,12}$/;
  81.          reg.test(username);
  82.          var flag= reg.test(username);
  83.          if(flag){
  84.             //符合规则
  85.             document.getElementById("username_err").style.display='none';
  86.          }else{
  87.             //不符合规则
  88.             document.getElementById("username_err").style.display='';
  89.          }
  90.          return flag;
  91.        }
  93.         //1.验证密码是否符合规则
  94.         //1-1:获取密码的输入框：
  95.         var passwordInput=document.getElementById("password");
  97.         //1-2:绑定onblur事件 失去焦点
  98.        passwordInput.onblur=checkPassword;
  99.        function checkPassword(){
  100.         //1-3:获取用户输入的密码
  101.         var password=passwordInput.value.trim();//实现错误啊？
  102.        // alert(password);
  104.        //var flag=password.length>=6&&password.length<=12;
  105.          //1-4:判断密码是否符合规则：长度：6-12
  106.          var reg=/^\w{6,12}$/;
  107.          reg.test(password);
  108.          var flag= reg.test(password);
  109.          if(flag){
  110.             //符合规则
  111.             document.getElementById("password_err").style.display='none';
  112.          }else{
  113.             //不符合规则
  114.             document.getElementById("password_err").style.display='';
  115.          }
  116.          return flag;
  117.        }
  122.         //1.验证手机号是否符合规则
  123.         //1-1:获取手机号的输入框：
  124.         var telInput=document.getElementById("tel");
  126.         //1-2:绑定onblur事件 失去焦点
  127.        telInput.onblur=checkTel;
  128.        function checkTel(){
  129.         //1-3:获取用户输入的手机号
  130.         var tel=telInput.value.trim();//实现错误啊？
  131.         //alert(tel);
  133.         //var flag=tel.length==11;
  134.          //1-4:判断手机号是否符合规则：长度：6-12,数字组成，第一位是1
  135.          var reg=/^[1]\d{10}$/;
  136.          var flag=reg.test(tel);
  137.          if(flag){
  138.             //符合规则
  139.             document.getElementById("tel_err").style.display='none';
  140.          }else{
  141.             //不符合规则
  142.             document.getElementById("tel_err").style.display='';
  143.          }
  144.          return flag;
  145.        }
  149.        //1.获取表单对象
  150.        var regForm=document.getElementById("reg-form");
  152.        //2.绑定onsubmit事件
  153.        regForm.onsubmit=function(){
  154.         //挨个判断每一个表单项是否符合要求，如果有一个不符合，则返回false
  156.         var flag=checkUsername()&&checkPassword()&&checkTel();
  158.         return flag;
  159.        }
  160.        //运行后提交表单后：
  161.        //file:///E:/VSCode/VS%E4%BB%A3%E7%A0%81/Untitled-1.html?
  162.        //username=sghsghd&password=gsghdha&tel=13146789136#
  163.     </script>
  164. </body>
  165. </html>

发表评论

表情：
评论列表 （有 0 条评论，193人围观）

还没有评论，来说两句吧...

相关阅读

    相关 暑假学习记录（二）

    转眼已经回家一个礼拜了，我开始学习安装hadoop，放假之前听说hadoopp安装挺难的，但我还是鼓足了勇气去安装。 最开始也想按着教程来装，但是也遇到了许多的疑惑，于是我就

    一时失言乱红尘一时失言乱红尘/ 0 赞/ 120 阅读