随机一句名言/歌词的网页

剑痞

已于 2024-08-19 19:46:55 修改

阅读量108

点赞数 1

分类专栏：简易代码文章标签： html

于 2024-08-17 20:44:30 首次发布

QQ;691699 E-mail:fim@qq.com http://han.ge

本文链接：https://blog.csdn.net/jianpi/article/details/141286485

版权

简易代码专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美句子-忆秋年</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0; /* 添加背景色 */
        }
        #lyricDisplay {
            text-align: center;
            font-size: 2em;
            padding: 20px; /* 添加内边距 */
            border: 2px solid #333; /* 添加边框 */
            border-radius: 10px; /* 圆角边框 */
            background-color: #fff; /* 背景色 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
        }
        button {
            margin-top: 20px; /* 按钮与歌词之间的距离 */
            padding: 10px 20px; /* 按钮内边距 */
            font-size: 1.2em; /* 按钮字体大小 */
            background-color: #007BFF; /* 按钮背景色 */
            color: #fff; /* 按钮文字颜色 */
            border: none; /* 移除边框 */
            border-radius: 5px; /* 圆角边框 */
            cursor: pointer; /* 鼠标悬停时的指针 */
        }
        button:hover {
            background-color: #0056b3; /* 鼠标悬停时的背景色 */
        }
    </style>
</head>
<body>
    <div id="lyricDisplay"></div>
 
    <button onclick="displayRandomLyric()">美句子</button>
 
    <script>
        const lyrics = [
            "Hello, Dolly, well, hello, Dolly",
            "It's so nice to have you back where you belong",
            "You're lookin' swell, Dolly, I can tell, Dolly",
            "You're still glowin', you're still crowin'",
            "You're still goin' strong",
            "We feel the room swayin'",
            "While the band's playin'",
            "One of your old favourite songs from way back when",
            "So, take her wrap, fellas, find her an empty lap, fellas",
            "Dolly'll never go away again"
        ];
 
        function displayRandomLyric() {
            const randomIndex = Math.floor(Math.random() * lyrics.length);
            const randomLyric = lyrics[randomIndex];
            document.getElementById('lyricDisplay').innerText = randomLyric;
        }
 
        // 页面加载时显示第一个随机歌词 
        window.onload = displayRandomLyric;
    </script>
</body>
</html>