项目描述(需求分析):
1、使用html5中的video标签,创建一个视频播放器;
2、视频屏幕下可以输入弹幕,开头不能是空格,且可以通过提交按钮或者enter键进行提交;
3、输入的弹幕在视频区域实现从左到右滑动,字体颜色随机,大小随机,速度随机,超出区域则不能显示;
html部分:
<!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部分:
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部分:
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);
}