JavaScript數字上下翻動變化詳解

admin發表於2018-09-13
JavaScript

分享一段程式碼例項，它實現了數字上下翻動變化效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body {
  margin: 0;
  padding: 0;
}
.box {
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.box .wrap {
  position: relative;
  top: 0;
}
.box .top-move {
  transition: top 0.6s ease;
  top: -200px;
}
.box span {
  display: block;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  font-size: 2.6em;
}
.box span:nth-of-type(1) {
  background: #999;
}
.box span:nth-of-type(2) {
  background: #666;
}
</style>
<script>
function move(obj) {
   this.el = document.getElementById(obj.el) || obj.el;
   this.list = this.el.getElementsByClassName(obj.list);
   var This = this;
 
   // 隨機資料
   // len：隨機數的長度
   // return array
   this.radom = function(len) {
     var random = [];
     for (var index = 0; index < len; index++) {
       random.push(Math.floor(Math.random() * 10));
     }
     return random;
   }
 
   this.timeout = function(time, func) {
     var timer = setTimeout(function() {
       func();
     }, time);
   }
 
   // 將值寫入dom
   this.setVal = function() {
     var arrNum = This.radom(2);
     if (arrNum.length === 0) return;
     for (var index = This.list.length - 1; index >= 0; index--) {
       This.list[index].innerHTML = arrNum[index];
     }
     This.move();
     This.timeout(600, function() {
       This.list[0].innerHTML = arrNum[1];
       This.list[1].innerHTML = arrNum[0];
       This.remove();
     });
     This.timeout(1600, This.setVal);
   }
 
   this.move = function() {
     This.el.className = "wrap top-move";
   }
 
   this.remove = function() {
     This.el.className = "wrap";
   }
 
   this.init = function() {
     This.setVal();
   }
}
window.onload=function(){
  new move({
    el: "wrap",
    list: "list"
  }).init();
}
</script>
</head>
<body>
<div class="box">
  <div class="wrap" id="wrap">
    <span class="list">2</span>
    <span class="list">1</span>
  </div>
</div>
</body>
</html>

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

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
body {
  margin: 0;
  padding: 0;
}

設定bod的內邊距和外邊距，body的子元素也會繼承。

[CSS] 純文字檢視 複製程式碼
.box {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

設定容器元素的尺寸，並且設定內部元素超出就會隱藏，這個很重要。

[CSS] 純文字檢視 複製程式碼
.box .wrap {
  position: relative;
  top: 0;
}

設定元素為相對定位，top屬性值為0px。

[CSS] 純文字檢視 複製程式碼
.box .top-move {
  transition: top 0.6s ease;
  top: -200px;
}

以動畫方式設定元素的top屬性值。

[CSS] 純文字檢視 複製程式碼
.box span {
  display: block;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  font-size: 2.6em;
}

將span元素設定為塊級元素，這樣的話就可以設定它的尺寸，span元素就會在新的一行顯示。

[CSS] 純文字檢視 複製程式碼
.box span:nth-of-type(1) {
  background: #999;
}

設定對應子元素的背景顏色。

[CSS] 純文字檢視 複製程式碼
function move(obj) {
  //code
}

此建構函式實現了翻動效果，引數是一個配置物件。

[JavaScript] 純文字檢視 複製程式碼
this.el = document.getElementById(obj.el) || obj.el

獲取對應的元素物件，obj.el可以是一個id屬性值也可以直接是一個元素物件。

[JavaScript] 純文字檢視 複製程式碼
this.list = this.el.getElementsByClassName(obj.list)

獲取指定的元素集合，在這裡也就是span元素集合。

[JavaScript] 純文字檢視 複製程式碼
var This = this

將this賦值給變數This，因為在不同的上下文中this可能指向不同的物件。

[JavaScript] 純文字檢視 複製程式碼
this.radom = function(len) {
  var random = [];
  for (var index = 0; index < len; index++) {
    random.push(Math.floor(Math.random() * 10));
  }
  return random;
 }

獲取一個隨機數陣列。

[JavaScript] 純文字檢視 複製程式碼
this.timeout = function(time, func) {
  var timer = setTimeout(function() {
    func();
  }, time);
}

對setTimeout定時器函式進行封裝。

[JavaScript] 純文字檢視 複製程式碼
this.setVal = function() {
  //code
}

將值寫入對應的元素。

[JavaScript] 純文字檢視 複製程式碼
var arrNum = This.radom(2);
if (arrNum.length === 0) return;
for (var index = This.list.length - 1; index >= 0; index--) {
  This.list[index].innerHTML = arrNum[index];
}

將生成的隨機數寫入對應的span元素中。

[JavaScript] 純文字檢視 複製程式碼
This.move()

呼叫此方法可以設定元素的樣式類，從來實現了動畫方式設定top值的功能。

[JavaScript] 純文字檢視 複製程式碼
This.timeout(600, function() {
  This.list[0].innerHTML = arrNum[1];
  This.list[1].innerHTML = arrNum[0];
  This.remove();
});

css3動畫需要600毫秒完成；600毫秒之後，將兩個元素的內容對調，然後再恢復到元素原來的樣式類。

於是這樣就會讓元素位置恢復到預設，但是又由於對調了元素的內容，這樣起碼在外觀上實現了翻動效果。

二.相關閱讀

（1）.transition可以參閱CSS3 transition一章節。

（2）.:nth-of-type()可以參閱nth-of-type()一章節。

（3）.getElementsByClassName()可以參閱getElementsByClassName()一章節。

（4）.push()可以參閱javascript push()一章節。

（5）.Math.floor()可以參閱javascript Math.floor()一章節。

（6）.Math.random()可以參閱javascript Math.random()一章節。

（7）.setTimeout()可以參閱setTimeout()一章節。

（8）.innerHTML可以參閱innerHTML一章節。

（9）.className可以參閱js className一章節。

相關文章