随机点歌(名)

随机点歌(名)_第1张图片
随机点歌(名)_第2张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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>

你可能感兴趣的:(javascript,前端,开发语言)