安徽汽车网网站建设,网站被百度收录很重要,品牌理念设计企业网站建设,ftp如何导入wordpress 主题js实现手机通讯录效果图需求需求一#xff1a;锚点通过#id配合a标签使用css中scroll-behavior属性的使用需求二需求三获取汉字拼音的首字母方法1#xff1a;使用插件#xff0c;这里推荐pinyin-pro方法2#xff1a;使用unicode去重数组中冗余的对象法一#xff1a;用Map去…
js实现手机通讯录效果图需求需求一锚点通过#id配合a标签使用css中scroll-behavior属性的使用需求二需求三获取汉字拼音的首字母方法1使用插件这里推荐pinyin-pro方法2使用unicode去重数组中冗余的对象法一用Map去重法二用双层for循环配合splice使用代码实现Htmlcssjs需要引入的工具代码效果图 需求
手机通讯录这样的功能在很多场景下都是可以见到的多出现在移动端它通常有以下特点
锚点 点击右侧的英文字母会跳转到相应的区块并且在此过程页面不刷新智能识别左侧的地名或者人名。在相应首字母不存在的情况下不会出现相应的首字母列表比如下图没有字母E,F对应的人名或则地名则不显示EF空列表 数据流精准定位可以随意添加数据自动根据人名或者地名汉语拼音的第一个首字母来准确定位并将当前人名或地名精准存放在相应的字母列表当中 需求一锚点
锚点是css里一个非常神奇的功能。实现这样的功能我一般做好以下两点基本就是完美的了。
通过#id配合a标签使用 nava href#11/aa href#22/aa href#33/aa href#44/aa href#55/a/navdivdiv id11/divdiv id22/divdiv id33/divdiv id44/divdiv id55/div/div这一看就明白a标签用于右侧字母导航栏。a标签里href的属性值用#id表示分别与左侧列表里的div的id名字一一对应即可实现点击跳转这一特点也叫锚点这在css里还是挺高级的。 css中scroll-behavior属性的使用
使用这个属性可以让你的锚点跳转看起来更加丝滑
:root{font-size: 2rem;scroll-behavior: smooth;}MDN官网是这样介绍的 当用户手动导航或者 CSSOM scrolling API 触发滚动操作时CSS 属性 scroll-behavior 为一个滚动框指定滚动行为其他任何的滚动例如那些由于用户行为而产生的滚动不受这个属性的影响。在根元素中指定这个属性时它反而适用于视窗。 /* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;换句话说如果不使用这个属性那么在锚点跳转过程中会突然跳转到相应位置非常生硬用户体验感比较差。 如果使用这个属性在锚点跳转过程中会有过渡效果。使得整个过程看起来更加合理丝滑。 需求二需求三 先分析这这两个需求应该如何实现 智能识别以及数据流精准定位 1. 先获取地名或者人名汉字拼音的第一个汉字的首字母 2. 将此首字母打印没有问题然后将其放在一个变量里 3. 准备26个英文字母将这个字符串分割成26个元素然后遍历一下这个数组。 4. 遍历第一个汉字拼音的首字母 5. 再拿26个字母 与 第一个汉字拼音的首字母比较 6. 如果两个字母相同将第一个汉字拼音的首字母 对应的地名 放入一个新数组 7. 做个判断。当某个首字母对应的汉字为空则不渲染这个字母列表 8. 如果数组中的对象有重复调用去重函数 9. 输出 分析 难点1这里面循环判断输出都没有什么难以实现的难度不大。难的是如何将汉字转化为拼音并获取到拼音的首字母 难点2如果出现重复怎么去重 难点3有没有别的方式优化程序可以跳过去重 获取汉字拼音的首字母
方法有二
方法1使用插件这里推荐pinyin-pro script srchttps://unpkg.com/pinyin-pro3.12.0/dist/index.js/script这是一款具有非常强大的汉字转换方法的插件用路径在线引入即可使用。并且pinyin-pro 支持各种浏览器以及 Nodejs 环境运行。
方法2使用unicode
unicode这是一种文字编码标准是以\u6211\u559c\u6b22\u4f60等形式出现的 eg \u6211\u559c\u6b22\u4f60 我喜欢你 \u6211\u7231\u4f60 我爱你 \u4f60\u597d\u5e05\u554a 你好帅啊 \u6211\u6211\u559c\u6b22\u5403\u70b8\u9171\u9762 我喜欢吃炸酱面 这就是uniode我个人更喜欢用第二种方式。将文字编码打包成一个文件需要的时候随时本地调用即可非常安全。 去重数组中冗余的对象
这里推荐两种去重方法
法一用Map去重
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle/title
/head
body/body
/html
scriptlet obj [{ name: 米面, id: 1 },{ name: 牛肉, id: 2 },{ name: 蔬菜, id: 3 },{ name: 水果, id: 3 },{ name: 饮料, id: 1 },{ name: 咖啡, id: 4 },{ name: 茶叶, id: 3 }];const map new Map();const newArr obj.filter(csdn !map.has(csdn.id) map.set(csdn.id, 1));console.log(newArr);
/script输出结果
法二用双层for循环配合splice使用
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle/title
/head
body/body
/html
scriptlet obj [{ name: 米面, id: 1 },{ name: 牛肉, id: 2 },{ name: 蔬菜, id: 3 },{ name: 水果, id: 3 },{ name: 饮料, id: 1 },{ name: 咖啡, id: 4 },{ name: 茶叶, id: 3 }];function fn1(tempArr) {for (let i 0; i tempArr.length; i) {for (let j i 1; j tempArr.length; j) {if (tempArr[i].id tempArr[j].id) {tempArr.splice(j, 1);j--;};};};return tempArr;};console.log(fn1(obj));
/script输出结果 两种去重方法得到的结果是一模一样的。这两种方法可以复制后直接调用。值得一提的是除了Map还有set 还有for of /forEach /for in等方法虽然各有特点但都有自己的最合适的使用场景详情可阅读前文有详细介绍。 我个人更喜欢用第二种方法因为用双层for循环配合splice去重的方法是最不耗费性能的。虽然结构复杂让人看的恶心但毕竟“省钱”。 代码实现 按照分析的思路去执行即可怎么想就怎么做 程序如人生 Htmlcss
!doctype html
htmlheadmeta charsetutf-8title/titlestyle:root{font-size: 2rem;scroll-behavior: smooth;}#righta {display: block;text-decoration: none;color: black;text-align: center;}#right {position: fixed;right: 0.2rem;top: 1vh;font-size: .7rem;display: flex;flex-wrap: wrap;align-items: center;width: .5rem;padding: 0% 1rem;text-align: center;height: 100vh;background-color: greenyellow;overflow-y: scroll;}#list p {background: -webkit-linear-gradient(left, #2b80ff, #8098aa);}#list {height: 500vh;font-size: 2rem;}/style/headbodydiv idlist!-- pA/pspan/spanspan/spanpB/pspan/spanspan/span --/divdiv onclickdata() idkl styledisplay: block;position: absolute;top: 0%;6button来吧展示/button/divdiv idrighta href#AA/aa href#BB/aa href#CC/aa href#DD/aa href#EE/aa href#FF/aa href#GG/aa href#HH/aa href#II/aa href#JJ/aa href#KK/aa href#LL/aa href#MM/aa href#NN/aa href#OO/aa href#PP/aa href#QQ/aa href#RR/aa href#SS/aa href#TT/aa href#UU/aa href#VV/aa href#WW/aa href#XX/aa href#YY/aa href#ZZ/a/div/body
htmljs需要引入的工具代码 script src./data.js/script //人名地名的假数据script src./unicode.js/script //汉字转换拼音的打包文件含有编码和方法script src./jquery-3.6.1.js/script //引入jquery文件方便简化代码这三个文件比较大我放在资源里了可以免费下载希望对大家有帮助 其次还需要一个实现功能的js文件 注释也是必不可少的 script// ----------数组中相同对象去重选择两层for循环配合splice使用// function deWeight(arr) {// for (var i 0; i arr.length - 1; i) {// for (var j i 1; j arr.length; j) {// if (arr[i].one arr[j].one) {// arr.splice(j, 1);// j--;// }// }// }// return arr;// }//---------------------function data() {document.querySelector(#kl).style.display none// --------把地名拼音第一个首字母放到a数组里let a [];for (let j 0; j arrs.length; j) {var chinaName arrs[j].name;var easyName pinyin.getCamelChars(chinaName);// console.log(easyName);// console.log(easyName); //每个地名拼音的首字母缩写 a.push(easyName[0]) //第一个汉字拼音的首字母}//------------// let obj {}let add [];//-----------遍历一下26个字母let strarr ABCDEFGHIJKLMNOPQRSTUVWSYZ.split();for (let i 0; i strarr.length; i) {//-------------//----------遍历第一个汉字拼音的首字母let names [];for (let j 0; j a.length; j) {//----------//----------26个字母 与 第一个汉字拼音的首字母比较if (strarr[i] a[j]) {//----------如果两个字母相同将第一个汉字拼音的首字母 对应的地名 放入数组names egB 北京 B北海道 names [北京北海道]names.push(arrs[j].name)//----------console.log(names);}//----------}if (names.length ! 0) {//----------B 北京 oneB two[北京北海道] B 北海道 oneB two[北京北海道]let obj {one: strarr[i],two: names}//----------//----------将对象放入数组add.push(obj)// console.log(add);//----------}}console.log(add);//----------//----------调用去重函数将数组里重复的对象去除// deWeight(add);//----------//----------输出let str ;for (let i 0; i add.length; i) {str p id ${add[i].one}${add[i].one}/pspan${add[i].two.join(br/)}/span}$(#list).html(str)//----------}// data()/script创作不易如果对你有帮助请三连支持。
