javascript - js 写一个电话号码马赛克效果
PHPz
PHPz 2017-04-11 12:45:15
[JavaScript讨论组]

如图,怎么用js让电话号码中间的几个数字不可见 然后点击就可见 再次点击又不可见 前端白痴 求大神支招!!! 想要看上去就很优雅的代码!!

PHPz
PHPz

学习是最好的投资!

全部回复(3)
黄舟

用正则呗!大概如下:

<span data-value="13418080097" class="phoneNum"></span>

$('.btn').toggle(function(){
    $('.phoneNum').html($(this).attr('data-value').replace(/(\d{3})\d+(\d{5})/,'$1*****$2'));
},function(){
    $('.phoneNum').html($(this).attr('data-value'));
});
高洛峰

你是想要保护用户隐私呢还是干嘛?保护隐私就不能在前端看到代码。就没有点击切换状态这样的效果必要了。
要点击切换状态的话,也就是这个电话号码不用保护隐私了。除非点击还异步去请求后端返回电话号码数据。

<span class='tel'>123<span class="asterisk">***</span><span class="number">2333</span>5578</span>
//先把.number给display:none掉
$('.tel').click(function(){
    $('.asterisk').toggle('slow');
    $('.number').toggle('slow');
});

这样就可以了。用原生的方法也是依靠display去写。
还有,继续巩固下基础show hide - 一起学习

黄舟

想办法把原来的号码保存起来,可以保存在属性中,也可以用建个映射表来保存,也可以有其它方式

再把号码中间替换成星号,用正则,截取+合并等方式都可以处理

再处理 <span> 的点击事件,根据当前的状态来显示/隐藏号码(替换 span 的 innerText)

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号