用python画雪花飘落_简单说 JavaScript实现雪花飘落效果

function snow() {

// 1、定义一片雪花模板

var flake = document.createElement('div');

// 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺

flake.innerHTML = '❆';

flake.style.cssText = 'position:absolute;color:#fff;';

//获取页面的高度相当于雪花下落结束时Y轴的位置

var documentHieght = window.innerHeight;

//获取页面的宽度，利用这个数来算出，雪花开始时left的值

var documentWidth = window.innerWidth;

//定义生成一片雪花的毫秒数

var millisec = 100;

//2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；

setInterval(function() { //页面加载之后，定时器就开始工作

//随机生成雪花下落开始时left的值，相当于开始时X轴的位置

var startLeft = Math.random() * documentWidth;

//随机生成雪花下落结束时left的值，相当于结束时X轴的位置

var endLeft = Math.random() * documentWidth;

//随机生成雪花大小

var flakeSize = 5 + 20 * Math.random();

//随机生成雪花下落持续时间

var durationTime = 4000 + 7000 * Math.random();

//随机生成雪花下落开始时的透明度

var startOpacity = 0.7 + 0.3 * Math.random();

//随机生成雪花下落结束时的透明度

var endOpacity = 0.2 + 0.2 * Math.random();

//克隆一个雪花模板

var cloneFlake = flake.cloneNode(true);

//第一次修改样式，定义克隆出来的雪花的样式

cloneFlake.style.cssText += `

left: ${startLeft}px;

opacity: ${startOpacity};

font-size:${flakeSize}px;

top:-25px;

transition:${durationTime}ms;

//拼接到页面中

document.body.appendChild(cloneFlake);

//设置第二个定时器，一次性定时器，

//当第一个定时器生成雪花，并在页面上渲染出来后，修改雪花的样式，让雪花动起来；

setTimeout(function() {

//第二次修改样式

cloneFlake.style.cssText += `

left: ${endLeft}px;

top:${documentHieght}px;

opacity:${endOpacity};

//4、设置第三个定时器，当雪花落下后，删除雪花。

setTimeout(function() {

cloneFlake.remove();

}, durationTime);

}, 0);

}, millisec);

}

snow();

用python画雪花飘落_简单说 JavaScript实现雪花飘落效果相关推荐

python画圆花_简单实现python画圆功能
本文实例为大家分享了python实现画圆功能的具体代码,供大家参考,具体内容如下 import numpy as np import matplotlib.pyplot as plt from mat ...
java雪花纷飞_下雪了 javascript实现雪花飞舞
本文实例为大家分享了雪花飞舞效果javascript实现,供大家参考,具体内容如下原理: 1.js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果. 2.js获取创建的DIV并 ...
python画爱心原理_程序员式优雅表白，教你用python代码画爱心
还能用python代码画爱心?还有这种操作?这是什么原理? 不相信python代码可以画爱心?先来一张效果图来看看效果吧!PyCharm pro Mac-PyCharm pro for Mac( Py ...
python画交互式地图_使用Python构建交互式地图-入门指南
python画交互式地图 Welcome to The Beginner's Guide to Building Interactive Maps in Python 欢迎使用Python构建交互式地 ...
用python画机器猫代码_如何用Python画一只机器猫？| 原力计划
原标题:如何用Python画一只机器猫?| 原力计划作者 | 人邮异步社区责编 | 胡巍巍出品 | CSDN博客自信心是成功的源泉,对刚入门编程行业的初级程序员来说,多敲代码多做项目就是构建自 ...
python画猪头_使用Python画小猪佩奇社会人标配
看了一些用python实现小猪佩奇画画的帖子,向自己实现下,以此记录. 社会人的标配是谁,当然是吹风机小猪佩奇身上纹. 我自己尝试画过小猪配齐但是感觉眼睛特别难画,画出来的猪头没有立体感,眼睛画不好整 ...
怎么用python画皮卡丘_实现童年宝可梦，教你用Python画一只属于自己的皮卡丘
原标题:实现童年宝可梦,教你用Python画一只属于自己的皮卡丘大数据文摘出品作者:李雷.蒋宝尚还记得小时候疯狂收集和交换神奇宝贝卡片的经历吗? 还记得和小伙伴拿着精灵球,一起召唤小精灵的中二模 ...
用python画苹果的logo_简单几步，100行代码用Python画一个蝙蝠侠的logo
转自:菜鸟学Python 简单几步,100行代码用Python画一个蝙蝠侠的logo-1.jpg (35.33 KB, 下载次数: 0) 2020-7-30 12:04 上传蝙蝠侠作为DC漫画的核心 ...
如何用python画爱心表白_程序员式优雅表白，教你用python代码画爱心
还能用python代码画爱心?还有这种操作?这是什么原理? 不相信python代码可以画爱心?先来一张效果图来看看效果吧! 用python代码画爱心的思路是怎样的? 1.怎么画心形曲线 2.怎么填满心 ...

用python画雪花飘落_简单说 JavaScript实现雪花飘落效果

用python画雪花飘落_简单说 JavaScript实现雪花飘落效果相关推荐

最新文章

热门文章