JavaScript

JavaScript为脚本语言，直接由浏览器编译执行

https://www.runoob.com/js/js-tutorial.html

使用js实现密码的可见不可见之间的转换

1.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">
    <link rel="stylesheet" href="../css/iconfont.css">
    <title>Document</title>
</head>
<body>
    <input type="password" id="pwd"><span class="iconfont icon-biyanjing" onclick="see(this)"></span>
</body>
<script>
    var flag=true;
    var pwd = document.getElementById("pwd")
    function see(span){
    if(flag){
        pwd.type="text"
        span.className='iconfont icon-yanjing'
        flag=false
    }else{
        pwd.type="password"
        span.className='iconfont icon-biyanjing'
        flag=true
    }
}
</script>
</html>

2.效果展示

当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示

1.代码

<!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>Focus</title>
    <style>
        input{
            width: 400px;
            height: 40px;
            border-color: cornflowerblue;
            font-size: 16px;
        }
        button{
            width: 80px;
            height: 44px;
            background-color: cornflowerblue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" value="手机"><button>搜索</button>
    </div>
</body>
<script>
    var text=document.querySelector('input');
    text.onfocus=function(){
        if(this.value=="手机"){
            this.value="";
        }
    }
    text.onblur=function(){
        if(this.value==""){
            this.value="手机"
        }
    }
    
</script>
</html>

2.效果展示

用户如果离开密码框，里面输入个数不是6~16，则提示错误信息，否则提示输入正确信息

<!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>phone</title>
    <style>
        div{
            width: 600px;
            margin: 100px auto;
        }
        .message{
            display: inline-block;
            font-size: 12px;
            color:skyblue;
            background: url(error.png) no-repeat left center;
            padding-left: 20px;
        }
        .wrong{
            color: red;
            background: url(red.png) no-repeat left center;
        }
        .right{
            color:rgb(18, 123, 165);
            background: url(rigth.png) no-repeat left center;
        }
    
        </style>
    
</head>
<body>
    <div class="register">
        <input type="text" class="ipt">
            <p class="message"> 请输入6-16位密码</p>
       </div>
</body>
<script>
    //1:获取元素
    var ipt = document.querySelector(".ipt");
    var message = document.querySelector(".message");
    //2.定义正则表达式
    var p = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/
    //3:绑定事件
    ipt.onblur = function(){
        //根据表单里面值的长度 ipt.value.lenth
        if(this.value.length==11)
        {
            if(!p.test(ipt.value)){
                message.className = " message wrong";
                message.innerHTML = "您输入的格式不正确";
            }else{
                message.innerHTML = "输入格式正确";
                message.className = " message right";
            }
            
        }else{
            message.innerHTML = "输入格式正确";
             message.className = " message right";
        }
    }
</script>

</html>