当然可以！以下是一个简单的示例，用于在网页上实现
弹幕功能：
HTML：
```html
<!DOCTYPE html>
<html>
<head>
<title>
弹幕功能示例</title>
<style>
#
danmu-container {
position: relative;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
}
.
danmu {
position: absolute;
white-space: nowrap;
}
</style>
</head>
<body>
<h1>
弹幕功能示例</h1>
<div id="
danmu-container"></div>
<form id="
danmu-form">
<input type="text" id="
danmu-input" placeholder="请输入
弹幕内容">
<button type="submit">发送</button>
</form>
<script src="
danmu.
js"></script>
</body>
</html>
```
JavaScript（
danmu.
js）：
```javascript
document.addEventListener("DOMContentLoaded", function() {
var container = document.getElementById("
danmu-container");
var form = document.getElementById("
danmu-form");
var input = document.getElementById("
danmu-input");
form.addEventListener("submit", function(e) {
e.preventDefault();
var text = input.value;
if (text) {
create
Danmu(text);
input.value = "";
}
});
function create
Danmu(text) {
var
danmu = document.createElement("span");
danmu.className = "
danmu";
danmu.textContent = text;
// 随机设置
弹幕的位置和颜色
var top = Math.floor(Math.random() * (container.offsetHeight -
danmu.offsetHeight));
var color = "#" + Math.floor(Math.random() * 16777215).toString(16);
danmu.style.top = top + "px";
danmu.style.color = color;
// 让
弹幕从右侧进入，并在一定时间后消失
var duration = 8000 + Math.floor(Math.random() * 5000);
danmu.style.animation = "
danmu-move " + duration + "ms linear forwards";
container.appendChild(
danmu);
//
弹幕动画结束后删除元素
danmu.addEventListener("animationend", function() {
container.removeChild(
danmu);
});
}
});
```
上述代码定义了一个包含
弹幕容器和一个输入框的网页，当用户在输入框中输入内容并点击发送按钮时，会在
弹幕容器中创建一个新的
弹幕。每个
弹幕具有随机的位置、颜色和持续时间，并在动画结束后自动删除。
你可以根据实际需求对
弹幕样式和动画进行自定义。希望能帮到你！
444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
