我正在参加「兔了个兔」创意投稿大赛,详情请看:「兔了个兔」创意投稿大赛
前言
送春联啦,送春联啦,送春联啦,重要的事情说三遍。
每逢春节,无论城市还是农村,家家户户都要挑漂亮的红春联贴于门上,辞旧迎新,增加喜庆的节日气氛。 离春节只剩一周,,路边已经开始挂起了红灯笼,挨家挨户也贴上了春联和福字......
身为当代程序员,深谙自己仅仅粗懂文墨,也不会毛笔书法,于是我用代码写几幅春联,可以自己写春联,也可以随机生成一副春联~~~
效果展示
代码展示
HTML代码:
<div class="fuzi">
<img src="./imgs/fuzi.png" alt="">
</div>
<div class="hengpi"></div>
<div class="duilian d1"></div>
<div class="duilian d2"></div>
<div class="input-wrap">
<input type="text" id="shanglian-inp" maxlength="12" placeholder="请输入上联">
<input type="text" id="xialian-inp" maxlength="12" placeholder="请输入下联">
<input type="text" id="hengpi-inp" maxlength="6" placeholder="请输入横批">
<button class="btn2" id="btn2">随机获取春联</button>
</div>
</div>
控制文字上下排列:
writing-mode:vertical-lr;
利用计时器依次挨个显示文字:
let text = textArr[tagIndex];
let tagText = text.split(""); // 把文本内容转为数组
let index = 0;
// 利用计时器依次挨个显示文字
myset = setInterval(function () {
arr[tagIndex].innerHTML += tagText[index];
index++;
// 当一个标签的文字显示完毕时
if (index >= tagText.length) {
clearInterval(myset);
// 准备显示下一个标签的文字
tagIndex++;
if (tagIndex >= arr.length) {
return false;
}
showText(arr[tagIndex]);
}
}, 200);
}
在线演示
结束语
为春节增添喜气的气氛。春联都是红底黑字或者红底金字,加之各种纹饰,符合新春的喜庆和欢乐,为春节增添了喜庆的气氛,表达美好的祝愿和愿景。春联中的纹饰,如鱼,寓意年年有余;美好的语言,如“天增岁月人增寿,春满乾坤福满门”等美好的祝福语表达了人们对来年的美好渴望。
最后祝福大家新年快乐,兔年吉祥~~~