源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-使用构造函数语法创建对象
2016-09-27 08:40
1106 查看
代码示例:
JS代码:
HTML代码:
CSS代码:(参考源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-使用字面量语法创建对象,http://blog.csdn.net/hpdlzu80100/article/details/52677426 )
JS代码:
// Create the template for objects that are hotels function Hotel(name, rooms, booked) { this.name = name; this.rooms = rooms; this.booked = booked; this.checkAvailability = function() { return this.rooms - this.booked; }; } // Create two hotel objects var quayHotel = new Hotel('PD', 80, 8); var parkHotel = new Hotel('Huang', 120, 99); // Update the HTML for the page var details1 = quayHotel.name + ' rooms: '; details1 += quayHotel.checkAvailability(); var elHotel1 = document.getElementById('hotel1'); elHotel1.textContent = details1; var details2 = parkHotel.name + ' rooms: '; details2 += parkHotel.checkAvailability(); var elHotel2 = document.getElementById('hotel2'); elHotel2.textContent = details2; /* NOTE: textContent does not work in IE8 or earlier You can use innerHTML on lines 21 and 26, but note the security issues on p228-231 */
HTML代码:
<!DOCTYPE html> <html> <head> <title>JavaScript & jQuery - Chapter 3: Functions, Methods & Objects - Object Constructor</title> <link rel="stylesheet" href="css/c03.css" /> </head> <body> <h1>TravelWorthy</h1> <div id="info"> <h2>hotel availability</h2> <div id="hotel1"></div> <div id="hotel2"></div> </div> <script src="js/multiple-objects.js"></script> </body> </html>
CSS代码:(参考源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-使用字面量语法创建对象,http://blog.csdn.net/hpdlzu80100/article/details/52677426 )
相关文章推荐
- 源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-使用字面量语法创建对象
- 源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-文档对象模型
- 源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-String对象
- 源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-章节示例
- 源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-浏览器对象模型
- 源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-使用变量来存储布尔值
- 源码-JavaScript&jQuery交互式前端开发-第5章-文档对象模型-章节示例
- 源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-在字符串中使用引号
- 源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-使用变量来存储字符串
- 源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-使用变量来存储数字
- 源码-JavaScript&jQuery交互式前端开发-第5章-文档对象模型-更新文本和标签
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-使用事件委托
- 源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-章节示例
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-HTML5事件
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-Focus和blur事件
- 源码-JavaScript&jQuery交互式前端开发-第7章-JQuery-基本示例
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-示例(Example)
- 源码-JavaScript&jQuery交互式前端开发-第1章-编程基础知识
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-鼠标事件-确定光标位置
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-变动事件