<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 style='background-color:#EEEEEE'>" : "<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 style='vertical-align:top'>" + 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" id="search" value="Search the Blog" onClick="searchBlog();" /> <input type="text" id="searchtext" name="searchtext" value="" /> <div id="blog"> </div> <input type="button" id="showall" value="Show All Blog Entries" onClick="showBlog();" /> <input type="button" id="viewrandom" value="View a Random Blog Entry" onClick="randomBlog();" /> </body> </html>