[置顶] web版码表计时器

这是我自己写的一个码表计时器，运用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代码结构如下（太长就不粘贴了，如谁有需要，请联系我）：

 


 
 


 
写的差不多了。

 

 

 

• 
• 大小: 9 KB

• 
• 大小: 10.4 KB

• 
• 大小: 10.4 KB

• 
• 大小: 10.7 KB

• 
• 大小: 11.9 KB

• 
• 大小: 11.5 KB

• 
• 大小: 22.3 KB

• 
• 大小: 13.4 KB

• 查看图片附件