大家好，我是Ned👀，一个刚刚入门前端未满两年的大三小学生🌹未来路还长🎉, 一起努力加油吧❤~
前言
各位掘友们，Ned在这里给各位兄弟姐妹们拜年啦~
新春这个文章说实话，经历了蛮多的，一开始其实我是想用three.js做个老虎的，但是呢，失败了。废了好几个小时才搞出来两个虎爪，害，都怪我three.js的能力连基本上手都算不上，没咋玩明白，下次一定给大家做点好康的~
于是我来实现我的第二个创意了，程序员对联，对联的来源于github上一博主(仓库地址)，我看他仓库里写了这么多创意满满的对联，我就拿来在过年之时，跟掘友们分享一下~
还没领到对联的快去抽取属于自己的新春对联吧~
抽取地址： 抽取你的新春对联
对联
我是将那位博主的对联做成了数组来存储：大致是这些字段
英文不好，拼音来凑，见谅，见谅
{
title:'作者有话说',
heng:'快点去抽',
top:'想到啥抽到啥快点抽',
bottom:'抽不到抽不到气死你'
}大致的排版有横批、上下联、抽取按钮、title标签，我是用cdn引入vue来做的，按钮跟标签都是直接拉的组件hhh，这么说来我好像只是付出了些许创意？
这个css写的真是太辣鸡了，就不放出来丢人了，我看百度图片里对联都差不多样子，嗯，大致也许它就长这样子！，对没错
来抽一发
点击网址，点击按钮：点击抽取你的新春对联，即可获得程序员的专属对联，有个坏处是字体加载太慢了(可能跟我垃圾服务器的垃圾带宽有关系)
随机数生成器
利用简单的一个随机数生成器生成处于[0,对联数组长度]的随机数
randomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
break;
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
break;
default:
return 0;
break;
}
},抽取函数
将数组值赋值到绑定对象即可，特别的简单~
getDuilian() {
let num = this.randomNum(0,this.duilians.length)
this.yours = this.duilians[num]
},展开效果
后加的一个展开效果，就是一个改变高度的动画，为了不让字体因为高度变化被挤到别的地方所以要加overflow: hidden,word-break: keep-all两个属性
.ani{
-webkit-animation: ani 1.5s linear both;
animation: ani 1.5s linear both;
}
@keyframes ani {
from{
max-height: 0;
}
to {
max-height: 100%;
}
}为了能够每次点击抽取都能触发一次动画，所以用一个三目运算符绑定他的class：ani?'ani':''，在抽取函数里调整好true or false 即可。
对联数据
一共有21种对联哦！加上作者有话说一共22个，哈哈哈，掘友们，你们抽到心仪的了嘛~
来看看都有啥吧：
{
title: '相亲版',
top: '捋顺红橙黄绿，不得美人',
bottom: '远离世纪佳缘，方得始终',
heng: '欣欣向蓉'
},
{
title: '年度版',
top: '说南道北，几个变量难取名',
bottom: '思前想后，一行注释上头条',
heng: '穷逼 VIP'
},
{
title: '生活版',
top: '上班写 JavaScript 处处 $ 高亮',
bottom: '回家撸 PHP 行行 new 对象',
heng: '见码眼开'
},
{
title: '苦逼版',
top: '数据库异常屡屡 500',
bottom: '浏览器崩溃句句 400',
heng: '删库跑路'
},
{
title: '辛酸版',
top: '敲一夜代码，流下两三行泪水，掏空四肢五体，六杯咖啡七桶泡面，还有八个测试九层审批，可谓十分艰难；',
bottom: '经十年苦读，面过九八家公司，渐忘七情六欲，五年相亲四个对象，乃知三番加班两次约会，新年一鸣惊人',
heng: '谁能懂我'
},
{
title: '祈福版',
top: '文档注释一应具全',
bottom: '脊柱腰椎早日康复',
heng: '鞠躬尽瘁'
},
{
title: '生活版',
top: '西瓜包子带一斤三个',
bottom: '大米白面少二十四克',
heng: '1024'
},
{
title: '新手程序员',
top: '红红火火过大年',
bottom: '烫烫屯屯码三天',
heng: '!@#$%^&*()'
},
{
title: '高级程序员',
top: '坐北朝南一个需求满足东西',
bottom: '思前想后几行代码安抚中央',
heng: '一代键客'
},
{
title: '学生版',
top: '读码上万行',
bottom: '下键如有神',
heng: '运鼠帷幄'
},
{
title: '送产品版（和平版）',
top: '谈业务定需求必能安内攘外',
bottom: '促稳定寻发展才好升职加薪',
heng: '团结一致'
},
{
title: '老板送程序员版',
top: '百个功能愿你一气呵成',
bottom: '一年年终奖你十月工资',
heng: '画饼充饥'
},
{
title: '老板送程序员版',
top: '百个功能愿你一气呵成',
bottom: '一年年终奖你十月工资',
heng: '画饼充饥'
},
{
title: '隔壁老王送程序员',
top: '少赚钱多说话，免得死得早',
bottom: '别加班勤陪聊，不会戴绿帽',
heng: '人艰不拆'
},
{
title: '前端版',
top: '微博知乎占头条谁与争锋',
bottom: '桌面移动待前端一统江湖',
heng: '瞬息万变'
},
{
title: '后台版',
top: '存数据订接口如探囊取物',
bottom: '锁异步释内存似手到擒来',
heng: '后方安定'
},
{
title: '梦想版',
top: '抬头不见八阿哥',
bottom: '低头迎娶白富美',
heng: '人生巅峰'
},
{
title: '形象版',
top: '格子衣，牛仔裤，背跨双肩包',
bottom: '文化衫，运动鞋，眼戴八百度',
heng: '员媛猿'
},
{
title: '社区',
top: '一年三百四十五天天天打代码',
bottom: '十兆九千八百七行行行见bug',
heng: '生不如死'
},
{
title: '娶你为妻可好',
top: '待我代码编成',
bottom: '娶你为妻可好',
heng: '没钱买房'
},最后
其实这个灵感主要来源于网上基于cnn的对对联的人工智能，但是py咱也写不出来，只好换个创意，搞一个咱程序员的对联~
到这里整个程序员对联的介绍就完事了，再次提前给各位拜年了！
祝大家工作顺利，身体健康，万事如意！
