JavaScript 雪花飄舞效果詳解

admin發表於2019-01-17
JavaScript

本章節分享一段程式碼例項，他實現了風中雪花飄舞的效果。

當然這個雪花只是使用點（.）來模擬的，雖然效果比較簡單，但是還是挺不錯的。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
*{
  margin:0; 
  padding:0; 
  vertical-align:top;
}
.xue{
  position:absolute;
  color:#fff;
}
#bbb{
  position:absolute;
  top:0px;
  right:0px;
  width:400px;
  border:1px #000 solid;
  background:#fff;
  z-index:9;
  height:30px;
}
#box{
  height:600px;
  position:relative;
  border:1px red solid;
  background:#000;
  overflow:hidden;
}
#antzone{
  position:absolute;
  top:0px;
  right:400px;
  border:1px #000 solid;
  background:#fff;
  width:400px;
  height:30px;
  z-index:5;
}
</style>
<script>
var i=0,wind_time;
var all=0,other=0,wind=0;
 
function getStyle(obj,attr){
  var ie = !+"\v1";
  if(attr=="backgroundPosition"){
    if(ie){        
      return obj.currentStyle.backgroundPositionX +" "+obj.currentStyle.backgroundPositionY;
    }
  }
  if(obj.currentStyle){
    return obj.currentStyle[attr];
  }
  else{
    return document.defaultView.getComputedStyle(obj,null)[attr];
  }
}
 
 
function done(){
  var a=document.createElement("div");
  a.innerHTML='.';
  a.id="xue"+i;
  a.className="xue";
  a.style.top=parseInt(getStyle(box,"height"))*(Math.random()>0.3?Math.random():0)+'px';
  var ss=Math.random()
 
  a.style.left = parseInt(getStyle(box,"width")) * ss + 'px';
  box.appendChild(a);
  godown(a.id,a.id,8*Math.random());
  i++;
  all++;
  var x = 100 * Math.random()* Math.random();
  setTimeout(done,x);
};
 
function removeElement(_element){//移除標籤的函式
  var _parentElement = _element.parentNode;
  if(_parentElement){
    _parentElement.removeChild(_element);
  };
};
 
function godown(a,e,speed){
  if(speed < 3){
    speed = 3
  }
  var a1 =document.getElementById(a);
  a1.style.top = parseInt(getStyle(a1,"top")) + speed +'px';
  if(parseInt(getStyle(a1,"top")) < parseInt(getStyle(box,"height"))){
    e = setTimeout("godown(\""+a+"\",\""+e+"\","+speed+")",20)
  }
  else{
    clearTimeout(e);
    removeElement(a1);
    speed=null;
    other++;
    document.getElementById('bbb').innerHTML = "區域內還有"+(all-other)+"個雪花點."
  };
};
 
function wind_run(wind){
  var a = document.getElementById("box").getElementsByTagName('div');
  for(var index = 0;index<a.length;index++){
    a[index].style.left = parseInt(a[index].style.left) + wind +'px';
  };
  if(Math.abs(wind) > 0.1){
    wind_time = setTimeout("wind_run("+wind+")",20)
  }
  else{
    clearTimeout(wind_time);
    wind = 0;
  };
};
 
window.onload=function(){
  var box=document.getElementById("box");
  var obt=document.getElementById("wind_button");
  box.style.width='1000px';
  obt.onclick=function(){
    clearTimeout(wind_time);
    wind=0;
    wind=parseInt(document.getElementById("wind_id").value);
    wind_run(wind);
  }
  done();
}
</script>
</head>
<body>
<div id="bbb"></div>
<div id="box"></div>
<div id="antzone">
<input id="wind_id" value="-10"/>級風
<input id="wind_button" type="button" value="檢視效果" />
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.var i=0,wind_time，i作為id屬性值的一部分，wind_time作為定時器函式的標識。

（2）.var all=0,other=0,wind=0，all用來儲存所有的雪花數目，other用來儲存已經落地的雪花數目，wind用來儲存風級。

（3）.function getStyle(obj,attr){}，獲取元素的樣式屬性值。

（4）.function done(){}，此函式可以用來建立雪花。

（5）.var a=document.createElement("div")，建立一個div元素，這個用來放置"雪花"點（.）。

（6）.a.innerHTML='.'，設定div元素的內容，這個就是我們所看到的雪花。

（7）.a.id="xue"+i，設定元素的id屬性值。

（8）.a.className="xue"，設定class屬性值。

（9）.a.style.top=parseInt(getStyle(box,"height"))*(Math.random()>0.3?Math.random():0)+'px',設定元素的top值，隨機設定。

（10）.var ss=Math.random()，生成一個隨機數。

（11）.a.style.left = parseInt(getStyle(box,"width")) * ss + 'px'，設定元素的left屬性值，隨機設定。

（12）.box.appendChild(a)，將元素新增到box元素，也就出現一個小雪花。

（13）.godown(a.id,a.id,8*Math.random())，此方法實現了雪花飄落效果。

（14）.i++，加1。

（15）.all++，加1，儲存所有的雪花數目。

（16）.var x = 100 * Math.random()* Math.random()，這個值用作定時器函式的執行延遲時間。

（17）.setTimeout(done,x)，遞迴的方式執行done()方法，也就不斷建立雪花。

（18）.function removeElement(_element){//移除標籤的函式

（19）.var _parentElement = _element.parentNode;

  if(_parentElement){

    _parentElement.removeChild(_element);

  };

}，刪除一個元素節點，也就是雪花落地就將其刪除。

（20）.function godown(a,e,speed){

  if(speed < 3){

    speed = 3

  }

  var a1 =document.getElementById(a);

  a1.style.top = parseInt(getStyle(a1,"top")) + speed +'px';

  if(parseInt(getStyle(a1,"top")) < parseInt(getStyle(box,"height"))){

    e = setTimeout("godown(\""+a+"\",\""+e+"\","+speed+")",20)

  }

  else{

    clearTimeout(e);

    removeElement(a1);

    speed=null;

    other++;

    document.getElementById('bbb').innerHTML = "區域內還有"+(all-other)+"個雪花點."

  };

};，此函式實現了雪花的飄落功能。

其實就是設定元素的top屬性值。

如果top值等於box元素的height值，那麼就說明落地了。

落地後就停止定時器函式的執行，並且刪除此雪花。

計算剩餘的雪花，就是總雪花數減去落地的雪花。

（21）.function wind_run(wind){

  var a = document.getElementById("box").getElementsByTagName('div');

  for(var index = 0;index<a.length;index++){

    a[index].style.left = parseInt(a[index].style.left) + wind +'px';

  };

  if(Math.abs(wind) > 0.1){

    wind_time = setTimeout("wind_run("+wind+")",20)

  }

  else{

    clearTimeout(wind_time);

    wind = 0;

  };

};，設定雪花的風級。

其實就是設定雪花的left屬性值，並不斷調整此值。

二.相關閱讀:

（1）.document.createElement()方法參閱document.createElement()一章節。

（2）.innerHTML屬性參閱JavaScript innerHTML一章節。

（3）.parseInt()方法JavaScript  parseInt()一章節。

（4）.Math.random()方法參閱JavaScript Math.random()一章節。

（5）.setTimeout()方法參閱JavaScript setTimeout()一章節。

（6）.parentNode參閱JavaScript parentNode一章節。

（7）.removeChild()方法參閱JavaScript removeChild()一章節。

相關文章