JavaScript彈幕效果程式碼詳解

admin發表於2018-12-10
JavaScript

分享一段程式碼例項，它利用JavaScript模擬實現了彈幕效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
  font-size: 16px;
}
.main {
  height: 100%;
  background: #000;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.main span {
  position: absolute;
  left: 100%;
  width: 100%;
}
.submit {
  position: absolute;
  left: 0;
  bottom: 0;
  background: blue;
  text-align: center;
  width: 100%;
  line-height: 6rem;
}
input {
  display: inline-block;
  width: 80%;
  line-height: 4rem;
}
button {
  display: inline-block;
  width: 15%;
  line-height: 4rem;
  background: red;
}
</style>
</head>
<body>
<section class="main"></section>
<section class="submit">
  <input type="text" placeholder="輸入您的字幕" />
  <button>傳送</button>
</section>
<script type="text/javascript">
var mainContent = document.querySelector('.main');
var submitButton = document.querySelector('button');
var inputText = document.querySelector('input');
mainContent.style.height = document.body.clientHeight - 6 * 16 + 'px';
window.onresize = function () {
  mainContent.style.height = document.body.clientHeight - 6 * 16 + 'px';
}
document.onkeydown = function (event) {
  var event = window.event || event;
  if (event.keyCode === 13) {
    randomText();
  }
};
submitButton.onclick = function () {
  randomText();
};
function randomText() {
  var text = inputText.value;
  var length = text.length;
  var p = document.createElement('span');
  p.style.color = randomColor();
  var random = randomFontSize(1, 4);
  p.style.fontSize = random + 'rem';
  var randomHeight = randomFontSize(0, (document.body.clientHeight - 10 * 16));
  p.style.marginTop = randomHeight + 'px';
  p.innerText = text;
  mainContent.appendChild(p);
  var i = 0.9;
  var timer = setInterval(function () {
    p.style.left = i * document.body.clientWidth + 'px';
    i -= 0.003;
    if (p.offsetLeft < -length * random * 16) {
      clearInterval(timer);
      mainContent.removeChild(p);
    }
  }, 10);
}
function randomColor() {
  return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
}
function randomFontSize(min, max) {
  return (min + Math.random() * (max - min)).toFixed(2);
}
</script>
</body>
</html>

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

一.程式碼註釋:

（1）.var mainContent = document.querySelector('.main')，獲取第一個class屬性值為main的元素。

（2）.var submitButton = document.querySelector('button')，獲取第一個button元素物件。

（3）.var inputText = document.querySelector('input')，獲取第一個input元素。

（4）.mainContent.style.height = document.body.clientHeight - 6 * 16 + 'px'，黑色彈幕區域的高度為瀏覽器客戶區的高度減去底部傳送區域的高度。（5）.window.onresize = function () {

  mainContent.style.height = document.body.clientHeight - 6 * 16 + 'px';

}，註冊onresize事件處理函式。

目的是為了當調整視窗大小的時候，不斷調整黑色彈幕區域的高度。

（6）.document.onkeydown = function (event) {

  var event = window.event || event;

  if (event.keyCode === 13) {

    randomText();

  }

}，註冊onkeydown事件處理函式。

當點選回車的時候，就會執行randomText()函式，此函式的作用下面介紹。

（7）.submitButton.onclick = function () {

  randomText();

}，為按鈕註冊onclick事件處理函式。

（8）.function randomText() {}，此函式是彈幕效果的核心。

（9）.var text = inputText.value，獲取文字空傳送的文字內容。

（10）.var length = text.length，獲取文字的長度。

（11）.var p = document.createElement('span')，建立一個span元素。

（12）.p.style.color = randomColor()，設定文字的顏色。

（13）.var random = randomFontSize(1, 4)，獲取字型大小。

（14）.p.style.fontSize = random + 'rem'，設定字型的大小。

（15）.var randomHeight = randomFontSize(0, (document.body.clientHeight - 10 * 16))，計算出span元素的margin-top。

（16）.p.style.marginTop = randomHeight + 'px'，設定span元素的margin-top值。

（17）.p.innerText = text，將文字內容寫入span元素。

（18）. mainContent.appendChild(p)，將span元素新增到彈幕區域。

（19）.  var i = 0.9，宣告一個變數並賦值為0.9，後面會用到。

（20）.var timer = setInterval(function () {

  p.style.left = i * document.body.clientWidth + 'px';

  i -= 0.003;

  if (p.offsetLeft < -length * random * 16) {

    clearInterval(timer);

    mainContent.removeChild(p);

  }

}, 10)，採用定時器函式，每隔10毫秒執行一次回撥函式。

每一次執行span元素的left屬性值都會變小。

length * random * 16值就是span元素的寬度，因為span元素的寬度由其內容所決定。

p.offsetLeft < -length * random * 16，也就是span元素完全在彈幕區域消失。

那麼就停止定時器函式的執行，並移除該span元素。

（21）.function randomColor() {

  return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);

}，隨機生成顏色。

（22）.function randomFontSize(min, max) {

  return (min + Math.random() * (max - min)).toFixed(2);

}，隨時生成介於min到max之間的數字。

二.相關閱讀:

（1）.document.querySelector()參閱document.querySelector()一章節。

（2）.clientHeight參閱JavaScript clientHeight一章節。

（3）.keyCode參閱JavaScript event.keyCode一章節。

（4）.document.createElement()參閱document.createElement()一章節。

（5）.appendChild()參閱JavaScript appendChild()一章節。

（6）.clearInterval()可以參閱JavaScript clearInterval()一章節。

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

（8）.Math.random()可以參閱JavaScript Math.random()一章節。

相關文章