js实现显示手机号码效果
效果图：
代码如下：
<!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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持小牛知识库！
-
本文向大家介绍js手机号批量滚动抽奖实现代码，包括了js手机号批量滚动抽奖实现代码的使用技巧和注意事项，需要的朋友参考一下 我们平时在看一些选秀节目或一些歌唱类比赛节目时经常会看到在现场的大屏幕上会有观众的手机号在滚动来选出谁是幸运观众或谁中了什么奖项，这些手机号都是现场观众或场外观众在给选手投票时产生的，当主持人一声开始令下，大屏幕上的手机号就会快速随机滚动，当主持人一声停令下，大屏幕上会随机出
-
本文向大家介绍JS实现随机生成10个手机号的方法示例，包括了JS实现随机生成10个手机号的方法示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现随机生成10个手机号的方法。分享给大家供大家参考，具体如下： JS部分： HTML部分： 感兴趣的朋友可使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun
-
本文向大家介绍纯js实现手风琴效果代码，包括了纯js实现手风琴效果代码的使用技巧和注意事项，需要的朋友参考一下 我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发，这不仅节约了时间，也让效率大大的提高，并让公司的效益增加，何乐而不为呢？ 但是，这也会有一定的缺点，比如jQ比js慢，尤其在大型项目中就会显现出来，下面我用原生js实现一个简单的手风琴效果效果。 HTML代码如下
-
本文向大家介绍jquery实现手机号码选号的方法，包括了jquery实现手机号码选号的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery实现手机号码选号的方法。分享给大家供大家参考。具体如下： 前段时间看到联通的自由组合套餐非常诱人于是决定换号，但选号是个非常累人的活在免费的号码列表中选了好久都没选到心仪的号码，于是写了个脚本去分析这些手机号码，虽然不是非常准确，但至少把那堆
-
本文向大家介绍js实现显示当前状态的导航效果代码，包括了js实现显示当前状态的导航效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现显示当前状态的导航效果代码。分享给大家供大家参考。具体如下： 这里演示显示当前状态的导航，鼠标点击左侧的导航菜单，右侧的内容就会变换，实际上是一个竖向的TAB选项卡，作为菜单来用的话，它正好可以显示当前的菜单位置，比较经典。 运行效果截图如下：
-
本文向大家介绍Android实现通讯录效果——获取手机号码和姓名，包括了Android实现通讯录效果——获取手机号码和姓名的使用技巧和注意事项，需要的朋友参考一下 首先给大家展示下运行效果图： 由于通讯录在手机里是以数据库贮存的 所以我们可以通过一个方法 来获得通讯录 ,这个方法返回一个游标的数据类型，通过moveToNext()方法来获取所有的手机号码信息 当然读取手机通讯录需要权限 在adnr