中秋佳节│以码为笔，绘合家团圆

叶秋学长

已于 2022-09-05 00:33:34 修改

阅读量2.5w

点赞数 34

分类专栏：中秋节系列文章标签：前端 java html 中秋节

于 2022-09-05 00:29:09 首次发布

本文链接：https://blog.csdn.net/m0_63722685/article/details/126671232

版权

中秋节系列专栏收录该内容

1 篇文章 0 订阅

订阅专栏

✅作者简介：

全栈领域新星创作者，阿里云专家博主，退役复学在校学生

💕秋招推荐专栏：

秋招面试题

阿里巴巴最新面试题

临近秋招，希望大家度过美好的中秋节时，也能通过学长的面经学习，收获满意的offer~~

再次渡入繁世，人潮汹涌，眼里茫然，信仰永恒，皆为华夏

中秋节来历

中秋节，又称祭月节、月光诞、月夕、秋节、仲秋节、拜月节、月娘节、月亮节、团圆节等，是中国民间的传统节日。中秋节源自天象崇拜，由上古时代秋夕祭月演变而来。中秋节自古便有祭月、赏月、吃月饼、看花灯、赏桂花、饮桂花酒等民俗，流传至今，经久不息中秋节起源于上古时代，普及于汉代，定型于唐朝初年，盛行于宋朝以后。中秋节是秋季时令习俗的综合，其所包含的节俗因素，大都有古老的渊源。中秋节以月之圆兆人之团圆，为寄托思念故乡，思念亲人之情，祈盼丰收、幸福，成为丰富多彩、弥足珍贵的文化遗产。

节日发展

中秋节源自天象崇拜，由上古时代秋夕祭月演变而来。祭月，在我国是一种十分古老的习俗，是古代我国一些地方古人对“月神”的一种崇拜活动。在廿四节气的秋分时节，是古老的“祭月节”。中秋节则是由传统的“秋分祭月”而来。祭月作为民间节日重要的祭礼之一，逐渐演化为赏月、颂月等活动。中秋节普及于汉代，汉代是我国南北各地的经济文化交流融合时期，各地文化上的交流使节俗融合传播。唐代时中秋风俗在我国北方地区已流行。中秋节成为官方认定的全国性节日，大约是在唐代。北宋时期，正式定阴历八月十五为中秋节。明清时期，岁时节日中世俗的情趣愈益浓厚。

名族特色

以码为笔，绘合家团圆

临近中秋，叶秋学长决定弄个一家图案吃着月饼，赏着圆月，伴随着暖暖的祝福一字字打印出来，氛围感完美。设计好效果图，简单的一段JS代码实现中秋效果，再在主页加个定时器，中秋当天加载上这段JS，完美！

代码展示：

(function(){
  
  //打印机效果
  function text(list, key) {
    var arr = [];
    for (var i = 0; i < list.length; i++) {
      var nowArr = list[i].split('');
      arr = arr.concat(nowArr);
      arr.push('<br/>');
    }
    $('#midMoon .text').append('<p></p>');
    var index = 0;
    var obj = setInterval(function() {
      if (index < arr.length) {
        $('#midMoon .text p').html($('#midMoon .text p').html() + arr[index]);
      }
      index++;
    }, 100);
  }
  // 加载出图片、背景
  function createPop() {
      var html =
      '<div id="midMoon" class="animated fadeIn" style="background:#28318a;height: 100%;width: 100%;position: fixed;top: 0;background-image: url(\'file:///D:/work/hr/festival/mid-autumn/family.png\'); background-size: 85%;background-repeat: no-repeat;background-position:center bottom;"><img src="file:///D:/work/hr/festival/mid-autumn/moon.png" style="width:100%;" class="animated slideInDown"><div class="text" style="text-align: center;margin-top:-50px;font-size:21px;color:#fff;font-family:KaiTi,PingFang SC,San Francisco;"></div></div>';
      $('#app').append(html);
  }
  createPop();
  //暖心祝福
  text(['又是一年中秋到,','叶秋学长祝您中秋快乐！']);
  // 4秒后动画消失
  // setTimeout(() => {
  // 	$('#midMoon').css('display', 'none');
  // }, 4000);
})()