What have done in the last 2 days? (2010-10-05)

A mind struck me one night before I was going to sleep. It is from the movie named “The Curious Case of Benjamin Button”. In order to seeking his dead son, a man made a clock which is anticlockwise. Although time never comes back, I want to make one too. Everyone has something that he wants to get it back.

First, I chose HTML5 to draw an analog clock. Because HTML5 could also make animation like Adobe Flash does. It is the future web page development standard. Steve Jobs enjoy HTML5 too. I find some HTML5 clocks and all of them are very beautiful. I select CoolClock which could change skin of clock easily. It contains 3 import file:, excanvas.js, . The files can be downloaded from github git://github.com/simonbaird/CoolClock.git.

How to use CoolClock?

2.set body tag: <body align="center" onload="CoolClock.findAndCreateClocks()">

3.in the body tag where you want to put the Clock:

class='CoolClock::::' is the setting of a clock. Watermelon is the skin name in the moreskins.js.

I change a little of coolclock.js to make the clock could anticlockwise. During the process, I think one could change the skin of the clock when he click a button. At first, I try to use mycanvas.setAttribute(“attribute_name”,”new_value”) to change the class attribute to change the skin. But it is not work on canvas. In HTML5 document canvas doesn't has a class attribute but width and height. At last, I have to change the canvas tag to implement it. Let's make canvas tag is part of a div tag. In the html file where I want to put a clock add:

document.getElementById("pclock").innerHTML=

"<canvas id='clockid' class='CoolClock:watermelon:::'></canvas>";

</script>

if we want to change the canvas, we could define a JavaScript function like this:

function changeClock(){

var cStr = Array("swissRail","chunkySwiss","chunkySwissOnBlack","fancy","machine","simonbaird_com","classic","modern","simple","securephp","Tes2","Lev","Sand","Sun","Tor","Cold","Babosa","Tumb","Stone","Disc","watermelon");

//define a array to store different skin id pay attention to how to define a array in JS.

var n = Math.floor(Math.random()*21);

//get a random number to select a skin.

document.getElementById("pclock").innerHTML="<canvas id='clockid' class='CoolClock:"+cStr[n]+":::'></canvas>";

//change the canvas in the div tag

CoolClock.findAndCreateClocks();

//don't forget this to create a clock

}

In the html file, add a button:

The second job is to count down the left time from a define time use JS.

The follow function implements the time count job. It use a global variable to get the object Date.

function GetRTime()

{

var EndTime= new Date(userDate);

var NowTime = new Date();

var nMS =EndTime.getTime() - NowTime.getTime();

var nsec = nMS/1000;

var nD, nH, nM, ns;

nD =Math.floor(nsec / (3600 * 24));

nH=Math.floor(nsec/ 3600) % 24;

nM=Math.floor(nsec/60) % 60;

nS=Math.floor(nsec) % 60+1;

document.getElementById("RemainD").innerHTML=nD;

document.getElementById("RemainH").innerHTML=nH;

document.getElementById("RemainM").innerHTML=nM;

document.getElementById("RemainS").innerHTML=nS;

setTimeout("GetRTime()",1000);

}

Why I use a global variable userDate? In this part, setTimeout() is really hard to tackle. SetTimeout() use an independent stack to store the function that pass to it. If your function has a parameter you should use it like this: setTimeout(function(){GetRTime(a)},1000);

e.g.if a=5 but if you change the parameter a into 9 for a change in GetTime() the last value of 5 is store in the stack. When the setTimeout() is executed it will get the parameter stored in the stack execute GetTime(9) and wait for 1000ms then get a=5 from the stack and execute GetTime(5) and wait 1000ms......The GetTime() will execute the last parameter value and the new value for each time. So it doesn't well here when I want to change a different time to count.

When I want to change the date to count, add these two lines in the html file:

The button calls function changeTime(). I don't know why when I use a function with a parameter like onclick="changeTime(“2010/10/06”);” the javascript doesn't work.

function changeTime()

{

userDate = $("inDate").value;

//get the new date from input

isdate(userDate);

modify(userDate);

}

function isdate(theinput)

identifis the new date whether is a date format or not.

function isdate(theinput)

{

if(theinput.length>0)

{

var thechar=theinput.substring(4,5);

if(thechar!="/")

{

alert("请输入正确的日期格式(如2010/12/25)");

return false;

}

else

{

alert("Nothing input!");

return false;

}

return true;

}

Function modify(strs) change the time display. The parameter strs pass the new date to the function.

function modify(strs)

{

var EndTime= new Date(strs);

var year = EndTime.getFullYear();

var month = EndTime.getMonth()+1;

var day = EndTime.getDate();

$("CountMsg").innerHTML = "<font color='red'>距"+year+"年"+month+"月"+day+" 日还有: </font>"; //change the hints

to a new date

GetRTime();

}

Another work implements a servlet to handle user's request. Recently I change my phone No. for some reason. I want to make a check that if a person is my classmates, he could get my new phone No. The validation is very simple i.e. the last name of our head teacher. Because java didn't support Chinese natively and I don't want to change the charset of the jsp file, I just use Pinyin to check the string.

In the jsp file there is a form:

<div>

你是我的<select name="school" id="idschool">

</select> ?

</div>

<div>请输入三年级时班主任的姓氏拼音:<br>

</form>

to make a the form submited correctly, in the war/WEB-INF/web.xml file should add:

<servlet-name>sign</servlet-name>

<servlet-class>guestbook.SignGuestbookServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>sign</servlet-name>

<url-pattern>/sign</url-pattern>

</servlet-mapping>

In the package guestbook, SignGuestbookServlet.java handle the requset and make response.

public class SignGuestbookServlet extends HttpServlet{

private static final Logger log = Logger.getLogger(SignGuestbookServlet.class.getName());

public void doPost(HttpServletRequest req, HttpServletResponse resp)

throws IOException {

req.setCharacterEncoding("utf-8");

UserService userService = UserServiceFactory.getUserService();

User user = userService.getCurrentUser();

resp.setContentType("text/html;charset='utf-8' ");

String school = req.getParameter("school");

String headteacher = new String(req.getParameter("headteacher").getBytes("ISO-8859-1"),"utf-8");

String content = req.getParameter("content");

//log.info(school);

log.info(headteacher);

String htmlcontent = "<html><body align='center'><br><br><br><br>" +

" <strong>My No.<strong><br>" +

" <p><a href='/'>back</a></p><body></html>";

if(school!=null&&headteacher!=null){

if(school.equals("primary")&&headteacher.equals("XX")){

PrintWriter out = resp.getWriter();

out.println(htmlcontent);

Then all the work is done. I have forgotten most part of servlet and jsp which I learned 4 years ago. The application is hosted on Google app engine. I have learned this before for using gaeproxy. This time I want to do a small experiment by myself. Sina also supply a cloud platform name sina app, but it is not open to everybody now. The import thing is that Sina require fees but Google app engine is free for 500M each month. But there is a risk to use Google’s service, we don't know when we will not be able to access to Google through the GFW. I download eclipse Helios JavaEE edition, the simple java edition didn’t work for jsp. Then follow the google app engine document’s instruction to add Google eclipse plugin and Google app engine java sdk. I studied the “Guestbook” tutorial of the document to learn the development on google app engine. It take me half a day to learn the basic development on GAE, mainly because I make a dumb mistake (I use the simple java edition not support jsp). I have use Google app engine before so I have an account to upload my project. It is hard to select a good name for your app as a lot of name is not available. At last I select urdoomtime.appspot.com. Urdoomtime means your doom time because my object is to make a time left count down tool. The inspiration is from the movie “2012”, so I make 2012-12-21 as the default end time.

I just did a simple test when I study GAE. It's a good opportunity to recover my javascript and jsp&servlet knowledge. I also spend two hour to study JQuery lib. It is a cool lib that can help you construct complex javascript application easily. Google app engine is really a good platform to deploy your application by Google’s infrastructure.

The computer and network in the college of information engineer masters' study room are really rubbish. The poor environment makes you waste a lot time when you start an eclipse and search some material on Internet. However, I have to bear it for another year.

Appendix

How to download a project from github?

1.Download msysgit : http://code.google.com/p/msysgit/ and install it

2.Create a directory where you want to put the project. E:\clock\

3.In the directory select “Git Bash” on the right click menu. Then a command window show up.

4.Use git clone to download the project: “git clone git://github.com/simonbaird/CoolClock.git”

Google app engine homepage?

http://code.google.com/appengine/

my google app engine test page?

Http:// urdoomtime.appspot.com

JQuery homepage?

Jquery.com

A good website to learn jQuery?

http://www.k99k.com/jQuery_getting_started.html

CoolClock homepage?

http://randomibis.com/coolclock/

posted @ 2010-10-06 09:29 莫忆往西阅读(156) 评论(0) 编辑收藏举报

刷新页面返回顶部

Time Goes By

如花美眷似水流年

What have done in the last 2 days? (2010-10-05)

公告

Time Goes By

如花美眷 似水流年

What have done in the last 2 days? (2010-10-05)

公告

如花美眷似水流年