这是我自己写的一个码表计时器,运用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代码结构如下(太长就不粘贴了,如谁有需要,请联系我):
写的差不多了。
相关推荐
这是我仿照移动端的码表计时器做的web版码表计时器,功能齐全,开发平台为win7,MyEclipse10.5,tomcat7.47。
状态代码表.xls 一起分享!!! 状态代码表.xls 一起分享!!! 状态代码表.xls 一起分享!!!
多多输入法生成器、多多码表编辑器(2个) 用于制作输入法和整理输入法码表
ASCII码表 ASCII码表 ASCII码表 ASCII码表 ASCII码表 ASCII码表 ASCII码表 ASCII码表 ASCII码表 ASCII码表 ASCII码表 ASCII码表 ASCII码表 ASCII码表 ASCII码表 ASCII码表 ASCII码表 ASCII码表 ASCII码表 ASCII码表 ...
psp 码表,可供psp游戏汉化的套件,
ASCII码表完整版ASCII码表完整版ASCII码表完整版ASCII码表完整版ASCII码表完整版
ASCII码表ASCII码表ASCII码表ASCII码表
win10都内置有微软五笔,它的码表默认是86五笔,如果你对系统内置的码表不满意,可以用这个程序,加上它内置的输入法码表来替换系统的码表。
ASCII码表完整版ASCII码表完整版.rarASCII码表完整版.rarASCII码表完整版.rar
win10下面98版及自定义词库必备神器,资源包里包括海峰五笔、极点五笔及本人自定义的98版五笔词库,我现在使用的版本,绝对好用!
将此码表解压内容代替95版自定义词库,可将五笔86版改为98版!
anscii码表(完整版)anscii码表(完整版)anscii码表(完整版)
汉字区位码表 汉字区位码表 汉字区位码表
极点中文98版码表和词库. 极点五笔,是非常好的一款五笔软件。
微软五笔是86版,可用此编辑器将98版词库和新世纪词库修改为微软五笔的词库,简单易用
TableTextService注册txt码表方法安装的五笔,优点是干净就一个txt码表文件,x64可用兼容性高,缺点没有软键盘,没有z通用码,已知问题在diabloIII游戏中打一字会出现两个一模一样的字。
ascll码表完整版超详细
ASCII码表pdf版
ASCII码表 打印版 适合单张打印出来看,很方便