原生js彈幕實現範例

2021-08-14 09:51:57 字數 2109 閱讀 4371

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

meta

name

="generator"

content

="editplus®"

>

<

meta

name

="author"

content

="natural_live"

>

<

meta

name

="keywords"

content

="barrage"

>

<

meta

name

="description"

content=""

>

<

title

>

彈幕title

>

<

style

>

*  #barrage  

#barrage div  

#btn  

#text  

#submit  

style

>

head

>

<

body

>

<

divid

="barrage"

>

div>

<

divid

="btn"

>

<

input

type

="text"id=

"text"

>

input

>

<

input

type

="button"id=

"submit"

value

="傳送"

>

input

>

div>

<

script

>

var timer

=null

;  var current

=;//儲存當前輸入框的內容  

var newarr

=;//儲存每個彈幕距左邊框的距離  

var flag=0

;//標誌量  

var num

=new

array();//陣列,用來儲存劃分每個塊的序號  

//var t=12

;  var words

= ["富強","民主","文明","和諧","自由","平等","公正","法治","愛國","敬業","誠信","友善"];  

function $(id)  

for(var i=0

;i<

$("barrage").offsetheight/20 - 1;i++)  

window.onload

= function

(),100*random(10,100))//給彈幕隨機加乙個延遲  

}  timer

=setinterval

(move,20);//開啟定時器  

}  function create(w)  

function move()else  

}  }  

}  $("submit").onclick

=function

()  

function delete(m)  

}  }  

function currenttest(m)  

}  return fl;  

}  function randomcolor()  

return color;  

}  function random(m,n)  

script

>

body

>

html

>

原生JS實現彈幕效果

純屬無聊寫的,可能有很多問題,歡迎批評指教。效果圖 圖一是預設的一些彈幕,圖二是自己發射的彈幕,效果是一樣的。demo位址 首先是彈幕的位置,是要從最右滑到最左,為了防止隨機高度彈幕會覆蓋的問題,設定了通道。每乙個通道是從左到右的一條,高度固定,這樣不同通道的彈幕不會相互覆蓋。彈幕滑動就是簡單設定c...

原生JS物件導向式程式設計實現彈幕,利用觀察者模式

直接上源 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...

原生js實現Ajax

一般來說,大家可能都會習慣用jquery提供的ajax方法,但是用原生的js怎麼去實現ajax方法呢?jquery提供的ajax方法 ajax success function error function 原生js實現ajax方法 var ajax obj.send post function u...