項目描述(需求分析):javascript
一、使用html5中的video標籤,建立一個視頻播放器;css
二、視頻屏幕下能夠輸入彈幕,開頭不能是空格,且能夠經過提交按鈕或者enter鍵進行提交;html
三、輸入的彈幕在視頻區域實現從左到右滑動,字體顏色隨機,大小隨機,速度隨機,超出區域則不能顯示;html5
html部分:java
<!DOCTYPE html> <html lang="en"> <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"> <link rel="stylesheet" href="css/index.css"> <title>彈幕效果</title> </head> <body> <div class="main"> <div class="container"> <div class="movie"> <video src="./video/laopo.mp4" controls="controls"></video> </div> <div class="danmu"> <input type="text" class="input" placeholder="請輸入彈幕" > <div id="btn">發送彈幕</div> </div> <div class="al"> 輸入內容不能爲空! </div> </div> </div> <script src="js/index.js"></script> </body> </html>
css部分:app
body{ margin: 0; padding: 0; list-style: none; } body{ font-family: sans-serif,'Microsoft Yahei' } .main{ position: relative; margin: 100px auto; width: 1024px; height: 612px; background: url("../img/bg.jpg") no-repeat; } .container{ position: absolute; top: 88px; left: 186px; width: 652px; height: 408px; background:black; overflow: hidden; } .movie video{ position: relative; width: 652px; height: auto; } .movie span{ position: absolute; white-space: nowrap; /* left: 100px; */ /* top: 50px; */ /* font-size: 20px; */ /* color: red; */ } .danmu{ position: relative; margin: 0 auto; overflow: hidden; width: 500px; height: 25px; border-radius: 5px; } .danmu .input{ margin: 0; padding: 0; outline: none; border: 0; width: 420px; height: 25px; text-indent: 8px; } #btn{ text-align: center; position: absolute; letter-spacing: 1px; top: 0; right: 0; height: 25px; width: 80px; font-size: 14px; line-height: 25px; color: white; background: #ff6700; cursor: pointer; } .al{ position: absolute; bottom: 80px; margin-left: -90px; left: 50%; width: 180px; height: 24px; color: white; font-size: 14px; line-height: 24px; text-align: center; letter-spacing: 1px; display: none; border-radius: 8px; background: orangered; box-shadow: 2px 2px 5px rgba(0,0,0,0.5); }
js部分:dom
var oMovie=document.getElementsByClassName('movie')[0], oInput=document.getElementsByClassName('input')[0], oBtn=document.getElementById('btn'), oAl=document.getElementsByClassName('al')[0]; oMovieWidth=oMovie.offsetWidth; var timer2; oBtn.onclick=send; oInput.onkeydown=function(e){ if(e.keyCode==13){ send(); } } function send(){ if(oInput.value.length<=0 || (/^\s+$/).test(oInput.value)){ oAl.style.display='block'; timer2=setTimeout(function(){ oAl.style.display='none'; },1500) return; } createSpan(oInput.value); oInput.value=""; } function createSpan(text){ var oSpan=document.createElement('span'); oSpan.innerText=text; oSpan.style.left=oMovieWidth+'px'; oMovie.appendChild(oSpan); styleSpan(oSpan); } function styleSpan(dom){ dom.style.top=random(0,180)+'px'; dom.style.color='rgb('+random(0,255)+','+random(0,255)+','+random(0,255)+')'; dom.style.fontSize=random(8,24)+'px'; var domW=dom.offsetWidth; var speed = [0, 1, 2][random(0, 2)]; dom.timer=setInterval(function(){ switch(speed){ case 0: dom.style.left=dom.offsetLeft-2+'px'; break; case 1: dom.style.left=dom.offsetLeft-4+'px'; break; case 2: dom.style.left=dom.offsetLeft-4+'px'; } if (dom.offsetLeft <= -domW) { clearInterval(dom.timer); oMovie.removeChild(dom); } },20) } function random(start,end){ return Math.floor(Math.random()*(end+1-start)+start); }