效果先看
知识点
jQuery节点操作
- append()追加节点
js属性操作
- setAttribute() 设置属性（覆盖型）
jQuery动画
- animate();//请查看api
window对象定时与间隔执行操作
- setInterval()；//间隔执行
- setTimeout()；//定时执行
- 具体查看api
页面载入事件
- $(document).ready(fn)
获取浏览器长宽（或网页长宽）
- // var ScreenWidth = document.body.clientWidth;网页宽
- var ScreenWidth = window.innerWidth-10;
- var ScreenHeight = window.innerHeight-10;
完整代码
需要准备好jQuery文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>天降粒子</title>
<script src="js/jQuery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="js/texiao.js" type="text/javascript" charset="utf-8"></script> -->
<script type="text/javascript">
$(document).ready(function(){
window.setInterval("fly()",0);//数字为秒生产（1000/10）个div
});
function fly(){
//获取屏幕(或网页)宽高
// var ScreenWidth = document.body.clientWidth;网页宽
var ScreenWidth = window.innerWidth-10;
var ScreenHeight = window.innerHeight-10;
// 生成随机id
var str = String.fromCharCode(Math.floor(Math.random()*26+65));
var num = Math.floor(Math.random()*10000);
var id = str + num;
//生成随机宽高
var length = Math.ceil(Math.random()*10);
//生成随机速度
var speed = Math.floor(Math.random()*17000+1000);
//生成随机颜色
var r = Math.floor(Math.random()*155);
var g = Math.floor(Math.random()*150);
var b = Math.floor(Math.random()*55);
var color = 'rgb('+r+','+g+','+b+')';
//添加div
$("body").append("<div id='"+id+"'></div>");
//初始随机位置
var x = -30;
var y = Math.floor(Math.random()*ScreenWidth);
var div = $("#"+id);
div[0].setAttribute("style",""+length+"px;height:"+length+"px;background-color: "+color+";position: absolute;left:"+y+"px;top:"+x+"px;border-radius:"+(length/2)+"px;");
//动画开始
div.animate({top:''+ScreenHeight+'px'},speed);//动画时长:移动速度
//动画结束删除对象
window.setTimeout(function(){
div.remove()
},speed)
}
</script>
<style>
body{
background-color: black;
}
</style>
</head>
<body>
<div id="" style="color:white">
</div>
</body>
</html>