直接上源**
html檔案
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
input
button
.div0
style
>
head
>
>
class
="div0"
>
src=
"./test3.mp4"
controls
>
video
>
>
type
="text"
>
>
傳送button
>
div>
type
="module"
>
import barrage from
"./js/barrage.js"
;var input=document.
queryselector
("input");
var button=document.
queryselector
("button");
document.
addeventlistener
("keyup"
,keyhandler)
; button.
addeventlistener
("click"
,keyhandler)
;function
keyhandler
(e)return;}
script
>
body
>
html
>
export
default
class
manager
static
getinstance()
)}return manager._instance;
}add
(elem)
remove
(elem)
}update()
)}}
import manager from
"./manager.js"
;export
default
class
barrage
createelem
(text)
) div.textcontent=text;
return div;
}(parent));
this
.x=this
.rect.width;
// 獲取父元素寬度，控制彈幕的初始位置以及清除位置
this
.width=
this
.elem.offsetwidth;
// 獲取元素寬度
manager.instance.
add(
this);
// 將生成好的元素新增至單例manager中，並開啟定時器
}update()
}getrandomcolor
(a, r, g, b)
return col
}}
原生js彈幕實現範例
html lang en head meta charset utf 8 meta name generator content editplus meta name author content natural live meta name keywords content barrage met...
原生JS實現彈幕效果
純屬無聊寫的，可能有很多問題，歡迎批評指教。效果圖 圖一是預設的一些彈幕，圖二是自己發射的彈幕，效果是一樣的。demo位址 首先是彈幕的位置，是要從最右滑到最左，為了防止隨機高度彈幕會覆蓋的問題，設定了通道。每乙個通道是從左到右的一條，高度固定，這樣不同通道的彈幕不會相互覆蓋。彈幕滑動就是簡單設定c...
原生js物件導向實現簡單輪播
平時中我習慣用jquery寫輪播效果，實現過程不是很難，也很方便，為了加深對js物件導向的理解，我打算用物件導向實現乙個簡單的輪播，這裡採用了字面量的方式實現。為了實現這個過程，我們要自己動手封裝乙個運動函式animate，在這裡我採用的是勻速運動的方式，這種方式可能體驗不是很好，後面分析js 我在...