js实现漂亮的雪花飘落效果
效果如下：
雪花飘落
四个按钮控制雪花的生成与停止
关键代码：
这个代码还有许多不足，希望大佬指正
var W = window.innerWidth; //获取屏幕的宽高var H = window.innerHeight;var add_snow = null; //把add_snow定时器全局变量，方便删除var angle = 0;//增加参数var flag = false; //是否有雪花元素//增加雪花function add() {for (var i = 1; i <= 100; i++) {var mydiv = document.createElement("div");var size = Math.random()*24+1+"px";mydiv.style.width = sizemydiv.style.height = sizemydiv.style.backgroundImage="url('images/white-snow.png')";mydiv.style.backgroundSize="cover";mydiv.style.position = "absolute";mydiv.style.left = Math.random() * (W-50) + "px";mydiv.style.top = Math.random() * (H-50) + "px";flag = true;document.body.appendChild(mydiv);}}//开始雪花沈阳function start(){if (add_snow){}else {add_snow = setInterval(function (){update()},100)}}//删除雪花元素function del() {var allSnow = document.getElementsByTagName("div");var length = allSnow.length;for (var i = 0; i < length; i++) {//document.body.removeChild(allSnow[i]); // 删除body的子节点allSnow[0].remove();// 直接将该元素删// allSnow[i].style.display = "none"; // 通过设置元素为不可见来模拟删除}flag = falseclearInterval(add_snow)add_snow = null;}//雪花的下落效果function update(){if (flag){angle += 0.01;var allSnow = document.getElementsByTagName("div");var length = allSnow.length;for (var i = 0; i < length; i++) {var x = Math.sin(angle)*2var y = Math.cos(angle+parseFloat(allSnow[i].style.height.slice(0,-2)))+1+parseFloat(allSnow[i].style.height.slice(0,-2))/2allSnow[i].style.left = x+parseFloat(allSnow[i].style.left.slice(0,-2)) + "px";allSnow[i].style.top = y +parseFloat(allSnow[i].style.top.slice(0,-2))+ "px";var x1 = x+parseFloat(allSnow[i].style.left.slice(0,-2));var y1 = y +parseFloat(allSnow[i].style.top.slice(0,-2));if(x1 > W-50 || x1 < 0|| y1 > H-50){allSnow[i].style.left = Math.random() * (W-50) + "px";allSnow[i].style.top = 20 + "px";}}}else {add()}}//暂停雪花效果function stop(){clearInterval(add_snow)add_snow = null;}
项目的下载地址：
/Try-your-best-to-do/snow
点击进入
