下拉菜单里选择歌曲播放

jsp页面

 

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <style type="text/css">
      #divmusic1{
        background-image: url("/education/media/images/musicbackground.png");
        border: 1;
        width: 268px;
        height: 395px;
     
      }
     
      #person{
        
           margin-top: 45px;
           margin-left: 50px;
      }
     
      #play{
        
        margin-top: 20px;
          margin-left: 0px;
      }
     
     #music{
         margin-top:20px;
           margin-left:50px;
           width:160px;
     
     }
  </style>
    

  </head>
 
  <body style="margin: 0;padding: 0">
       <div>
               <div id="divmusic1">
                  <div id="person"><img  src="/education/media/images/music_person.png"/></div>
                  <div id="playMusic"><embed id="play" src="/education/views/music/music/water.mp3" autostart=true ></embed></div>
                  <div >
                      <select id="music" onchange="change()" name="music">
                         <option value="选择歌曲">选择音乐</option>
                         <option value="1">春天在哪里</option>
                         <option value="2">小白兔乖乖</option>
                         <option value="3">喜洋洋和灰太狼</option>
                         <option value="4">幸福的孩子爱唱歌</option>
                         <option value="5">捉泥鳅</option>
                         <option value="6">乖孩子</option>
                         <option value="7">一闪一闪亮晶晶</option>
                         <option value="8">好孩子要诚实</option>
                      </select>
                  </div>
                   <div align="center" style="margin-top: 20px;">
                      <img id="yes" src="/education/media/images/commit.png"/>
                  </div>        
               </div>
       </div>
        <script type="text/javascript">
               function change(){
                   var A=document.getElementById("music").value;
                   var a="/education/views/music/music/spring.mp3";
                   var b="/education/views/music/music/rabbit.mp3";
                   var c="/education/views/music/music/Wolf.mp3";
                   var d="/education/views/music/music/HappyChildren.mp3";
                   var e="/education/views/music/music/CatchLoach.mp3";
                   var f="/education/views/music/music/LovelyChildren.mp3";
                   var g="/education/views/music/music/FlashTwinkle.mp3";
                   var h="/education/views/music/music/GoodChildren.mp3";
                if("1"==A){
                    play.stop();
                    document.getElementById("playMusic").innerHTML="<embed name='play' id='play' src='" + a +"' autostart='true'></embed>";
                }
                if("2"==A){
                     play.stop();
                    document.getElementById("playMusic").innerHTML="<embed name='play' id='play' src='" + b +"' autostart='true'></embed>";
                }
                if("3"==A){
                     play.stop();
                    document.getElementById("playMusic").innerHTML="<embed name='play' id='play' src='" + c +"' autostart='true'></embed>";
                }
                if("4"==A){
                     play.stop();
                    document.getElementById("playMusic").innerHTML="<embed name='play' id='play' src='" + d +"' autostart='true'></embed>";
                }
                if("5"==A){
                     play.stop();
                    document.getElementById("playMusic").innerHTML="<embed name='play' id='play' src='" + e +"' autostart='true'></embed>";
                }
                if("6"==A){
                     play.stop();
                    document.getElementById("playMusic").innerHTML="<embed name='play' id='play' src='" + f +"' autostart='true'></embed>";
                }
                if("7"==A){
                     play.stop();
                    document.getElementById("playMusic").innerHTML="<embed name='play' id='play' src='" + g +"' autostart='true'></embed>";
                }
                if("8"==A){
                     play.stop();
                    document.getElementById("playMusic").innerHTML="<embed name='play' id='play' src='" + h +"' autostart='true'></embed>";
                }
               
            }
       </script>
  </body>
</html>

你可能感兴趣的:(音乐 背景 下拉菜单)