仿照移动端码表计时器开发的web版码表计时器

这个是我仿照移动端的码表计时器做的一款web版的码表计时器。运用的主要技术有javascript，CSS3，Ajax，jsp等等。我用了整整三天来开发这款小应用，虽然没有什么用处，但让我对以前所学的知识有了一个总结性的应用。下面来详细介绍一下我的这一款小应用：

1.图1为码表启动时的初始界面，其中的按钮“开始计时”，“停止计时”，“重新计时”，“分计”为禁用状态。“清屏”按钮为可用状态。用户可以点击下拉列表框来选择操作项，可供选择的列表项为：“保存”，“分别计时“，”以圈计时“，”查看记录“。当前点击”保存“时，由于当前没有计时内容需要保存，所以会提示”没有记录需要保存！“；当点击”分别计时“时，计时器的计时方式为分别计时，”开始计时“，”重新计时“，”分计“按钮被激活；当点击”以圈计时“时，计时器的计时方式为以圈计时，”开始计时“，”重新计时“，”分计“按钮被激活；当点击”查看记录“时，通过Ajax请求从本地文档读取数据，将前次的记录显示出来。

图1  码表计时器初始界面

2.图2为点击”查看记录“后，通过Ajax请求获得的本地存储的数据记录。

图2   初始界面时点击”查看记录“的结果

3.图3为选择”分别计时“后，进行计时并分时后的记录呈现界面。当点击”分别计时“后，”开始计时“，”重新计时“，”分计“按钮被激活。然后，点击”开始计时“按钮，计时开始。此时，”开始按钮“转为禁用状态，而”停止计时“按钮转为可用状态。然后，点击”分计“按钮可以将每一条记录呈现出来。实现分别计时功能，结果如图3。

图3  以分别计时方式计时

4.图4为将记录保存成功后的界面，当点击下拉列表下的”保存“项时，客户端通过Ajax请求将记录保存在本地文件中。如果保存成功，则提示”保存成功！“信息。

图4  将最终结果保存

 

5.图5为保存成功后，再”查看记录“界面。

图5  ”保存“成功后”查看记录“

说明

1.如果想要重新计时，可点击”重新计时“按钮，这时显示记录页面和结果呈现页面会被清空，这时点击”开始计时“按钮，可实现重新计时功能；

2.开始计时时，如果想停止计时，可点击”停止计时“按钮，这时”开始计时“按钮恢复可用状态，而”停止计时“按钮则转变为禁用状态；

3.如果想将整个应用恢复为初始状态，可点击”清屏“按钮，这时呈现记录页面和呈现结果页面会被清屏，而下拉列表恢复初始状态，”开始计时“，”停止计时“，”重新计时“，”分计“按钮恢复为禁用状态。

图6  项目缩略图

图7  stopWatch.js的缩略图

图8  stopWatch.js的缩略图