首页有滚动效果的HTML随机点名代码：

有滚动效果的HTML随机点名代码：

时间: 2023-06-24 16:07:29 浏览: 167

以下是一个简单的HTML随机点名代码，带有滚动效果： ```html <!DOCTYPE html> <html> <head> <title>随机点名</title> <style> body { background-color: #f2f2f2; } h1 { text-align: center; font-size: 48px; margin-top: 50px; } .roll { font-size: 36px; margin-top: 50px; text-align: center; animation: roll 10s linear infinite; } @keyframes roll { 0% { transform: translateY(0); } 100% { transform: translateY(-200px); } } </style> </head> <body> <h1>随机点名</h1> <div class="roll" id="roll"></div> <script> var students = ["小明", "小红", "小刚", "小美", "小芳", "小飞", "小李", "小王", "小张", "小赵"]; var roll = document.getElementById("roll"); function randomStudent() { var index = Math.floor(Math.random() * students.length); return students[index]; } setInterval(function() { roll.innerHTML = randomStudent(); }, 100); </script> </body> </html> ``` 这个代码会随机从一个学生名单中选取一个学生，并且将它显示在一个带有滚动效果的 `<div>` 元素中。你可以根据自己的需要修改代码中的学生名单和样式。

阅读全文