溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
利用原生JavaScript編寫一個彈幕功能？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
1、首先需要操作文檔必須拿到Dom中的元素，當然有很多方法，這里還是用document.querySelector.
2、這邊也是為了鍵盤和鼠標都可發送封裝了一個函數function sendMsg(){
首先需要創建一個容器來接受你編輯的內容，這里用span標簽，當然其他標簽也可
var oSpan=document.cerateElement(“span”)
將oSpan插入到需要展示的oVideoBox
oVideoBox.appendChild(oSpan)
給oSpan加入class用于編輯插入的樣式，當然也可以用js,這里用的CSS樣式oSpan.classList.add(“danmu”)
用innerHTML接用戶圖像及彈幕內容這里用ES6的一個``
oSpan.innerHTML =` < img src ="./source/lei.jpg" /> ${oContent.value}計算彈幕出現的初始位置，left位移初始位置即oVideoBox的寬度oVideoBox.offsetWidth.也是oSpan的初始定位oSpan.offsetLeft
top位移的初始即oVideoBox內隨機的高度，避免超出
var maxTop=oVideoBox…clientHeight-oSpan.offsetHeight; var top=Math.round(Math.random()*maxTop) oSpan.style.top = top+ ‘px'
當然JS的動畫也離不開計時器。這邊也是用setInterval()
var timer=setInterval(()=>{
var left=oSpan.offsetLeft
left-=10
oSpan.style.left= left+ ‘px'這邊判斷一下如果超出屏幕就把彈幕和計時器移出
if(left<-oSpan.offsetWidtb){
clearInterval(timer);
oSpan.remove();}},100)以上就完成了簡易版的彈幕函數就封裝完成了，后面就可以引用了，
事件從點擊開始，彈幕也是創建點擊事件oSend.onclick,
oSend.οnclick=function(){引用函數sendMsg()}后面可以加上一個鍵盤的enter可以發送,是一個事件委托window.οnkeydοwn=function(e){
var ev = e || event; var keyCode = ev.keyCode || ev.which;
判斷如果按的是鍵盤enter的keycode碼是13和alt組合
if (keyCode === 13 && ev.altKey) {
sendMsg();}}以下是bod代碼，可以練練
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>作業_彈幕</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wrapBox {
width: 800px;
height: 550px;
border: 1px solid #000;
margin: 50px auto 0;
}
.videoBox {
height: 500px;
position: relative;
overflow: hidden;
}
.videoBox img {
width: 100%;
height: 100%;
}
video {
width: 100%;
/* height: 500px; */
}
.danmuSend {
display: flex;
height: 50px;
}
#content {
flex: 1;
}
#send {
width: 100px;
}
.danmu {
color: #f00;
font-size: 20px;
position: absolute;
left: 800px;
top: 0;
white-space: nowrap;
}
.danmu img {
width: 60px;
height: 60px;
border-radius: 50%;
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<div class="wrapBox">
<div class="videoBox">
<img src="../../source/bg.jpg" />
<!-- <span class="danmu">我是彈幕</span> -->
<!-- <span class="danmu">我是彈幕</span>
<span class="danmu">我是彈幕</span>
<span class="danmu">我是彈幕</span>
<span class="danmu">我是彈幕</span> -->
</div>
<div class="danmuSend">
<input id="content" type="text">
<button id="send">發送</button>
</div>
</div>
</body>以下是JS的代碼：
<script>
var oSend = document.querySelector('#send');
var oContent = document.querySelector('#content');
var oVideoBox = document.querySelector('.videoBox');
function sendMsg() {
var content = oContent.value;
var oSpan = document.createElement('span');
oSpan.className = 'danmu';
oSpan.innerHTML = `<img src="../../source/bg.jpg">${content}`;
oVideoBox.appendChild(oSpan);
var maxTop = oVideoBox.clientHeight - oSpan.offsetHeight;
oSpan.style.top = Math.round(Math.random() * maxTop) + 'px';
var timer = setInterval(() => {
var left = oSpan.offsetLeft;
left -= 10;
oSpan.style.left = left + 'px';
if (left < -oSpan.offsetWidth) {
clearInterval(timer);
oSpan.remove();
}
}, 100);
}
oSend.onclick = function () {
sendMsg();
}
window.onkeydown = function (e) {
var ev = e || event;
var keyCode = ev.keyCode || ev.which;
if (keyCode === 13 && ev.altKey) {
sendMsg();
}
}
</script>看完上述內容，你們掌握利用原生JavaScript編寫一個彈幕功能的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
