您的位置：首页 > Web前端 > JQuery

源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-章节示例

2016-09-27 10:49 453 查看

示例效果：

JS代码：

<pre class="javascript" name="code">/* The script is placed inside an immediately invoked function expression
which helps protect the scope of variables */

(function() {

// PART ONE: CREATE HOTEL OBJECT AND WRITE OUT THE OFFER DETAILS

// Create a hotel object using object literal syntax
var hotel = {
name: 'PDH',
roomRate: 588, // Amount in dollars
discount: 18,  // Percentage discount
offerPrice: function() {
var offerRate = (this.roomRate * ((100 - this.discount) / 100)).toFixed(0);
return offerRate;
}
};

// Write out the hotel name, standard rate, and the special rate
var hotelName, roomRate, specialRate;                    // Declare variables

hotelName = document.getElementById('hotelName');        // Get elements
roomRate = document.getElementById('roomRate');
specialRate = document.getElementById('specialRate');

hotelName.textContent = hotel.name;                      // Write hotel name
roomRate.textContent =  '$' + hotel.roomRate.toFixed(2); // Write room rate
specialRate.textContent = '$' + hotel.offerPrice();      // Write offer price

// PART TWO: CALCULATE AND WRITE OUT THE EXPIRY DETAILS FOR THE OFFER
var expiryMsg; // Message displayed to users
var today;     // Today's date
var elEnds;    // The element that shows the message about the offer ending

function offerExpires(today) {
// Declare variables within the function for local scope
var weekFromToday, day, date, month, year, dayNames, monthNames;

// Add 7 days time (added in milliseconds)
weekFromToday = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000);

// Create arrays to hold the names of days / months
dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

// Collect the parts of the date to show on the page
day = dayNames[weekFromToday.getDay()];
date = weekFromToday.getDate();
month = monthNames[weekFromToday.getMonth()];
year = weekFromToday.getFullYear();

// Create the message
expiryMsg = 'Offer expires next ';
expiryMsg += day + ' <br />(' + date + ' ' + month + ' ' + year + ')';
return expiryMsg;
}

today = new Date();                             // Put today's date in variable
elEnds = document.getElementById('offerEnds');  // Get the offerEnds element
elEnds.innerHTML = offerExpires(today);         // Add the expiry message

// Finish the immediately invoked function expression
}());

HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>JavaScript & jQuery - Chapter 3: Functions, Methods & Objects - Example</title>
<link rel="stylesheet" href="css/c03.css" />
</head>
<body>
<h1>TravelWorthy</h1>
<div id="info">
<h2>latest hotel offer</h2>
<div id="hotelName"></div>
<div id="roomRate"></div>
<div id="specialRate"></div>
<p>room rate when you book 2 or more nights</p>
<div id="offerEnds"></div>
</div>
<script src="js/example.js"></script>
</body>
</html>
CSS代码：（参考源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-使用字面量语法创建对象，http://blog.csdn.net/hpdlzu80100/article/details/52677426 ）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航