js实现显示手机号码效果


Posted in Javascript onMarch 09, 2017

效果图:

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
JavaScript设置FieldSet展开与收缩
May 15 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
jquery 插件学习(三)
Aug 06 Javascript
js子页面获取父页面数据示例
May 15 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 #Javascript
javascript 秒表计时器实现代码
Mar 09 #Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 #Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 #Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 #Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 #Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 #Javascript
You might like
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
Mootools 1.2教程 函数
2009/09/15 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
adidas美国官网:adidas US
2016/09/21 全球购物
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
工程力学专业毕业生求职信
2013/10/06 职场文书
会计专业毕业生求职信分享
2014/01/03 职场文书
护理专科学生自荐书
2014/07/05 职场文书
新店开张活动方案
2014/08/24 职场文书
2014年工会工作总结
2014/11/12 职场文书
2014年卫生工作总结
2014/11/27 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS
Python读取和写入Excel数据
2022/04/20 Python