目錄
效果圖：
初始化雪花
讓雪花動起來
當雪花遇到邊界（最下面、最右邊），就重新設定引數回到最頂上，回圈往下飄
現在可以看到雪花了，但是雪花會一股腦的落下，不好看，所以設定一個引數來控制，一次落下多少個，
運行后發現左邊會沒有雪，因為是往右飄的，那設定X為負的再往右飄就可以了
飄雪
完整代碼
歡迎指正！記得三連哦！
效果圖：
初始化雪花
this.box.style.width=screenWidth+'px';
this.box.style.height=screenHeight+'px';
var fragment = document.createDocumentFragment();
for(var i=0;i<this.size;i++){//創建好雪花
var left = this.getRandomThings('left');
var top = this.getRandomThings('top');
var snowSize=this.getRandomThings('size');
var snow = document.createElement("div");
snow.style.cssText='position:absolute;color:#FFFFFF;';
snow.style['font-size']=snowSize+'px';
snow.style.left=left+'px';
snow.style.top=top+'px';
snow.innerHTML='❄';
this.item.push(snow);
fragment.appendChild(snow);
}
box.appendChild(fragment);var left = this.getRandomThings('left'); 設定left為隨機，這樣就可以橫向分布在空中了，
var top = this.getRandomThings('top'); 設定top，都默認在頂上，隱藏了起來，
讓雪花動起來
//用setInterval 定時器讓雪動起來
//每次執行獲得隨機移動的X y增量并添加到x和y上
increTop = that.getRandomThings('incre');
increLeft = that.getRandomThings('increLeft');
x += increLeft;
y += increTop;
//設定left top讓雪動起來
s.style.left=x+'px';
s.style.top=y+'px';當雪花遇到邊界（最下面、最右邊），就重新設定引數回到最頂上，回圈往下飄
//超過右邊或者底部重新開始
if(y>(screenHeight-5) || x>(screenWidth-30)){
//重新回到天上開始往下
increTop = that.getRandomThings('incre');
increLeft = that.getRandomThings('increLeft');
//重新隨機屬性
var left = that.getRandomThings('left');
var top = that.getRandomThings('top');
var snowSize=that.getRandomThings('size');
s.style.left=left+'px';
s.style.top=top+'px';
s.style['font-size']=snowSize+'px';
y=top;
x=left;
n=0;
return ;
}現在可以看到雪花了，但是雪花會一股腦的落下，不好看，所以設定一個引數來控制，一次落下多少個，
當雪花的數量可以整除downSize的時候，就加一秒的時間，再執行，就可以一秒下一部分雪花，當然時間還可以再修改，這個downSize可以在初始化的時候傳入，
運行后發現左邊會沒有雪，因為是往右飄的，那設定X為負的再往右飄就可以了
飄雪
現在是勻速下落的，需要更改一下速度，讓它一會快一會慢就能感覺到是飄著的，每次執行下落影片的時候，判斷亂數是否大于0.5，大于就加一點，小于就減一點，用一個系數控制就好，
完整代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style>
*{
margin:0;padding:0;
}
#box{padding:3px;position:absolute;background:skyblue;}
</style>
</head>
<body>
<div id="box">
</div>
</body>
<script>
(function(){
var screenWidth = window.screen.availWidth-20;//設定天空寬度
var screenHeight = 550;//設定天空高度
var speed=20;
function Snow(size,downSize){
this.box=document.getElementById("box");
this.size=size;
this.downSize=downSize||10;
this.item=[];
this.init();
this.start();
}
// 獲取相關隨機資料的方法
Snow.prototype.getRandomThings=function(type){
var res;
if(type=='left'){//初始的left
res = Math.round(Math.random()*(screenWidth-30-10))+10;
Math.random()>0.8 ? (res =-res):null;//這句是為了讓左邊有雪，因為雪是往右飄的，把left設定為負值，就會有的出現在左側
}else if(type=='top'){//初始的top
res = -(Math.round(Math.random()*(50-40))+40);
}else if(type=='incre'){//向下的速度
res = Math.random()*(3-1)+1;
}else if(type=='increLeft'){//向右的速度
res = Math.random()*(0.8-0.5)+0.5;
}else{//雪花的大小
res = Math.round(Math.random()*(30-10))+10;
}
return res;
}
Snow.prototype.init=function(){
this.box.style.width=screenWidth+'px';
this.box.style.height=screenHeight+'px';
var fragment = document.createDocumentFragment();
for(var i=0;i<this.size;i++){//創建好雪花
var left = this.getRandomThings('left');
var top = this.getRandomThings('top');
var snowSize=this.getRandomThings('size');
var snow = document.createElement("div");
snow.style.cssText='position:absolute;color:#FFFFFF;';
snow.style['font-size']=snowSize+'px';
snow.style.left=left+'px';
snow.style.top=top+'px';
snow.innerHTML='❄';
this.item.push(snow);
fragment.appendChild(snow);
}
box.appendChild(fragment);
}
Snow.prototype.start=function(){
var that=this;
var num=0;
for(var i=0;i<this.size;i++){
var snow = this.item[i];
if((i+1)%this.downSize==0){//這樣處理的話，就可以指定每次落下多少雪花，不然剛開始是一股腦的下來
num++;
}
(function(s,n){//用閉包的方式
setTimeout(function(){
that.doStart(s);
},1000*n)
})(snow,num)
}
}
//針對每個雪花的定時處理
Snow.prototype.doStart=function(snow){
var that=this;
(function(s){
var increTop = that.getRandomThings('incre');
var increLeft = that.getRandomThings('increLeft');
var x=parseInt(getStyle(s, 'left')),y=parseInt(getStyle(s, 'top'));
if(s.timmer) return ;
s.timmer=setInterval(function(){
//超過右邊或者底部重新開始
if(y>(screenHeight-5) || x>(screenWidth-30)){
//重新回到天上開始往下
increTop = that.getRandomThings('incre');
increLeft = that.getRandomThings('increLeft');
//重新隨機屬性
var left = that.getRandomThings('left');
var top = that.getRandomThings('top');
var snowSize=that.getRandomThings('size');
s.style.left=left+'px';
s.style.top=top+'px';
s.style['font-size']=snowSize+'px';
y=top;
x=left;
n=0;
return ;
}
//加上系數，當隨大于0.5 速度加快，小于0.5 速度減慢，看起來飄的感覺
x += Math.random()>0.5?increLeft*1.1:increLeft*0.9;
y += Math.random()>0.5?increTop*1.1:increTop*0.9;
//設定left top讓雪動起來
s.style.left=x+'px';
s.style.top=y+'px';
},speed);
})(snow)
}
//獲取屬性值
function getStyle(obj, prop) {
var prevComputedStyle = document.defaultView ? document.defaultView.getComputedStyle( obj, null ) : obj.currentStyle;
return prevComputedStyle[prop];
}
new Snow(300,30);
})()
</script>
</html>歡迎指正！記得三連哦！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/245236.html
標籤：其他
上一篇：Promise物件