这是我自己写的一个码表计时器，运用jsp+servlet技术，用javascript，CSS3，HTML5和Ajax增强交互，开发环境为win7+MyEclipse10.5+jdk1.7+tomcat7，完成后的界面如下：
初始界面如下：
该界面中开始计时到分计的四个按钮为禁用状态
第二个界面是查看记录界面，从本地读取文件，呈现到网页中
正在计时，这时点击分计按钮，可以增加记录
此为将记录保存到本地
此为保存后查询，另外说明一下，清屏按钮能将当前所有状态还原为初始状态
项目缩略图如下：
servlet核心代码如下：
response.setContentType("text/html");
File file;
PrintStream ps;
PrintWriter out;
FileInputStream fis;
String text;
String oper="";
if(request.getParameter("operation")!=null){
oper=request.getParameter("operation");
if(oper.equals("write")){
out = response.getWriter();
text=request.getParameter("saveText");
if(text!=null&&!(text.equals(""))){
file=new File("E:\\yile\\webtest\\js\\log.txt");
if(!file.exists()){
file.createNewFile();
}
ps=new PrintStream(new FileOutputStream(file));
ps.write(text.getBytes());
out.print("success");
}else{
out.print("failure");
}
}else if(oper.equals("read")){
out=response.getWriter();
file=new File("E:\\yile\\webtest\\js\\log.txt");
fis=new FileInputStream(file);
byte[] b=new byte[1024];
StringBuffer sb=new StringBuffer();
if(fis.read(b)!=-1){
sb.append(new String(b));
b=new byte[1024];
}
out.print(sb.toString().trim());
}
}
CSS3设置圆角代码如下：
#begin,#stop,#reBegin,#refresh,#clearScreen{
display:inline-block;
position:relative;
margin:10px;
padding:0 20px;
text-align:center;
text-decoration:none;
font:bold 12px/25px Arial,sans-serif;
text-shadow:1px 1px 1px rgba(255,255,255,.22);
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
-webkit-box-shadow:1px 1px 1px rgba(0,0,0,.29),inset 1px 1px 1px rgba(255,255,255,.44);
-moz-box-shadow:1px 1px 1px rgba(0,0,0,.29),inset 1px 1px 1px rgba(255,255,255,.44);
box-shadow:1px 1px 1px rgba(0,0,0,.29),inset 1px 1px 1px rgba(255,255,255,.44);
-webkit-transition:all 0.15s ease;
-moz-transition:all 0.15s ease;
-o-transition:all 0.15s ease;
-ms-transition:all 0.15s ease;
transition:all 0.15s ease;
color:#515151;
background:#d3d3d3;/*old browsers */
background:-moz-linear-gradient(top,#d3d3d3 0%,#8a8a8a 100%);/*FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#d3d3d3),color-stop(100%,#8a8a8a));/*chrome,Safari4+ */
background:-webkit-linear-gradient(top,#d3d3d3 0%,#8a8a8a 100%);/*chrome10+,safari5.1+ */
background:-o-linear-gradient(top,#d3d3d3 0%,#8a8a8a 100%);/*opera 11.10+ */
background:-ms-linear-gradient(top,#d3d3d3 0%,#8a8a8a 100%);/*ie10+ */
background:linear-gradient(top,#d3d3d3 0%,#8a8a8a 100%);/*w3c */
}
javascript代码结构如下（太长就不粘贴了，如谁有需要，请联系我）：
写的差不多了。
