下雪效果
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; }
雪花图片(下方)