前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >中秋佳节│以码为笔,绘合家团圆

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

作者头像
用户10216580
发布2022-12-06 14:32:17
2920
发布2022-12-06 14:32:17
举报
文章被收录于专栏:一叶知秋一叶知秋

✅作者简介:             全栈领域新星创作者,阿里云专家博主,退役复学在校学生 💕秋招推荐专栏: 秋招面试题 阿里巴巴最新面试题 临近秋招,希望大家度过美好的中秋节时,也能通过学长的面经学习,收获满意的offer~~

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


目录

中秋节来历

节日发展

名族特色

以码为笔,绘合家团圆

代码展示: 

页面展示:


中秋节来历

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


节日发展

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


名族特色


以码为笔,绘合家团圆

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

代码展示: 

代码语言:javascript
复制
(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);
})()

页面展示:

页面展示
页面展示

码文不易,希望得到小伙伴们的支持

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-09-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 中秋节来历
  • 节日发展
  • 名族特色
  • 以码为笔,绘合家团圆
    • 代码展示: 
      • 页面展示:
      • 码文不易,希望得到小伙伴们的支持
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档