html滚动效果代码javascript 趣味钢琴⼩游戏（附源码）js+css+html
⽂章⽬录
源码钢琴⼩游戏
该游戏玩法为：点击中间的按钮，歌曲转盘开始滚动，随即抽到⼀⾸歌，抽到的歌曲弹出歌单，底部的⿊⽩钢琴可以弹奏⾳乐⼀、代码
html 代码<!DOCTYPE html ><html lang ="en"><head >    <meta charset ="UTF-8">    <meta http -equiv ="X-UA-Compatible" content ="IE=edge">    <meta name ="viewport" content ="width=device-width, initial-scale=1.0">    <title >Document </title >    <link rel ="stylesheet" href ="./gangqinshi.css"></head ><body ><div class ="bg">    <img src ="./img/bg1.jpg" alt ="">    <div class ="music_list">        <div class ="playlist1 music">世上只有</div >        <div class ="playlist2 music">两只⽼虎</div >        <div class ="playlist3 music">⼩星星</div >        <div class ="playlist4 music">朋友</div >1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class ="playlist6 music">粉刷匠</div >        <div class ="playlist7 music">轨迹</div >        <div class ="playlist8 music">青花瓷</div >        <div class ="playlist9 music" id ="start_btn"></div >    </div >    <div class ="gedan">        <ul >            <li class ="img">                <img src ="./img/世上只有.png" alt ="">            </li >            <li class ="img">                <img src ="./img/两只⽼虎.png" alt ="">            </li >            <li class ="img">                <img src ="./img/⼩星星.png" alt ="">            </li >            <li class ="img">                <img src ="./img/朋友.png" alt ="">            </li >            <li class ="img">                <img src ="./img/新年好.png" alt ="">            </li >            <li class ="img">                <img src ="./img/粉刷匠.png" alt ="">            </li >            <li class ="img">                <img src ="./img/轨迹.png" alt ="">            </li >            <li class ="img">                <img src ="./img/青花瓷.png" alt ="">            </li >        </ul >    </div >    <div class ="piano">        <div class ="keys">            <ul >                <li class ="Play">do                    <audio src ="./music/1do.mp3" ></audio >                </li >                <li class ="Play">re                    <audio src ="./music/2re.mp3"></audio >                </li >             
  <li class ="Play">mi                    <audio src ="./music/3mi.mp3"></audio >                </li >                <li class ="Play">fa                    <audio src ="./music/4fa.mp3"></audio >                </li >                <li class ="Play">sol                    <audio src ="./music/5so.mp3"></audio >                </li >                <li class ="Play">la                    <audio src ="./music/6la.mp3"></audio >                </li >                <li class ="Play">si                    <audio src ="./music/7si.mp3"></audio >                </li >                <li class ="Play">do                    <audio src ="./music/8do.mp3"></audio >                </li >            </ul >            <span class ="heikuai1"></span >            <span class ="heikuai2"></span >            <span class ="heikuai3"></span >19202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
<span class ="heikuai5"></span >        </div >    </div ></div >  <button id ="stop_btn">停⽌</button ></body ><script >    var start_btn =document .getElementById ("start_btn");    var music =document .getElementsByClassName ("music");    //开始转圈    start_btn .onclick =function (){        //开始转圈                timer =setInterval (start ,300);    }    var i =0;    var gedan_list =document .getElementsByClassName ("img");    function start (){        //随机数        var n =Math .round (Math .random ()*10);        i ++;  if (i ==8){  i = 0;  }                for (var j =0;j <music .length ;j ++){            music [j ].style .boxShadow ="none";        }                if (i ==n ){                        gedan_list [i ].style .dis
play ="block";            clearInterval (timer );                              }        music [i ].style .boxShadow ="2px 5px 10px 5px #000";        console .log (i ,n );            }    for (var w =0;w <gedan_list .length ;w ++){        gedan_list [w ].onclick =function (){            this .style .display ="none";        }    }    // 停⽌转圈    var stop_btn =document .getElementById ("stop_btn");    stop_btn .onclick =function (){        clearInterval (timer );    }    //⾳乐播放暂停    var mp3=document .getElementsByTagName ("audio");    var Play =document .getElementsByClassName ("Play");    for (var m =0;m <Play .length ;m ++){        Play [m ].onclick =function (){            for (var k =0;k <Play .length ;k ++){                Play [k ].style .boxShadow ="0 7px 8px #000";            }84858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
css 代码                        this .childNodes [1].play ();            console .log (this .childNodes [1]);        }            }    </script ></html >149150151152153154155156157158*{    padding : 0;    margin : 0;}.bg {    position : relative ;    width : 100%;    height : 100%;  }.bg >img {    width : 100%;    height : 100%;    z -index : -10;}.music_list {    position : absolute ;    left :50%;    transform : translateX (-50%);    top :50px ;    width : 340px ;    height : 340px ;    background -color : #ccc ;}/* .playlist1{} */.music {    /* float: left; */    position : absolute ;    width : 100px ;    height : 100px ;    background : url ("./img/1.png")no -repeat ;    background -size : 100% 100%;    line -height : 100px ;    text -align : ce
nter ;    font -size : 20px ;    color : #fff ;    }.playlist1{    left : 0;    top : 0;}.playlist2{    left : 120px ;    top : 0;123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
}.playlist3{    left : 240px ;    top : 0;}.playlist4{    right : 0;    top : 120px ;}.playlist5{    right : 0;    top : 240px ;}.playlist6{    bottom : 0;    left : 120px ;}.playlist7{    left : 0;    bottom : 0;}.playlist8{    left : 0px ;    top :120px ;}.playlist9{    left : 120px ;    top :120px ;}#start _btn {        background : url ("./img/2.jpg");    background -size : 100% 100%;}.piano {position : absolute ;left : 50%;transform : translateX (-50%);top : 460px ;width : 640px ;height : 300px ;background -color : #fff ;border :1px solid #000;}li {    list -style : none ;}.keys >ul >li {    float : left ;    width : 80px ;    height : 300px ;    box -sizing : border -box ;    border :1px solid #000;    color :#000;    font -size : 16px ;    font -weight : 700;    padding -left : 35px ;    /* background-color: pink; */}.keys >span {    position : absolute ;    width : 40px ;    height : 150px ;    background -color : #000;525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。