用javaScript做两个练习

小旺仔爱代码

于 2024-08-26 13:40:52 发布

阅读量143

点赞数 4

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2401_85217463/article/details/141561736

版权

练习一：每一秒让灯泡切换一次状态

先准备两张灯泡的图片：一张不发光的一张发光的图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--         
             onclick属于JavaScript中的单击事件，        
             只要单击当前开灯的input按钮标签就会执行该事件，        
             调用该事件的JavaScript函数on()     
              -->    
                  <input type="button" value="开灯" onclick="on()" />    
                  <img src="img\off.gif" id="myImg"/>    
                  <input type="button" value="关灯" onclick="off()"/>    
                  
                  <script>        
                  function on(){            
                    let img=document.getElementById("myImg");            
                    img.src="img/on.gif";        
                }       
                 function off(){            
                    let img=document.getElementById("myImg");            
                    img.src="img/off.gif";
                }       
                 /*           
                 需求：每隔一秒，灯泡切换一次状态            
                 就是每隔一秒更改一次img标签的src属性值            
                 这里我们只需要每隔一秒调用上面的JavaScript中的on或者off函数即可        
                 */        
                let num=0;        
                setInterval(function(){           
                    if(num%2==0){                
                     on();           
                  }else{               
                  off();          
                  }         
                   num++;        
                   },1000);    
                   </script>
</body>
</html>

效果图：

登录表单验证：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form id="reg-form" action="#" method="get">        
        <table>            
            <tr>               
             <td>用户名</td>                
             <td>                    
                <input name="username" type="text" id="username" onblur="checkUsername()">                    
                <!--display: none 属于css语法，表示隐藏标签  -->                    
                <span id="username_err" class="err_msg" style="color: red; display: none">用户名不太受欢迎</span>                
            </td>            
        </tr>            
        <tr>                
        <td>密码</td> 
        <td>                    
            <input name="password" type="password" id="password" onblur="checkPassword()">                    
            <span id="password_err" class="err_msg" style="color: red; display: none">密码格式有误</span>                
        </td>            
    </tr>           
     <tr>               
         <td>手机号</td>                    
         <td class="inputs"><input name="tel" type="text" id="tel" onblur="checkTel()">                   
             <span id="tel_err" class="err_msg" style="color: red; display: none">手机号格式有误</span>                
            </td>            
        </tr>        
    </table>        
    <div>            
        <input value="注 册" type="submit" id="reg_btn">        
    </div>    
</form>        
<script>       
 //1. 验证 用户名是否符合规则：长度 6~12,单词字符组成       
  //2. 验证 密码是否符合规则:长度 6~12任意字符        
  //3. 验证 手机号是否符合规则：长度 11，数字组成，第一位是1        
  //4. 表单是否可以提交    
  </script>
  <script>    
  //1. 验证 用户名是否符合规则：长度 6~12,单词字符组成    
  function checkUsername(){        
    //1.1 获取用户名输入框输入的值        
    let usernameValue=document.getElementById("username").value;        
    //1.2 创建正则对象 new RegExp("\\w");         
    let reg=/^\w{6,12}$/;        
    //1.3判断输入的值是否满足正则  正则对象.test(被验证的字符串)        
    if(reg.test(usernameValue)){            
        //1.4被验证的字符串满足正则即合法            
        document.getElementById("username_err").style.display="none";            
        //提交表单            
        return true;        
    }else{            
        //1.5被验证的字符串满足不正则即非法，这里需要将标签显示           
         document.getElementById("username_err").style.display="block";            
         //阻止表单提交            
         return false;        
        }    
    }    
    //2. 验证 密码是否符合规则:长度 6~12任意字符    
    function checkPassword(){        
        //2.1 获取密码框的值
        let passwordValue = document.getElementById("password").value;       
         //2.2创建正则对象       
          let reg=/^.{6,12}$/;        
          //2.3判断密码框的值是否满足正则        
          if(reg.test(passwordValue)){            
            //2.4满足正则，隐藏span标签            
            document.getElementById("password_err").style.display="none";            
            //2.5可以提交表单            
            return true;       
         }else{            
            //2.6不满足正则，显示span标签            
            document.getElementById("password_err").style.display="block";            
            //2.7不可以提交表单            
            return false;        
        }    
    }    
    //3. 验证 手机号是否符合规则：长度 11，数字组成，第一位是1    
    function checkTel(){        
        //3.1 获取手机号输入框的值        
        let telValue = document.getElementById("tel").value;        
        //3.2创建正则对象 \d 表示[0-9]   \d{9} 这里表示从第三位开始正好出现9次数字        
        let reg=/^1[356789]\d{9}$/;        
        //3.3判断手机号的值是否满足正则        
        if(reg.test(telValue)){           
             //3.4满足正则，隐藏span标签            
             document.getElementById("tel_err").style.display="none"; let passwordValue = document.getElementById("password").value;        
             //2.2创建正则对象        
             let reg=/^.{6,12}$/;        
             //2.3判断密码框的值是否满足正则       
              if(reg.test(passwordValue)){            
                //2.4满足正则，隐藏span标签            
                document.getElementById("password_err").style.display="none";            
                //2.5可以提交表单           
                 return true;       
                 }else{            
                    //2.6不满足正则，显示span标签           
                     document.getElementById("password_err").style.display="block";           
                      //2.7不可以提交表单           
                       return false;       
                     }   
                     }    
                     //3. 验证 手机号是否符合规则：长度 11，数字组成，第一位是1 
                        function checkTel(){
                    //3.1 获取手机号输入框的值        
                    let telValue = document.getElementById("tel").value;        
                    //3.2创建正则对象 \d 表示[0-9]   \d{9} 这里表示从第三位开始正好出现9次数字        
                    let reg=/^1[356789]\d{9}$/;        
                    //3.3判断手机号的值是否满足正则        
                    if(reg.test(telValue)){            
                        //3.4满足正则，隐藏span标签            
                        document.getElementById("tel_err").style.display="none";
                        //3.5可以提交表单           
                        return true;        
                    }else{           
                         //3.6不满足正则，显示span标签            
                         document.getElementById("tel_err").style.display="block";            
                         //3.7不可以提交表单            
                         return false;        
                        }    
                    }    
                    //4. 表单是否可以提交    
                    //4.1给form标签绑定提交表单事件onsubmit   
                     document.getElementById("reg-form").onsubmit=function(){        
                        //4.2 三个输入框只要有一个非法就阻止表单提交，都合法才能提交表单       
                         return checkUsername() && checkPassword() && checkTel();   
                         }
                        }
</script>
</body>
</html>

效果图：