返回

2022年的红包我包了,豪气冲天红包雨!

前端

新年伊始,万象更新,掘金社区为回馈各位掘友一直以来的支持,特推出【红包雨】活动,让大家在掘金也能过一个红红火火的大年!

大年初一到十五,每天都有红包雨,每天发放总额10000元红包,先到先得,发完为止。红包金额随机,最高888元,更有神秘大奖等你来拿!

参与方式也非常简单,只要在掘金社区发布原创文章,话题选择“春节创意投稿大赛”,就有机会获得红包奖励。活动期间,掘金社区还将评选出最具创意、最具人气的文章,颁发丰厚大奖。

本次活动以“PK创意,闹新春”为主题,鼓励大家发挥想象力,创作出新颖独特的新春创意作品。作品类型不限,可以是文章、代码、视频、图片等,只要与春节主题相关,都欢迎大家踊跃投稿。

掘金社区一直以来都是技术人交流学习的平台,在这个新春佳节,我们希望通过“红包雨”活动,让大家感受到掘金的温暖和祝福。同时也希望大家在新的一年里,继续在掘金社区分享知识,交流经验,共同进步。

最后,预祝大家春节快乐,红包拿不停!

附:源码

// 模拟红包雨效果
const红包雨=()=>{
  // 创建红包元素
  const红包=document.createElement("div");
  红包.className="红包";
  // 设置红包内容
  红包.innerText="恭喜发财,大吉大利!";
  // 设置红包样式
  红包.style.position="absolute";
  红包.style.width="100px";
  红包.style.height="100px";
  红包.style.borderRadius="50%";
  红包.style.backgroundColor="red";
  红包.style.color="white";
  红包.style.fontSize="20px";
  红包.style.textAlign="center";
  红包.style.lineHeight="100px";
  // 获取视口宽高
  const{clientWidth,clientHeight}=document.documentElement;
  // 设置红包初始位置
  红包.style.left=`${Math.random()*clientWidth}px`;
  红包.style.top=`${Math.random()*clientHeight}px`;
  // 设置红包下落动画
  红包.style.animation="红包下落 3s linear";
  // 添加红包到页面中
  document.body.appendChild(红包);
  // 移除红包
  setTimeout(()=>{
    红包.remove();
  },3000);
};
// 生成红包雨
const红包雨生成器=()=>{
  // 间隔时间
  constinterval=500;
  // 红包数量
  const红包数量=10;
  // 创建红包
  for(leti=0;i<红包数量;i++){
    setTimeout(()=>{
      红包雨();
    },interval*i);
  }
};
红包雨生成器();