实现

实现第一步就是先花页面，页面局部我们分为两步：

左右对联。首先我们利用flex布局将左右对联画出来，准备好喜欢的图片当做背景图片，增加观赏性。

   .wrapper {
        width: 800px;
        height: 500px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: gainsboro;
        background: url(./images/background.jpg);
        background-size: 100%;
      }

     <div class="wrapper">
      <div class="vertical left"></div>
      <div class="vertical right"></div>
    </div>

对联文字。左右对联中的文字需要竖着展示，依旧设置flex弹性布局，设置flex-direction: column，让文字在纵轴上进行排列。注意，这个时候每个文字都需要用一个标签去包裹，后面动态渲染时我们会体现出来。

      .vertical {
        width: 120px;
        height: 450px;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;
        background: url(./images/column.jpg) no-repeat;
        background-size: 120px 450px;
        box-sizing: border-box;
        padding-top: 80px;
      }

页面画好了，接下来实现文字动态渲染事件，这里我们采用innerHTML+setInterval方法实现。确定好要渲染的对联，声明一个定时器，声明一个str去拼接对联中的每一个字，利用substr方法去获取每一个字，每获取一次将对联容器中的innerHTML换一次。之所以用inerHTML就是我们上面提到的文字要用标签包裹，达到布局效果。

   const leftText = '卯时春入户';
      const rightText = '兔岁喜盈门';
      const leftEle = document.getElementsByClassName('left')[0];
      const rightEle = document.getElementsByClassName('right')[0];
      let i = 0;
      let str = '';
      function playVertical(text, ele) {
        const timer = setInterval(() => {
          if (i >= text.length) {
            clearInterval(timer);
            str = '';
            i = 0;
            return;
          }
          str += `<div class="text">${text.substr(i, 1)}</div>`;
          ele.innerHTML = str;
          i++;
        }, 1000);
      }
      playVertical(leftText, leftEle);

上面实现了左边的文字渲染，右边的渲染我们简单粗暴利用延时器去执行文字渲染函数，延迟秒数就是左边文字长度乘以1000。

     const rightTimer = setTimeout(() => {
        playVertical(rightText, rightEle);
        clearTimeout(rightTimer);
      }, leftText.length * 1000);

上述代码中定时器、延时器都用常量声明了一下，并在函数完成后清除了，因为它两是闭包，不能被垃圾回收机制回收，还是养成习惯，用完清除。

总结

以上就是利用css+js实现春联的全部过程。春联上的祝福送给大家，新的一年元气满满。

[兔了个兔]——兔年春联

实现

总结