说明（2017.3.29）：

1. 在调试工具console里输入var v = document.createElement("audio")，然后再source的watch里输入v回车，就能看到audio的所有事件，本次使用的是onended事件。

2. json不能直接遍历获得索引，只能通过for循环获取个数，再用for循环遍历。所以最好用数组存放歌名。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

     <audio id="music" src="Taylor Swift - Love Story.mp3" controls="controls" autoplay="autoplay">浏览器不支持</audio>

 </body>

 <script type="text/javascript">

     var songs = {

         1:"Taylor Swift - Love Story.mp3",

         2:"unity.mp3",

         3:"alone.mp3",

         4:"chinese-supermarkets-stop-selling-brazilian-meat-over-food-safety-scandal.mp3"

     };

     // var music = document.getElementById("music");

     // var num = (function(){

     //     var num = 0;

     //     for(var i in songs){

     //         num ++

     //     }

     //     return num;

     // })();

     // var i = 1;

     // setInterval(function(){

     //     if(i < num){

     //         if(music.ended){

     //             music.src = songs[i+1];

     //             i++;

     //         }

     //     }else{

     //         i = 0;

     //     }

     // },1000);

     var num = (function(){

         var num = 0;

         for(var i in songs){

             num ++

         }

         return num;

     })();

     var i = 1;

     music.onended = function(){

         if(i < num){

             music.src = songs[i+1];

             i++;

         }else{

             i = 0;

             music.src = songs[i+1];

             i++;

         }

     };

 </script>

 </html>

JavaScript高级 面向对象（2）--调试工具的使用：音乐循环播放的更多相关文章

  1. JavaScript高级 面向对象（5）--内存逻辑图画法

    说明(2017.3.30): 1. 使用软件diagram designer,DiagramDesignerSetup1.28.zip,很小只有1M多,我用的自带画图软件.教学视频是“JavaScri ...

  2. 前端（十三）—— JavaScript高级：回调函数、闭包、循环绑定、面向对象、定时器

    回调函数.闭包.循环绑定.面向对象.定时器 一.函数高级 1.函数回调 // 回调函数 function callback(data) {} // 逻辑函数 function func(callbac ...

  3. JavaScript高级 面向对象（10）--onload与jq中ready的区别

    说明(2017.4.2): 1. 在body中放一个img标签,src链接一张图片,那么页面会先读取html的document文档,然后再读取外部资源(这里没加onload其实就是从上往下顺序读取). ...

  4. JavaScript高级 面向对象（1）--添加一个div标签

    说明(2017.3.28): 1. JavaScript是一种基于对象的多范式编程语言,不是面向对象,但离开对象不能活. 范式编程是指编程习惯.方式,分为过程式.对象式和函数式编程. 2. 面向对象是 ...

  5. JavaScript高级 面向对象的程序设计 （一）《JavaScript高级程序设计（第三版）》

    创建对象 继承 面向对象的语言都有一个表示---类.通过类我们可以创建多个具有相同属性的对象.但是,在JS中并没有类的概念,所以JS的对象也和其他语言的对象不同. 对象的定义:无序的属性集合,其属性可 ...

  6. JavaScript高级 面向对象的程序设计 （二）《JavaScript高级程序设计（第三版）》

    二.继承 OO是面向对象语言最为有魅力的概念.一般的OO语言都实现了两种继承,接口继承和实现继承.接口继承只继承方法签名,而实际继承继承了实际的方法. 而在JS中,函数没有签名,所以无法实现接口继承. ...

  7. JavaScript高级 面向对象（13）--构造函数的执行过程

    说明(2017-4-2 21:50:45) 一.构造函数是干什么用的: 1. 初始化数据的. 2. 在js给对象添加属性用的,初始化属性值用. 二.创建对象的过程: 1. 代码:var p = new ...

  8. JavaScript高级 面向对象（12）--引用类型值类型作为参数传递的特性

    说明(2017-4-2 18:27:11): 1. 作为函数的参数,就是将函数的数据拷贝一份,传递给函数的定义中的参数. 函数foo()在调用的时候,做了两件事: (1)函数在调用的时候,首先需要将参 ...

  9. JavaScript高级 面向对象（11）--对象的动态特性-关联数组用法

    说明(2017.4.2): 1. 对象的动态特性: (1)在js中,一个对象需要属性,就可以利用“对象名.属性 = 值”的方式为其添加,只要赋值成功,对象就新增这个属性. (2)对象属性的访问形式: ...

随机推荐

  1. Redis学习（5）-Jedis(Java操作redis数据库技术)

    Java连接redis 一,导入jar包 Redis有什么命令,Jedis就有什么方法 设置防火墙 在Linux上面运行如下代码: 单实例:Jedis实例: package com.jedis.dem ...

  2. sql优化经历（转存+记录）

    sql优化经历 补充:看到这么多朋友对sql优化感兴趣,我又重新补充了下文章的内容,将更多关于sql优化的知识分享出来, 喜欢这篇文章的朋友给个赞吧,哈哈,欢迎交流,共同进步. 2015-4-30补充 ...

  3. WINDOWS操作系统中可以允许最大的线程数

      默认情况下,一个线程的栈要预留1M的内存空间 而一个进程中可用的内存空间只有2G,所以理论上一个进程中最多可以开2048个线程 但是内存当然不可能完全拿来作线程的栈,所以实际数目要比这个值要小.  ...

  4. Move semantics(C++11)

    /*  * Compile with:   *       g++ move_test.c -o move_test -std=c++11 -g -fno-elide-constructors  * ...

  5. 小白心目中的Java抽象类(abstract class)

    在java开发中,我们有时会定义了一个父类,这个父类只有对方法的描述,但却没有在父类中写出对方法的实现,这种被定义的方法称为抽象方法.那么理所当然,含有抽象方法的类就称为抽象类.用关键字abstrac ...

  6. Servlet线程安全性

    问题:使用以下的代码演示servlet的线程安全问题? public class MultiThreadQuestion extends HttpServlet { public int count ...

  7. 【jQuery】form表单元素序列化为json对象

    序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head&g ...

  8. Android清空Fragment回退栈

    啊= =:国内的资料为什么都是抄来抄去的. 最后上了Stack Overflow才找到了正解. FragmentManager fragmentManager = getFragmentManager ...

  9. Unix环境高级编程(十七)网络IPC套接字

    通过网络套接字可以使得不同计算机上运行的进程相互通信. 1.创建套接字 #include <sys/socket.h> Int socket( int domain, int type, ...

  10. powerdesigner学习笔记【转载】

    转自:http://blog.itpub.net/11968859/viewspace-620440/ 谢谢! 1.做CDM模型的时候,因为开始定义ITEM的时候,没有注意把NAME和CODE全定义成 ...