基于JavaScript實現(xiàn)雪花許愿墻特效
更新時間：2022年01月26日 08:44:14 作者：前端大歌謠
新的一年就要到了，你一定有很多想許下的愿望吧!今天小編就為大家?guī)砹艘粋€基于Html+CSS+JavaScript實現(xiàn)的帶雪花的許愿墻特效，需要的可以了解一下
導語
歌謠 歌謠 新的一年就要到了 你一定有很多想許下的愿望吧 類似于許愿墻這種的,可以實現(xiàn)一下嗎 說時遲 這是快 就開始了許愿墻的一個制作 耗時.....不斷改造...升級...當然還可以更好，其他就靠兄弟們自由發(fā)揮了
效果預覽
功能要點介紹
1雪花飄落的代碼是js控制的，可自行修改
2許愿墻的貼紙是for循環(huán)控制的,可自行修改
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:" 在過往的歲月中,我遇到了形形色色的人和事情。有的人堅持，有的人放棄。有的人逆襲，有的人失敗。最好的種樹是十年前其次是現(xiàn)在。很高興遇到你,愿你的人生多姿多彩，幸福綿綿，好事連連。歌謠很棒謝謝你的一鍵三連",
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" rel="external nofollow" />
</head>
<body>
<div id="content">
</div>
<script src="./js/index.js"></script>
<script src="./js/script.js"></script>
<script>
</script>
</body>
</html>效果演示
到此這篇關于基于JavaScript實現(xiàn)雪花許愿墻特效的文章就介紹到這了,更多相關JavaScript雪花許愿墻特效內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
下面小編就為大家?guī)硪黄趈s中this和event 的區(qū)別(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了js中如何精確計算加法和減法,需要的朋友可以參考下2014-03-03
JavaScript遍歷實現(xiàn)DFS算法和BFS算法
DFS(Depth?first?search)稱作「深度優(yōu)先遍歷」，BFS(Breadth?first?search)稱作「廣度優(yōu)先遍歷」。本文將通過JavaScript遍歷實現(xiàn)這兩種算法，需要的可以參考一下2023-01-01
在 JavaScript 中,事件是非常核心的概念,它們使得我們可以設計交互性強的網頁應用,本文主要和來大家聊聊如何在JavaScript中自定義事件,感興趣的可以了解下2024-04-04
JavaScript實現(xiàn)棧結構Stack過程詳解
這篇文章主要介紹了JavaScript實現(xiàn)棧結構Stack過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-03-03
Electron autoUpdater實現(xiàn)Windows安裝包自動更新的方法
這篇文章主要介紹了Electron autoUpdater實現(xiàn)Windows安裝包自動更新的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了js實現(xiàn)跨域訪問的三種方法，包括基于iframe實現(xiàn)跨域、基于script標簽實現(xiàn)跨域以及后臺代理方式 ，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了微信小程序錯誤this.setData報錯及解決過程,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細介紹了Bootstarp基本模版學習教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
JavaScript的面向對象(一)...2006-11-11