Html+Css+js实现带有雪花飘落的许愿墙效果

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

歌谣 歌谣 新的一年就要到了 你一定有很多想许下的愿望吧 类似于许愿墙这种的,可以实现一下吗 说时迟 这是快 就开始了许愿墙的一个制作 耗时.....不断改造...升级...当然还可以更好，其他就靠兄弟们自由发挥了

效果预览

功能要点介绍

1雪花飘落的代码是js控制的，可自行修改

2许愿墙的贴纸是for循环控制的,可自行修改

3文字是datas数组控制的，可以自行修改

代码部分

雪花逻辑部分（index.js）

class Snowflake {
  constructor() {
    this.x = 0;
    this.y = 0;
    this.vx = 0;
    this.vy = 0;
    this.radius = 0;
    this.alpha = 0;
    this.reset();
  }
  reset() {
    this.x = this.randBetween(0, window.innerWidth);
    this.y = this.randBetween(0, -window.innerHeight + 672);
    this.vx = this.randBetween(-3, 3);
    this.vy = this.randBetween(2, 5);
    this.radius = this.randBetween(1, 4);
    this.alpha = this.randBetween(0.1, 0.9);
  }
  randBetween(min, max) {
    return min + Math.random() * (max - min);
  }
  update() {
    this.x += this.vx;
    this.y += this.vy;
    if (this.y + this.radius > window.innerHeight) {
      this.reset();
    }
  }
}
class Snow {
  constructor() {
    this.canvas = document.createElement('canvas');
    this.ctx = this.canvas.getContext('2d');
    document.body.appendChild(this.canvas);
    window.addEventListener('resize', () => this.onResize());
    this.onResize();
    this.updateBound = this.update.bind(this);
    requestAnimationFrame(this.updateBound);
    this.createSnowflakes();
  }
  onResize() {
    console.log(this.width, 'width');
    console.log(this.height, 'height');
    this.width = window.innerWidth;
    this.height = window.innerHeight;
    this.canvas.width = this.width;
    this.canvas.height = this.height + 672;
  }
  createSnowflakes() {
    const flakes = window.innerWidth / 4;
    this.snowflakes = [];
    for (let s = 0; s < flakes; s++) {
      this.snowflakes.push(new Snowflake());
    }
  }
  update() {
    this.ctx.clearRect(0, 0, this.width, this.height);
    for (let flake of this.snowflakes) {
      flake.update();
      this.ctx.save();
      this.ctx.fillStyle = '#FFF';
      this.ctx.beginPath();
      this.ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
      this.ctx.closePath();
      this.ctx.globalAlpha = flake.alpha;
      this.ctx.fill();
      this.ctx.restore();
    }
    requestAnimationFrame(this.updateBound);
  }
}
new Snow();

逻辑文件 （script.js）

  //转换时间格式
  function formatDated(date) {
    var date = new Date(date);
    var YY = date.getFullYear() + '-';
    var MM = (date.getMonth() + 1 < 10 ? '0' + 
(date.getMonth() + 1) : date.getMonth() + 1) + '-';
    var DD = (date.getDate() < 10 ? '0' +
(date.getDate()) :
date.getDate());
    var hh = (date.getHours() < 10 ? '0' + 
date.getHours() : 
date.getHours()) + ':';
    var mm = (date.getMinutes() < 10 ? '0' + 
date.getMinutes() :
date.getMinutes()) + ':';
    var ss = (date.getSeconds() < 10 ? '0' + 
date.getSeconds() : date.getSeconds());
    return YY + MM + DD +" "+hh + mm + ss;
}
function timeChange(){
var datas =[]
var idList=0;
var timer= setInterval(() => {
//控制文字的说明
for( i=0;i<2;i++){
    datas.push({
        id:idList,
        name:"歌谣",
        content:" 在过往的岁月中,我遇到了形形色色的人和事情。有的人坚持，有的人放弃。有的人逆袭，有的人失败。最好的种树是十年前其次是现在。很高兴遇到你,愿你的人生多姿多彩，幸福绵绵，好事连连。歌谣很棒谢谢你的一键三连",
        time:formatDated(new Date())
    })
    }
    idList++
    console.log(idList,"idList")
   if(idList==5){
    clearInterval(timer)
   }
var content = document.getElementById("content");
var zIndex = 1;
for (var i = 0; i < datas.length; i++) {
    var data = datas[i];
    var div = document.createElement("div");
    div.className = "tip1";
    div.id = "cc" + data.id;
    content.appendChild(div);
    //设置随机数
    let num=parseInt(Math.random()*10000)
    div.innerHTML = '<div class="tip_h" title="双击关闭纸条">'
            + '<div class="num">第'+num+'条'+ data.time + '</div>'
            + '<div class="close" title="关闭纸条">×</div>'
            + '<div class="clr"></div>'
            + '</div>'
            + '<div class="tip_c">'
            + data.content
            + '</div>'
            + '<div class="tip_f">'
            + '<div class="icon">'
            + '<img src="images/bpic_1.gif" alt="" title="">'
            + '</div>'
            + '<div class="name">' + data.name + '</div>'
            + '<div class="clr"></div>'
            + '</div>';
    // 控制贴纸的位置
    var x = parseInt(Math.random() * 1500)+200;
    var y = parseInt(Math.random() * 700);
    div.style.left = x + "px";
    div.style.top = y + "px";
    div.onclick = function () {
        zIndex++;
        this.style.zIndex = zIndex;
    };
    var closeDiv = div.children[0];
    closeDiv.ondblclick = function () {
        this.parentNode.style.display = "none";
    };
    var x = closeDiv.children[1];
    x.onclick = function () {
        this.parentNode.parentNode.style.display = "none";
    };
}
},2000)
}
window.onload = timeChange;

样式部分（style.css）

body {
    margin: 0 auto;
    padding: 0px;
    font-size: 12px;
    background: url(../images/bg.gif) repeat center 36px;
    text-align: center;
    background-color: #c30230;
}  
#content .tip1, #content .tip2, #content .tip3, #content 
.tip4, #content .tip5, #content .tip6, #content .tip7, #content .tip8 {
    position: absolute;
    width: 227px;
    left: 200px;
    top: 100px;
}
#content .tip1 .tip_h {
    background: url(../images/tip1_h.gif) no-repeat left top;
}
#content .tip1 .tip_h, #content .tip2 .tip_h, #content .tip3 .tip_h, 
#content .tip4 .tip_h, #content .tip5 .tip_h, #content .tip6 .tip_h,
 #content .tip7 .tip_h, #content .tip8 .tip_h {
    width: 227px;
    padding-top: 45px;
    height: 23px;
    text-align: left;
    cursor: move;
}
#content .tip1 .tip_c {
    background: url(../images/tip1_c.gif) repeat-y;
}
#content .tip1 .tip_c, #content .tip2 .tip_c, #content .tip3 .tip_c, 
#content .tip4 .tip_c, #content .tip5 .tip_c, #content .tip6 .tip_c,
 #content .tip7 .tip_c, #content .tip8 .tip_c {
    width: 200px;
    padding-left: 12px;
    padding-right: 15px;
    min-height: 40px;
    text-align: left;
    line-height: 20px;
    max-height: 160px;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
}
#content .tip1 .tip_f {
    background: url(../images/tip1_f.gif) no-repeat left top;
}
#content .tip1 .tip_f, #content .tip2 .tip_f, #content .tip3 .tip_f,
 #content .tip4 .tip_f, #content .tip5 .tip_f, #content .tip6 .tip_f, 
#content .tip7 .tip_f, #content .tip8 .tip_f {
    width: 227px;
    height: 53px;
    padding-top: 20px;
}
#content .close, #content .close2 {
    float: left;
    font-size: 12px;
    cursor: pointer;
    color: #000000;
}
.clr {
    clear: both;
    overflow: auto;
    display: block;
    height: 0px;
}
#content .icon {
    float: left;
    width: 35px;
    padding-left: 15px;
    height: 35px;
    text-align: center;
}
#content .name {
    float: right;
    padding-right: 15px;
    text-align: right;
    font-size: 14px;
    line-height: 35px;
    color: #C0F;
}
#content .num {
    float: left;
    padding-left: 7px;
    width: 195px;
}

骨架部分（html）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>歌谣许愿墙</title>
    　<link rel="stylesheet" type="text/css" href="./css/style.css" />
    
</head>
<body>
<div id="content">
</div>
<script  src="./js/index.js"></script>
<script  src="./js/script.js"></script>
<script>
  

</script>
</body>
</html>

效果演示

总结

对于南方的人来说 是很少看见雪花的 这篇就用来祝福大家新年快乐了~

下载地址

下载地址