首页创建一个定时器每隔50毫秒在页面上创建一条弹幕

创建一个定时器每隔50毫秒在页面上创建一条弹幕

时间: 2024-03-22 18:42:30 浏览: 66

以下是一个实现在页面上创建弹幕的示例代码，每隔50毫秒创建一条弹幕： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>弹幕</title> <style> .dplayer-danmaku { position: absolute; white-space: nowrap; font-size: 16px; color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); transform: translateX(100%); animation: move 5s linear; } @keyframes move { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } </style> </head> <body> <div id="danmaku-container"></div> <script> // 获取弹幕容器 var container = document.getElementById("danmaku-container"); // 创建弹幕 function createDanmaku() { var danmaku = document.createElement("div"); danmaku.classList.add("dplayer-danmaku"); danmaku.innerText = "这是一条弹幕"; danmaku.style.top = Math.floor(Math.random() * 300) + "px"; container.appendChild(danmaku); setTimeout(function() { danmaku.remove(); }, 5000); } // 定时创建弹幕 setInterval(function() { createDanmaku(); }, 50); </script> </body> </html> ``` 该示例中通过`setInterval`方法每隔50毫秒调用`createDanmaku`函数创建一条弹幕，并添加到页面上的弹幕容器中。弹幕的具体样式可以通过CSS进行设置。在创建弹幕时，需要设置弹幕的位置和存活时间，这里设置弹幕的存活时间为5秒，即弹幕在5秒后自动消失。

阅读全文