js实现漂亮的雪花飘落效果

最新推荐文章于 2022-12-30 09:00:00 发布

Chasing stars

最新推荐文章于 2022-12-30 09:00:00 发布

阅读量887

点赞数

文章标签：雪花飘落

本文链接：https://blog.csdn.net/weixin_43520670/article/details/110339213

版权

本文介绍如何利用JavaScript实现一个美观的雪花飘落效果，包括控制雪花生成和停止的按钮功能。通过阅读，你可以了解到关键代码实现细节，并可从项目GitHub仓库中下载源代码进行实践。

摘要由CSDN通过智能技术生成

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 = size
        mydiv.style.height = size
        mydiv.style.backgroundImage="url('images/white-snow.png')";
        mydiv.style.backgroundSize