WebApp for LBS Using JavaScript and HTML5

A web app created using JavaScript, HTML5, and CSS3 that can display the current location and movement path. It utilizes the Baidu Maps API to draw the day’s path with a green line on the map. A marker shows the current location. The circle on the homepage is drawn using canvas, but I haven’t managed to include text in it yet—still working on that. The acquired data is stored in localStorage. Currently, it locates every 3 seconds. I’m unsure about the data volume; if it’s large, localStorage might not be suitable. ...

November 10, 2012 · 1 min · Zhiya

An Electronic Clock Made with Canvas

Recently, I’ve been learning JavaScript and came across the canvas drawing section, so I created an electronic clock to practice. Each segment of the electronic clock is drawn using canvas, and then JavaScript is used to get the time, executing every millisecond to update the canvas. Demo link: http://labs.simpleapples.com/timer/ GitHub: https://github.com/simpleapples/javascripttimer

November 7, 2012 · 1 min · Zhiya

The First Offer and Rejection Letter in My Life

I received the first offer of my life three hours ago from a large software company in China. Two days ago, I attended the company’s presentation at my school, more out of curiosity than anything else. With the mindset of gaining experience, I participated in the on-site written test and interview. And just three hours ago, a fresh offer was placed in front of me. Oh, so this is what an offer looks like. ...

November 1, 2012 · 1 min · Zhiya

A Little Understanding of Constructor and Prototype in Javascript

Constructor and prototype, as the names suggest, mean the builder (constructor) and the prototype. From a semantic perspective, if object A constructs object B, then A is the constructor of B. If the form of object A comes from object B, then object B is the prototype of A. Let’s look at a piece of code: function Person() { Person.prototype.name = "myname"; Person.prototype.age = 18; Person.prototype.sayName = function () { alert(this.name); }; } var person1 = new Person(); person1.sayName(); Here, Person is the constructor of Person.prototype. Why? Because Person constructed Person.prototype. However, the prototype of person1 is not Person.prototype. When person1 is initialized, it can be understood as a copy of Person (i.e., a new instance) is given to person1. Every time Person is instantiated, it inherits (just called inheritance for convenience) a copy of name, age, and sayName from its prototype. person1 is a copy of Person, but the prototype is not copied, so the prototype of person1 is undefined. ...

October 22, 2012 · 2 min · Zhiya

Solution for Browsers Not Supporting removeAttribute()

Today, while working on a webpage, I wanted to implement a feature where a background image is applied to a li element on mouse over, and removed on mouse out. Implemented using JavaScript: if(action == 0) { btn.style.backgroundImage = "url(images/index_nav1_07.jpg)"; btn.style.backgroundRepeat = "repeat-x"; } else { btn.removeAttribute("style"); } I found that this worked for Firefox and Internet Explorer, but the mouse out action did not execute in Chrome. I then discovered that Chrome might not support removeAttribute(), so I added a compatibility fix: ...

October 20, 2012 · 1 min · Zhiya