<html>
<head>
<title>YouCube - The Blog for Cube Puzzlers</title>
<script type="text/javascript">
// Custom Date function to display a date in MM/DD/YYYY format
Date.prototype.shortFormat = function() {
return (this.getMonth() + 1) + "/" + this.getDate() + "/" + this.getFullYear();
}
// 构造函数
// Blog object constructor
function Blog(body, date, image) {
// Assign the properties
// 实例特性
this.body = body;
this.date = date;
this.image = image;
}
// 实例方法
// Return a string representation of the blog entry
Blog.prototype.toString = function() {
return "[" + this.date.shortFormat() + "] " + this.body;
};
// Return a formatted HTML representation of the blog entry
Blog.prototype.toHTML = function(highlight) {
// Use a gray background as a highlight, if specified
var blogHTML = "";
blogHTML += highlight ? "<p >" : "<p>";
// Generate the formatted blog HTML code
if (this.image) {
blogHTML += "<strong>" + this.date.shortFormat() + "</strong><br /><table><tr><td><img src='" +
this.image + "'/></td><td >" + this.body + "</td></tr></table><em>" +
this.signature + "</em></p>";
}
else {
blogHTML += "<strong>" + this.date.shortFormat() + "</strong><br />" + this.body +
"<br /><em>" + this.signature + "</em></p>";
}
return blogHTML;
};
// See if the blog body contains a string of text
Blog.prototype.containsText = function(text) {
return (this.body.toLowerCase().indexOf(text.toLowerCase()) != -1);
};
// Set the blog-wide signature
//类特性
Blog.prototype.signature = "by Puzzler Ruby";
// Sort helper to sort blog entries in reverse chronological order (most recent first)
//类方法
Blog.blogSorter = function(blog1, blog2) {
return blog2.date - blog1.date;
};
// Global array of blog entries
var blog = [ new Blog("Got the new cube I ordered. It's a real pearl.", new Date("08/14/2008")),
new Blog("Solved the new cube but of course, now I'm bored and shopping for a new one.", new Date("08/19/2008")),
new Blog("Managed to get a headache toiling over the new cube. Gotta nap.", new Date("08/16/2008")),
new Blog("Found a 7x7x7 cube for sale online. Yikes! That one could be a beast.", new Date("08/21/2008")),
new Blog("Met up with some fellow cubers to discuss the prospect of a 7x7x7 cube. Mixed feelings.", new Date("08/29/2008")),
new Blog("Went ahead and ordered the scary 7x7x7 cube. Starting a mental exercise regimen to prepare.", new Date("09/01/2008")),
new Blog("Attended a rally outside of a local toy store that stopped carrying cube puzzles. Power to the puzzlers!", new Date("09/03/2008")),
new Blog("Got the new 7x7x7 cube. Could be my last blog post for a while...", new Date("09/05/2008")),
new Blog("Wow, it took me a couple of weeks but the new cube is finally solved!", new Date("09/19/2008"), "cube777.png") ];
// Show the list of blog entries
function showBlog(numEntries) {
// First sort the blog
blog.sort(Blog.blogSorter);
// Adjust the number of entries to show the full blog, if necessary
if (!numEntries)
numEntries = blog.length;
// Show the blog entries
var i = 0, blogListHTML = "";
while (i < blog.length && i < numEntries) {
blogListHTML += blog[i].toHTML(i % 2 == 0);
i++;
}
// Set the blog HTML code on the page
document.getElementById("blog").innerHTML = blogListHTML;
}
// Search the list of blog entries for a piece of text
function searchBlog() {
var searchText = document.getElementById("searchtext").value;
for (var i = 0; i < blog.length; i++) {
// See if the blog entry contains the search text
if (blog[i].containsText(searchText)) {
alert(blog[i]);
break;
}
}
// If the search text wasn't found, display a message
if (i == blog.length)
alert("Sorry, there are no blog entries containing the search text.");
}
// Display a randomly chosen blog entry
function randomBlog() {
// Pick a random number between 0 and blog.length - 1
var i = Math.floor(Math.random() * blog.length);
alert(blog[i]);
}
</script>
</head>
<body onLoad="showBlog(5);">
<h3>YouCube - The Blog for Cube Puzzlers</h3>
<img src="cube.png" alt="YouCube" />
<input type="button" value="Search the Blog" onClick="searchBlog();" />
<input type="text" name="searchtext" value="" />
<div >
</div>
<input type="button" value="Show All Blog Entries" onClick="showBlog();" />
<input type="button" value="View a Random Blog Entry" onClick="randomBlog();" />
</body>
</html>