js實現(xiàn)顯示手機號碼效果

更新時間：2017年03月09日 11:42:07 作者：yonghuming

本文主要介紹了js實現(xiàn)顯示手機號碼效果的實例，具有很好的參考價值。下面跟著小編一起來看下吧

效果圖：

代碼如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>telephone number</title>
<style>
*{
    margin:0;
    padding:0;
}
form{
    width:300px;
    position:relative;
    margin:10px;
}
fieldset{
    padding:10px;
    border:1px dashed #ddd;
}
#num_info{
    display:none;
    position:absolute;
    left: 11px;
    bottom: 37px;
    width: 170px;
    height:30px;
    border:1px solid #ddd;
    border-bottom:none;
    background-color:#f6f6f6;
    font:20px/30px verdana,arial;
    color:#F90;    
}
#num{
    width:170px;
    height:24px;
    line-height:24px;
    margin-top:40px;
    border:1px solid #bbb;
}
#num:focus{
    outline:none;
    border-color:#999;
}
p{
    font-size:12px;
    color:#999;
}
</style>
</head>
<body>
<form>
    <fieldset>
        <label id="num_info" for="num"></label>
        <input type="text" id="num" maxlength="11">
    </fieldset>
</form>
<script>
window.onload=function(){
    var $numInfo=document.getElementById('num_info'),
        $num=document.getElementById('num'),
        _val,_val1,_val2;
    $num.onkeyup=function(){
        var val=this.value=this.value.replace(/[^\d]/g,''),
            len=val.length;    
        if(val!=''){$numInfo.style.display='block';}
        if(len<=3){
            _val=_val1= val.substr(0,3);
        }
        else if(len>3&&len<=7){
            _val=_val2=_val1+"-"+val.substr(3,len);
        }
        else if(len>7){
            _val=_val2+'-'+val.substr(7,len);
        }
        $numInfo.innerHTML=_val;
    }
    $num.onblur=function(){
        $numInfo.style.display='none';        
    }
}
</script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

柯里化是將接受多個參數(shù)的函數(shù)轉(zhuǎn)換成一系列只接受單個參數(shù)的函數(shù)的過程，而反柯里化是將柯里化函數(shù)轉(zhuǎn)換成接受多個參數(shù)的函數(shù)的過程，本文將帶大家理解 js 中的柯里化與反柯里化,需要的朋友可以參考下

2023-07-07

JS加密解密之保存到桌面書簽

漸進式Web應用是一種結(jié)合了網(wǎng)頁和原生移動應用（Native App）優(yōu)點的新型應用開發(fā)模式,這篇文章給大家介紹JS加密解密之保存到桌面書簽的操作方法,感興趣的朋友跟隨小編一起看看吧

2024-03-03

JavaScript數(shù)組reduce常見實例方法

reduce方法在數(shù)組的每個元素上執(zhí)行用戶提供的回調(diào)函數(shù),即"reducer",它傳入對前一個元素進行計算的返回值,結(jié)果是單個值,它是在數(shù)組的所有元素上運行reducer的結(jié)果,下面這篇文章主要給大家介紹了關于JavaScript數(shù)組reduce常見實例方法的相關資料,需要的朋友可以參考下

2022-05-05