核心提示：雪花下落+雪花颜色随机+形状随机想做一个有input用户输入参数的功能，目前还没能成功，有几个小问题，这个只能在js里自己改动*//*js部分*/!function(){window.fn={};fn...
雪花下落+雪花颜色随机+形状随机
想做一个有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 flakep=document.createElement("p");
document.body.appendChild(flakep);
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+'%';
flakep.style.cssText="border-radius:"+borderRadius+";position:absolute;width:"+size+"px;height:"+size+"px;background:"+flakeBgcolor()+";opacity:"+flakeOpacity+";left:"+left+"px;";
dropSnowanimate(flakep);
},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="https://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>
