下雪效果
- 作者: XX94562671
- 来源: 51数据库
- 2021-08-22
下雪效果
1 <style>
2 * {
3 margin: 0;
4 padding: 0;
5 }
6 #box {
7 width: 1000px;
8 height: 600px;
9 background: #000000;
10 border: 5px solid red;
11 margin: 20px auto;
12 position: relative;
13 }
14 img{
15 position: absolute;
16 }
17 </style>
18
19 <body>
20 <div id="box"></div>
21 </body>
22 </html>
23 <script src="public.js"></script>
24 <script>
25 /*
26 分析构造函数 snow
27 属性 ： img box
28 方法 ： 雪花创建init 移动
29 */
30 window.onload = function(){
31 setinterval( function(){
32 new snow().init().move();
33 },800 )
34 }
35 function snow(){
36 this.img = document.createelement("img");
37 this.box = $id("box");
38 this.init = function(){//雪花创建
39 this.img.src = "img/snow.png";
40 this.box.appendchild( this.img );
41 this.img.width=this.img.height = rand(10,15);
42 this.img.style.left = rand(0,this.box.offsetwidth-this.img.offsetwidth) + "px";
43 this.img.style.top = -this.img.offsetheight+"px";
44 return this;
45 }
46 this.move = function(){
47 //定义雪花移动的速度
48 var speedx = -rand(1,5);
49 var speedy = rand(1,5);
50 this.timer = setinterval( function(){
51 this.img.style.left = this.img.offsetleft + speedx + "px";
52 this.img.style.top = this.img.offsettop + speedy + "px";
53 if( this.img.offsetleft < -this.img.offsetwidth || this.img.offsettop > this.box.offsetheight ){
54 //clearinterval( this.timer );
55 this.img.remove();
56 }
57 }.bind(this),30 )
58 }
59 }
60 </script>
public.js
function $id(id){//给我一个id名，返回一个这个id的元素
return document.getelementbyid(id);
}
//求随机数
function rand(min,max){
return math.round(math.random()*(max - min) + min);
}
//随机的16进制颜色
function getcolor(){
var str = "0123456789abcdef";//十六进制字符串
var color = "#";
for(var i = 0; i <= 5; i++){//取6个数
color += str.charat(rand(0,15));
//rand(0,15)随机0-15之间的数，作为charat()的下标，取出下标对应的字符
}
return color;
}
function zero(val){
return val < 10 ? "0" + val : val;
}
//时间差
function diff(start,end){//2000-2018 2018 - 2000
//console.log(start.gettime());
return math.abs(start.gettime() - end.gettime())/1000;
}
雪花图片（下方）
推荐阅读
