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