随机点歌（名）

最新推荐文章于 2025-05-01 08:38:22 发布

W`hite

最新推荐文章于 2025-05-01 08:38:22 发布

阅读量968

点赞数 21

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/AYBBZXY/article/details/134627939

版权

本文介绍了如何使用HTML和JavaScript创建一个简单的网页应用，实现随机显示音乐歌单中的歌曲名称，用户可以点击按钮开始或结束歌曲的随机切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .box{
            height: 200px;
            width: 500px;
            margin: 0 auto;
            margin-top:100px;
            text-align: center;
            position: relative;
        }
        .box h1{
            font-size: 30px;
            text-align: center;
        }
        
        .start{
            margin-right: 50px;
            width: 80px;
            height: 30px;
        }
        .end{
            margin-left: 50px;
            width: 80px;
            height: 30px;
        }
        .box-1{
            position: absolute;
            width: 500px;
        }
        .song{
            font-size: 30px;
            color: rgb(128, 98, 183);
            float: left;
            margin-top: 50px;
        }
        .content{
            font-size:30px;
            float: right;
            margin-top:50px;
            margin-right: 180px;
            color: #676666;
        }
        .btn{
            height: 30px;
            text-align: center;
        }
    </style>
</head>
<body>

        <div class="box">
            <h1>随机点歌</h1>
            <div class="box-1">
                <span class="song">歌名</span>
                <span class="content">夏天结束了</span>
            </div>
            <div class="btn" style="margin-top: 120px;">
                <button class="start">开始</button>
                <button class="end">结束</button>
            </div>
        </div>

    

    <script>
        var arr = ['檐下星光','事件是庸医','捡星星的人','梦如夏花','冷战','太阳','雾与长风','失眠岛屿','单人券','陨落','尾奏','与光同行','第七封信','反复温习','风过谢桃花','欲言又止','落空','三寸月光','毒药','瞬','悬溺','春不晚','凌晨的风','假说','流光讯号']
        var start = document.querySelector('.start')
        var content= document.querySelector('.content')
        var end = document.querySelector('.end')
        var timer = 0
        var random
        start.addEventListener('click',function(){
            timer = setInterval(function(){
                random = Math.floor(Math.random()*arr.length)
                content.innerHTML = arr[random]
            },70)//切换
        })
        end.addEventListener('click',function(){
            clearInterval(timer)//点击停止定时器
   
        })
    </script>
</body>
</html>