JavaScript高级 面向对象(2)--调试工具的使用:音乐循环播放
说明(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)--调试工具的使用:音乐循环播放的更多相关文章
- JavaScript高级 面向对象(5)--内存逻辑图画法
说明(2017.3.30): 1. 使用软件diagram designer,DiagramDesignerSetup1.28.zip,很小只有1M多,我用的自带画图软件.教学视频是“JavaScri ...
- 前端(十三)—— JavaScript高级:回调函数、闭包、循环绑定、面向对象、定时器
回调函数.闭包.循环绑定.面向对象.定时器 一.函数高级 1.函数回调 // 回调函数 function callback(data) {} // 逻辑函数 function func(callbac ...
- JavaScript高级 面向对象(10)--onload与jq中ready的区别
说明(2017.4.2): 1. 在body中放一个img标签,src链接一张图片,那么页面会先读取html的document文档,然后再读取外部资源(这里没加onload其实就是从上往下顺序读取). ...
- JavaScript高级 面向对象(1)--添加一个div标签
说明(2017.3.28): 1. JavaScript是一种基于对象的多范式编程语言,不是面向对象,但离开对象不能活. 范式编程是指编程习惯.方式,分为过程式.对象式和函数式编程. 2. 面向对象是 ...
- JavaScript高级 面向对象的程序设计 (一)《JavaScript高级程序设计(第三版)》
创建对象 继承 面向对象的语言都有一个表示---类.通过类我们可以创建多个具有相同属性的对象.但是,在JS中并没有类的概念,所以JS的对象也和其他语言的对象不同. 对象的定义:无序的属性集合,其属性可 ...
- JavaScript高级 面向对象的程序设计 (二)《JavaScript高级程序设计(第三版)》
二.继承 OO是面向对象语言最为有魅力的概念.一般的OO语言都实现了两种继承,接口继承和实现继承.接口继承只继承方法签名,而实际继承继承了实际的方法. 而在JS中,函数没有签名,所以无法实现接口继承. ...
- JavaScript高级 面向对象(13)--构造函数的执行过程
说明(2017-4-2 21:50:45) 一.构造函数是干什么用的: 1. 初始化数据的. 2. 在js给对象添加属性用的,初始化属性值用. 二.创建对象的过程: 1. 代码:var p = new ...
- JavaScript高级 面向对象(12)--引用类型值类型作为参数传递的特性
说明(2017-4-2 18:27:11): 1. 作为函数的参数,就是将函数的数据拷贝一份,传递给函数的定义中的参数. 函数foo()在调用的时候,做了两件事: (1)函数在调用的时候,首先需要将参 ...
- JavaScript高级 面向对象(11)--对象的动态特性-关联数组用法
说明(2017.4.2): 1. 对象的动态特性: (1)在js中,一个对象需要属性,就可以利用“对象名.属性 = 值”的方式为其添加,只要赋值成功,对象就新增这个属性. (2)对象属性的访问形式: ...
随机推荐
- CSS3动画效果之Transform
无意中翻看博客发现这个属性,就顺便熟悉了一下,百度了一下和查看了CSS3帮助文档,特整理一下 Transform 适应于对任一DOM元素的2D或3D转换,转换效果有:旋转.拉伸.平移.倾斜等. 目前浏 ...
- 细说HTML元素的隐藏和显示
CSS文档对HTML的显示和隐藏有2个属性可供选择: 1.display 2.visiblity 这2个有什么区别呢? display: display版本:CSS1/CSS2 兼容性:IE4+ NS ...
- OpenWrt中对USB文件系统的操作, 以及读写性能测试
参考 http://h-wrt.com/en/doc/flash 1. 查看usb存储在启动日志中的信息 # dmesg [ 5.720000] usbcore: registered new int ...
- 转:CMake安装和使用
CMake是一个跨平台的安装(编译)工具,可以用简单的语句来描述所有平台的安装(编译过程).他能够输出各种各样的makefile或者project文件,能测试编译器所支持的C++特性,类似UNIX ...
- Java API 各个包的内容解释
java.applet 提供创建 applet 所必需的类和 applet 用来与其 applet 上下文通信的类. java.awt 包含用于创建用户界面和绘制图形图像的所有类. java.awt. ...
- PHP-二进制文件和文本文件的区别
一.文本文件和二进制文件的定义 计算机上所有文件存储在存储设备上都是二进制的, 所以文本文件和二进制文件的区别并不是物理上的, 而是逻辑上的!简单来说, 文本文件是基于字符编码的文件, 常见的编码有A ...
- 基于Arch的live系统
今天在linuxsir的archlinux分区闲逛,看到了carbonjiao的帖子 http://bbs.linuxeye.cn/thread-652-1-1.html 同时还关注他的帖子:1.Ar ...
- HDUOJ----4004The Frog's Games(二分+简单贪心)
The Frog's Games Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65768/65768 K (Java/Others) ...
- subline上装node.js插件
此方法绝对可行,我已试过:http://www.mamicode.com/info-detail-84030.html
- python学习笔记——multiprocessing 多进程组件-队列Queue
1 消息队列 1.1 基本语法 消息队列:multiprocessing.Queue,Queue是对进程安全的队列,可以使用Queue实现对进程之间的数据传输:还有一个重要作用是作为缓存使用. Que ...