H5高级（综合） 利用拖动生成报表 并生成音乐播放器

方法一

    <div>
        <!-- 文件盒子 -->
        <div class="box b1">
            <button onclick="ShowBB()">生成报表</button>
            <div style="width: 100%; height: 100%; border: solid blue;" id="Ipt">
            </div>
        </div>
          <!-- 报表盒子 -->
          <div class="box b2" id="Bb">
        </div>
          <!-- 音乐盒子 -->
          <div class="box b3">
              <div>
                <ul id="Lul">
                </ul>
              </div>
              <audio controls="controls" id="player" loop="loop" autoplay="autoplay"></audio>
              <div id="ZhengZaiBoFang"></div>
        </div>
    </div>

    <script>
        var imgnum=0;
        var audionum=0;
        var othernum=0;
        //文件盒子(拖拽盒子)
        var ipt=document.getElementById("Ipt");
        //拖拽文件
        ipt.ondragover=function(){
            return false;
        }
        //拖拽事件
        ipt.ondrop=function(e)
        {
            //阻止冒泡
            e.preventDefault();
            //获取文件
            var files=e.dataTransfer.files;
            //定义字符串
            var html="";
            var html2="";
            for (var i = 0; i < files.length; i++) {
               html+="文件名："+files[i].name+"<br/>";
               html+="文件类型："+files[i].type+"<br/>";
               html+="<hr/>"
               //判断类型
               if (files[i].type.indexOf("image")!=-1) {
                   imgnum++;
               }
               else if(files[i].type.indexOf("audio")!=-1)
               {
                   audionum++;
                   //追加到第二个文件上
                   html2+="<a href='#' οnclick='play(" + "\"" + files[i].name + "\"" + ")'><li>"+files[i].name+"</li></a>"
               }
               else
               {
                   othernum++;
               }
            }
            //附加给DIV
            document.getElementById("Lul").innerHTML+=html2;
            ipt.innerHTML+=html;
        }
        function ShowBB()
        {
            //基于准备好的DOM ,初始化ECharts 实例
             var myChart = echarts.init(document.getElementById("Bb"));
            //指定配置项
            var option = {
            //标题
            title: {
                text: "标题"
            },
            tooltip: {
                trigger: "item"
            },
            series: [
                {
                    name: "类型",
                    type: "pie",
                     //南丁格尔图
                   roseType:'angle',
                    data: [      
                        {
                            name: "音乐", value: audionum
                        },
                        {
                            name: "其他", value: othernum
                        },
                        {
                            name:"图片",value:imgnum
                        }
                    ]
                },       
            ],     
         }
              //添加配置项（扇形图）
              myChart.setOption(option)
             }
   //播放音乐
   function play(eva){
      //获取播放器
      var player=document.getElementById("player");
      player.src="audio/"+eva;
      //展示正在播放的音乐
      document.getElementById("ZhengZaiBoFang").innerHTML="正在播放："+eva;
   }
    </script>

方法二