首页 html实现一个自动滚动留言板并且每半个小时消失给出具体代码

html实现一个自动滚动留言板并且每半个小时消失给出具体代码

时间: 2023-04-10 20:01:24 浏览: 57

以下是一个简单的HTML实现自动滚动留言板并且每半个小时消失的代码： ``` <!DOCTYPE html> <html> <head> <title>自动滚动留言板</title> <style> #message-board { height: 200px; overflow: auto; border: 1px solid black; padding: 10px; } .message { margin-bottom: 10px; } .hide { display: none; } </style> <script> window.onload = function() { var messageBoard = document.getElementById("message-board"); var messages = messageBoard.getElementsByClassName("message"); var index = 0; var interval = setInterval(function() { messages[index].classList.add("hide"); index = (index + 1) % messages.length; messages[index].classList.remove("hide"); }, 5000); // 5秒钟滚动一次 setTimeout(function() { clearInterval(interval); messageBoard.classList.add("hide"); }, 1800000); // 30分钟后隐藏留言板 } </script> </head> <body> <div id="message-board"> <div class="message">留言1</div> <div class="message">留言2</div> <div class="message">留言3</div> <div class="message">留言4</div> <div class="message">留言5</div> </div> </body> </html> ```