目錄

• 導語
• 效果預覽
• 功能要點介紹
• 程式碼部分
• 雪花邏輯部分（index.）
• 邏輯檔案 （script.js）
• 樣式部分（style.）
• 骨架部分（html）
• 效果演示

導語

歌謠 歌謠 新的一年就要到了 你一定有很多想許下的願望吧 類似於許願牆這種的,可以實現一下嗎 說時遲 這是快 就開始了許願牆的一個製作 耗時.....不斷改造...升級...當然還可以更好，其他就靠兄弟們自由發揮了

效果預覽

功能要點介紹

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,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,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' +Renih
(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 =[]
vwww.cppcns.com
 
ar 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;
}  
#contenthttp://www.cppcns.com .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;
    colwww.cppcns.comor: #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" rel="external nofollow"  />
    
</head>
<body>
<div id="content">
</div>
<script  src="./js/index.js"></script>
<script  src="./js/script.js"></script>
<http://www.cppcns.com;script>
  
 
</script>
</body>
</html>

效果演示

到此這篇關於基於Script實現雪花許願牆特效的文章就介紹到這了,更多相關JavaScript雪花許願牆特效內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！