雪花飘落代码java_JavaScript实现雪花飘落效果本⽂实例为⼤家分享了JavaScript实现雪花飘落效果的具体代码，供⼤家参考，具体内容如下
⼀、实现功能
(1)添加⼀个背景图⽚；
(2)⽤js语⾔实现雪花飘落效果；
(3)使⽤setInterval定时器每800毫秒创建⼀个雪花；
(4)把每⼀个雪花作为参数传进动态下落的⽅法中即可。
⼆、展⽰
1.代码展⽰
代码如下：
body {
background-color: #000;
/*防⽌出现向下滚动条*/
overflow: hidden;
}
function snow() {
// 1、定义⼀⽚雪花模板
var flake = ateElement('div');
// 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺
flake.innerHTML = '❅';
flake.style.cssText = 'position:absolute;color:#fff;';
//获取页⾯的⾼度 相当于雪花下落结束时Y轴的位置
var documentHieght = window.innerHeight;
//获取页⾯的宽度，利⽤这个数来算出，雪花开始时left的值
var documentWidth = window.innerWidth;
//定义⽣成⼀⽚雪花的毫秒数
var millisec =10;
//2、设置第⼀个定时器，周期性定时器，每隔⼀段时间(millisec)⽣成⼀⽚雪花；
setInterval(function() { //页⾯加载之后，定时器就开始⼯作
//随机⽣成雪花下落 开始 时left的值，相当于开始时X轴的位置
html图片展示特效
var startLeft = Math.random() * documentWidth;
//随机⽣成雪花下落 结束 时left的值，相当于结束时X轴的位置
var endLeft = Math.random() * documentWidth;
/
/随机⽣成雪花⼤⼩
var flakeSize = 3 + 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() {
}, durationTime);
}, 0);
}, millisec);
}
snow();
2.效果展⽰
代码如下(⽰例)：
总结
学会了使⽤JS语⾔实现雪花飘落特效效果；运⽤了定时器控制雪花出现的速度；
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持脚本之家。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。