What have done in the last 2 days? (2010-10-05)(Part 1)
(This content is also available at: here)
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: coolclock.js, excanvas.js, moreskins.js. The files can be downloaded from github git://github.com/simonbaird/CoolClock.git.
How to use CoolClock?
1. In the head section of your html file add the following:
<!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="js/coolclock.js"></script>
<script type="text/javascript" src="js/moreskins.js"></script>
2. set body tag: <body align="center" onload="CoolClock.findAndCreateClocks()">
3. in the body tag where you want to put the Clock:
<canvas id='clockid' class='CoolClock:watermelon:::'></canvas>
class='CoolClock:watermelon:::' 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:
<div id="pclock"></div>
<script language="JavaScript">
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:
<input type="button" id="changeclock" value="换个模样" onclick="changeClock();" />
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:
<input type="text" id="inDate" value="2010/10/11" />
<input type="button" id="changedate" value="修改日期" onclick="changeTime();" />
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();
}
本文使用Blog_Backup未注册版本导出，请到soft.pt42.com注册。
