雪花下落+雪花颜色随机+形状随机

这是一个使用JavaScript实现的雪花飘落特效,具有随机大小、颜色和形状。用户可以通过修改JavaScript代码来调整雪花下落速度、生成频率等参数,但目前还无法通过input输入参数。示例代码包括JS和HTML部分,背景色设定为黑色。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

/*

想做一个有input用户输入参数的功能,目前还没能成功,有几个小问题,这个只能在js里自己改动

*/




/*js部分*/

!function()
{
window.fn={};
fn.snow=function(options){
var documentWidth=document.documentElement.clientWidth;
var documentHeight=document.documentElement.clientHeight;

var defaults={
sizeMax:25,
sizeMin:10,
newOn:150,
speed:10  //px
}
var option=options||defaults ;  
var timer=setInterval(function()
{
var      flakeDiv=document.createElement("div");
document.body.appendChild(flakeDiv);
var flakeOpacity=Math.random()+0.3;
var left=parseInt(Math.random()*documentWidth);
var size=(Math.random()*(option.sizeMax-option.sizeMin))+option.sizeMin;
var  flakeBgcolor=function()
{
var bgcolor=new Array("LightPink","Pink","HotPink","DeepPink","Orchid","Plum","LightSkyBlue","DeepSkyBlue","CornflowBlue","Cyan","Teal","SpringGreen","Gold","GreenYellow","Wheat","#1AFD9C","#FFAF90");      
//alert(bgcolor);
return bgcolor[parseInt(Math.random()*bgcolor.length)];
}
var borderRadius=Math.random()*50+'%'+' '+Math.random()*50+'%'+' '+Math.random()*50+'%'+' '+Math.random()*50+'%';
flakeDiv.style.cssText="border-radius:"+borderRadius+";position:absolute;width:"+size+"px;height:"+size+"px;background:"+flakeBgcolor()+";opacity:"+flakeOpacity+";left:"+left+"px;";

dropSnowanimate(flakeDiv);
},option.newOn);
function dropSnowanimate(obj){
var  top=0;
var dropSnow=setInterval(function()
{
top+=option.speed;   //top=0+10
obj.style.marginTop=top+'px';
if(top>=parseInt(documentHeight))
{
clearInterval(dropSnow);
flakeA.removeChild(obj);
}
},23);

}
}

}()



/*html部分*/

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">


<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
*{
margin:0;
padding:0;
background:black;
}
</style>
   
</head>


<body></body>


 <script type="text/javascript" src="mysnow.js" ></script>
<script>
fn.snow();
</script>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值