<!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">
<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; }
</style>
</head>
<body>
<div class="wrapBox">
<div class="videoBox">
<img src="../source/bg.jpg" />
<!-- <span class="danmu">我是弹幕</span> -->
</div>
<div class="danmuSend">
<input id="content" type="text">
<button id="send">发送</button>
</div>
</div>
</body>
<script>
var oVideoBox = document.querySelector('.videoBox');
var oContent = document.querySelector('#content');
var oSend = document.querySelector('#send');
oSend.onclick = function(){
var content = oContent.value; // console.log(content); add(content);
}
function add(content) {
if (!content) { alert('sss'); return }
var oSpan = document.createElement('span');
oSpan.className = 'danmu';
oSpan.innerHTML = content;
oVideoBox.appendChild(oSpan);
var maxTop = oVideoBox.clientHeight - oSpan.offsetHeight;//设置弹幕最大距离顶部高度 oSpan.style.top = Math.round(Math.random() * maxTop) + 'px';//设置随机高度
// console.log( maxTop,oSpan.offsetHeight);
//设置定时器移动弹幕
var timer = setInterval(() => {
var start = oSpan.offsetLeft; start -= 5;
// console.log(start);
oSpan.style.left = start + 'px';
if (start < -oSpan.offsetWidth) {
clearInterval(timer); oSpan.remove();
} }, 40);
oContent.value= '';
} </script>
</html>
632
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
