0602Web钢琴

最新推荐文章于 2024-04-03 09:34:39 发布

叫我小袁就好

最新推荐文章于 2024-04-03 09:34:39 发布

阅读量377

点赞数 2

本文链接：https://blog.csdn.net/qq_42788101/article/details/90574713

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web钢琴</title>
    <style>
        .main{
            margin: 0 auto;
            width: 640px;
            height: 420px;
            position: relative;
            top: 150px;
        }
        ul li{
            width: 60px;
            height: 360px;
            float: left;
            position: relative;
            display: block;
        }
        div.key{
            position: absolute;
            float: left;
            top: 40px;
            text-align: center;
            font-size: 16px;
            background-position: bottom left;
            background-repeat: repeat-x;
        }
        .key:hover{
            background-color: #cacbd1;
            cursor: pointer;
        }
        div.whiteKey{
            width: 60px;
            height: 360px;
            color: #666;
            background-color: #eee;
            border: 2px solid #999;
            background-image: url("../../img/images0602/key_back_white.png");
        }
       div.blackKey{
           width: 36px;
           height: 200px;
           color: #ccc;
           margin-left: 40px;
           z-index: 999;
           background-color: #666;
           border: 2px solid #666;
           background-image: url("../../img/images0602/key_back_black.png");
       }

    </style>
</head>
<body>
<section class="main">
    <center><h2>Web钢琴</h2></center>
    <audio src="../../music/audio0602/c4.ogg"></audio>
    <audio src="../../music/audio0602/c4m.ogg"></audio>
    <audio src="../../music/audio0602/d4.ogg"></audio>
    <audio src="../../music/audio0602/d4m.ogg"></audio>
    <audio src="../../music/audio0602/e4.ogg"></audio>
    <audio src="../../music/audio0602/f4.ogg"></audio>
    <audio src="../../music/audio0602/f4m.ogg"></audio>
    <audio src="../../music/audio0602/g4.ogg"></audio>
    <audio src="../../music/audio0602/g4m.ogg"></audio>
    <audio src="../../music/audio0602/a4.ogg"></audio>
    <audio src="../../music/audio0602/a4m.ogg"></audio>
    <audio src="../../music/audio0602/b4.ogg"></audio>
    <audio src="../../music/audio0602/c5.ogg"></audio>
    <ul>
        <li>
            <div class="key whiteKey">c4</div>
            <div class="key blackKey">c4m</div>
        </li>
        <li>
            <div class="key whiteKey">d4</div>
            <div class="key blackKey">d4m</div>
        </li>
        <li>
            <div class="key whiteKey">c4</div>
        </li>
        <li>
            <div class="key whiteKey">f4</div>
            <div class="key blackKey">f4m</div>
        </li>
        <li>
            <div class="key whiteKey">g4</div>
            <div class="key blackKey">g4m</div>
        </li>
        <li>
            <div class="key whiteKey">a4</div>
            <div class="key blackKey">a4m</div>
        </li>
        <li>
            <div class="key whiteKey">b4</div>
        </li>
        <li class="nobd">
            <div class="key whiteKey">c5</div>
        </li>
    </ul>
</section>

<script type="text/javascript">
    window.onload=function(){
        var myDivs=document.getElementsByTagName('div');
        var myAudios=document.getElementsByTagName('audio');
        for(var i=0;i<14;i++){
            myDivs[i].index=i;
            myDivs[i].onclick=function(){
                myAudios[this.index].load();
                myAudios[this.index].play();
            }
        }
    }
</script>

</body>
</html>

袁同学——2019年5月26日

叫我小袁就好

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
0602Web钢琴

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Web钢琴</title> <style> .main{ margin: 0 auto; ...
复制链接

扫一扫