新年送春联啦~~~

543 阅读1分钟

我正在参加「兔了个兔」创意投稿大赛,详情请看:「兔了个兔」创意投稿大赛

前言

送春联啦,送春联啦,送春联啦,重要的事情说三遍。

每逢春节,无论城市还是农村,家家户户都要挑漂亮的红春联贴于门上,辞旧迎新,增加喜庆的节日气氛。 离春节只剩一周,,路边已经开始挂起了红灯笼,挨家挨户也贴上了春联和福字......

身为当代程序员,深谙自己仅仅粗懂文墨,也不会毛笔书法,于是我用代码写几幅春联,可以自己写春联,也可以随机生成一副春联~~~

效果展示

image.png

代码展示

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);
    }

在线演示

结束语

为春节增添喜气的气氛。春联都是红底黑字或者红底金字,加之各种纹饰,符合新春的喜庆和欢乐,为春节增添了喜庆的气氛,表达美好的祝愿和愿景。春联中的纹饰,如鱼,寓意年年有余;美好的语言,如“天增岁月人增寿,春满乾坤福满门”等美好的祝福语表达了人们对来年的美好渴望。

最后祝福大家新年快乐,兔年吉祥~~~