目錄

前言

導語

效果預覽

功能要點介紹

代碼部分

雪花邏輯部分（index.js）

邏輯文件 （script.js）

樣式部分（style.css）

骨架部分（html）

效果演示

總結

下載地址

---

前言

我是歌謠 我有個兄弟 巔峰的時候排名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>

效果演示

?

總結

對于南方的人來說 是很少看見雪花的 這篇就用來祝福大家新年快樂了~

下載地址

Html+Css+js實現帶有雪花飄落的許愿墻效果

總結

以上是生活随笔為你收集整理的Html+Css+js实现带有雪花飘落的许愿墙效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。