年度实用技巧 | 千里姻缘一线牵，送给好友的姻缘测试
原创年度实用技巧 | 千里姻缘一线牵，送给好友的姻缘测试
原创
灵感来源
上次送给好友的礼物，她好像不是很喜欢，下班过来把我所有的勺子和吸管掰成了V型。
为了证明她在我心中的重要性，我决定重新送她一份礼物。送礼物这件事，对于一个选择困难症的人来说，是一项很大的考验。我用了一炷香的时间，思考出一个绝妙的主意。
感谢自己平时追剧比较多，我想到爱5里面的微信万年历小程序测姻缘，如果我帮好友证明她和她男友是，天生一对，举世无双，珠联璧合，佳偶天成。那么，我不就成了现代版的红娘了么。今天也为自己的机智点个赞。
码上掘金
完整代码已经放到了我的码上掘金中了，在线进行代码效果的即时预览。
我很中意这个功能，很方便，还可以发给不会代码的朋友，进行页面操作。
https://code.juejin.cn/pen/7124318646607806495
功能设计
- 输入姓名，点击测试进入测试流程；
- 如果是彩蛋姓名，直接得出姻缘结果。彩蛋功能是我专门设计给我好友的（为了让她开心我也是煞费苦心），这里先卖个小小的关子；
- 如果不是彩蛋姓名，计算姓名笔划；
- 得到笔划结果之后，计算姻缘值；
- 最终得到姻缘结果。
功能实现
计算加载动效
这个动效早几年用的很时尚，其实实现方式很简单，一般需要两层结构实现。
- 底部容器的宽度是固定，我用了比较深的颜色。
- 上层容器使用的颜色要和底部容器不一样，加载效果才能明显。加载的效果通过上层容器的宽度从0到100%的动画实现的。
.loading-bg {
width: 240px;
height: 28px;
border: 1px solid #f7c74a;
background: #293a42;
margin: 30px auto;
position: relative;
}
.loading-bg .loading-bg-active {
position: absolute;
top: 0;
left: 0;
background: #f7c74a;
animation: loading 5s linear;
width: 0;
height: 100%;
animation-iteration-count: 1;
}
@keyframes loading {
90% {
width: 100%;
}
95% {
width: 100%;
}
100% {
width: 100%;
}
}计算笔划
我上网找了一下，果然被找到了大佬提供的插件cnchar，使用这个插件可以计算汉语的笔划。
在页面中引入cnchar的cdn文件。使用时很简单，需要计算的文字，调用它提供的stroke方法，汉语.stroke()就可以得到文字的笔划总和。
<script src="https://fastly.jsdelivr.net/npm/cnchar/cnchar.min.js"></script>
let nameSelfCount = !!nameSelfVal.stroke() ? nameSelfVal.stroke() : 2;
let nameFavoriteCount = !!nameSelfVal.stroke() ? nameSelfVal.stroke() : 3;计算姻缘值
实际计算很复杂，每种值都有讲究。但是我非常简单粗暴，直接两个姓名的比较值总和和数字10取余数，然后余数乘以10就是最终的姻缘值。
let sum = Number(nameSelfCount) + Number(nameFavoriteCount);
fateVal = (sum % 10) * 10;彩蛋
好友平时比较喜欢二次元纸片人，所以为了博好友一笑，我把好友喜欢的二次元纸片人的姓名专门放到了一个数组对象，如果输入的名字在这个对象中存在，姻缘值直接到100%。
当然了，彩蛋不止这一个，因为我和好友喜欢的二次元纸片人基本都一样，所以输入叶一一的名字，姻缘值也会直接到100%。因为我好友还不懂代码，所以这个功能她应该不知道。
var caidanNameList = ['于小小', '叶一一'];
var caidanList = ['叶秋', '叶修', '卫庄', '盖聂', '李泽言', '许墨', '白玉堂'];
if (caidanNameList.includes(nameSelfVal) && caidanList.includes(nameFavoriteVal)) {
resultBox.style.display = 'block';
resultCountNum.innerHTML = 100;
resultName.innerHTML = nameSelfVal + ' ' + nameFavoriteVal;
}好友与她的CP
后续
我不知道为啥好友的对象这么聪明，他用我的名字，也就是叶一一试了一下，发现和叶修、卫庄的姻缘值也是100%，我好友起初是不信的，然后她自己试了一下...
我正在藏家里的杯子，因为我好友说明天到我家，把我所有的杯子的把手全部掰断。然后我顺便把手办也藏起来了，我怕她找不到杯子，把情绪转移到手办上。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
