写一段JS弹幕弹窗代码
时间: 2023-05-21 16:06:52 浏览: 138
Js实现手机端活动弹窗一天只弹一次代码
下面是一个简单的JS弹幕弹窗代码:
```javascript
// 弹幕和弹窗数据
const messages = [
{ content: '这是第一条弹幕', time: 1000 },
{ content: '这是第二条弹幕', time: 2000 },
{ content: '这是第三条弹幕', time: 3000 }
];
const popups = [
{ title: '提示', content: '这是一个弹窗', time: 1500 }
];
// 弹幕和弹窗的显示函数
function showMessage(message) {
const div = document.createElement('div');
div.innerText = message.content;
div.classList.add('message');
setTimeout(() => {
div.remove();
}, message.time);
document.body.appendChild(div);
}
function showPopup(popup) {
alert(`[${popup.title}] ${popup.content}`);
}
// 定时器循环弹幕和弹窗的数据
let messageIndex = 0;
let popupIndex = 0;
setInterval(() => {
if (messageIndex < messages.length) {
showMessage(messages[messageIndex++]);
} else if (popupIndex < popups.length) {
showPopup(popups[popupIndex++]);
}
}, 1000);
```
以上代码会每秒钟循环显示一条弹幕或者一个弹窗,数据定义在 `messages` 和 `popups` 数组中。弹幕可以在屏幕上滚动一段时间后消失,弹窗则是简单的 `alert` 弹窗。
阅读全文