记账本开发记录——第三天(2020.1.20)

Posted wushenjiang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了记账本开发记录——第三天(2020.1.20)相关的知识,希望对你有一定的参考价值。

本来按照今天的原计划来说,应该学习完javascript的基础内容。但今天一天都在干活,到晚上八点才坐到电脑前,已经精疲力尽了。于是简单设计了一下网站的几个页面和大体结构。以下是具体:

网站主界面:

 技术图片

开始记账界面:

 技术图片 

(希望实现:点击加号后弹出一个界面进行增)

(删除时要弹出确认提示)

(改时可以更改所有信息,也是弹出一个界面) 

账单汇总

技术图片

(选择汇总条件,目前只计划添加某时间段,如果时间允许增加种类等属性)

(查找后输出在某段时间内总花费)

图表数据(尝试使用百度的smartart功能,生成一段时间内的数据的图表显示),这一部分暂时作为提高内容,最后制作。

进入后台:

 技术图片

后台界面,为了不用天天打开navicat,设计后台管理各种数据,同时也是练一下登录时的二次检验。

凑数界面,为了试一下各种各样的界面刷新和分页(试试).

今天由于时间原因,只简单学习了javascript的基础知识,实现了注册表单的前端验证。也就是我们第一次java web测试的前端验证.对于javascript的基本结构和语法有了一定了解,也知道了javascript和java一点关系没有(嗐),同时了解到正则表达式一般不需要专门去记忆,可以直接从网上查找。以下是其代码(基本和昨天学习的注册界面百分之八十相似,只是多了javascript的部分代码):

明天的任务:继续学习javascript的知识,并且使用CSS+DIV+html实现记账本页面的基本格式。

希望明天的我没那么多家务活可以干 嗐。

技术图片
  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>注册页面</title>
  6         <script>
  7             function checkForm(){
  8                 // alert("aa");
  9                 /**校验用户名*/
 10                 // 1.获取用户输入的数据
 11                 var uValue = document.getElementById("user").value;
 12                 if(uValue==""){
 13                     // 2.给出错误提示信息
 14                     alert("用户名不能为空!");
 15                     return false;
 16                 }
 17                 
 18                 // 校验密码
 19                 var pValue = document.getElementById("password").value;
 20                 if(pValue==""){
 21                     alert("密码不能为空!");
 22                     return false;
 23                 }
 24                 /**校验确认密码*/
 25                 var rpValue = document.getElementById("repassword").value;
 26                 if(rpValue!=pValue){
 27                     alert("两次密码输入不一致!");
 28                     return false;
 29                 }
 30                 
 31                 // 校验邮箱
 32                 var eValue = document.getElementById("email").value;
 33                 if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
 34                     alert("邮箱格式不正确!");
 35                     return false;
 36                 }
 37             }
 38         </script>
 39     </head>
 40     <body>
 41         <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
 42             <!-- 1.logo部分 -->
 43             <tr>
 44                 <td>
 45                     <!-- 嵌套一个一行三列的表格 -->
 46                     <table border="1px" width="100%">
 47                         <tr height="50px">
 48                             <td width="33.3%">
 49                                 <img src="../img/logo2.png" height="47px">
 50                             </td>
 51                             <td width="33.3%">
 52                                 <img src="../img/header.png" height="47px">
 53                             </td>
 54                             <td width="33.3%">
 55                                 <a href="#">登录</a>
 56                                 <a href="#">注册</a>
 57                                 <a href="#">购物车</a>
 58                             </td>
 59                         </tr>
 60                     </table>
 61                 </td>
 62             </tr>
 63             <!-- 2.导航栏部分 -->
 64         <tr height="50px">
 65             <td bgcolor="black">
 66                 <a href="#"><font size="5" color="white">首页</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
 67                 <a href="#"><font color="white">手机数码</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
 68                 <a href="#"><font color="white">电脑办公</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
 69                 <a href="#"><font color="white">鞋靴箱包</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
 70                 <a href="#"><font color="white">家用电器</font></a>
 71             </td>
 72         </tr>
 73             <!-- 3.注册表单 -->
 74             <tr>
 75                 <td height="600px" background="../img/regist_bg.jpg">
 76                     <!-- 嵌套一个十行二列的表格 -->
 77                     <form action="#" method="get" name="regform" onsubmit="return checkForm()">
 78                     <table border="1px" width="750px" height="360px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
 79                         <tr height="40px">
 80                             <td colspan="2">
 81                                 <font size="4">会员注册</font>&nbsp;&nbsp;&nbsp;USER REGISTER
 82                                 </td>
 83                         </tr>
 84                         <tr>
 85                             <td>
 86                                 用户名
 87                             </td>
 88                             <td>
 89                                 <input type="text" name="user" id ="user" size="45px">
 90                             </td>
 91                         </tr>
 92                         <tr>
 93                             <td>密码</td>
 94                             <td>
 95                                 <input type="password" name="password" id="password" size="34px">
 96                             </td>
 97                         </tr>
 98                         <tr>
 99                             <td>确认密码</td>
100                             <td>
101                                 <input type="password" name="repassword" id="repassword" size="34px">
102                             </td>
103                         </tr>
104                         <tr>
105                             <td>Email</td>
106                             <td>
107                                 <input type="text" name="email" id="email" size="34px">
108                             </td>
109                         </tr>
110                         <tr>
111                             <td>姓名</td>
112                             <td>
113                                 <input type="text" name="username" size="34px">
114                             </td>
115                         </tr>
116                         <tr>
117                             <td>性别</td>
118                             <td>
119                                 <input type="radio" name="sex" value="男">120                                 <input type="radio" name="sex" value="女">121                             </td>
122                         </tr>
123                         <tr>
124                             <td>出生日期</td>
125                             <td>
126                                 <input type="text" name="birthday" size="34px">
127                             </td>
128                         </tr>
129                         <tr>
130                             <td>验证码</td>
131                             <td>
132                                 <input type="text" name="yzm">
133                                 <img src="../img/yanzhengma.png">
134                             </td>
135                         </tr>
136                         <tr>
137                             <td colspan="2">
138                                 <input type="submit" value="注册">
139                             </td>
140                         </tr>
141                     </table>
142                     </form>
143                 </td>
144             </tr>
145             <!-- 4.广告图片 -->
146         <tr>
147             <td>
148                 <img src="../img/ad.jpg" width="100%">
149             </td>
150         </tr>
151             <!-- 5.友情链接和版权信息 -->
152              <tr>
153             <td align="center">
154                 <a href="#">关于我们</a>&nbsp;&nbsp;
155                 <a href="#">联系我们</a>&nbsp;&nbsp;
156                 <a href="#">招贤纳士</a>&nbsp;&nbsp;
157                 <a href="#">法律声明</a>&nbsp;&nbsp;
158                 <a href="#">友情链接</a>&nbsp;&nbsp;
159                 <a href="#">支付方式</a>&nbsp;&nbsp;
160                 <a href="#">配送方式</a>&nbsp;&nbsp;
161                 <a href="#">服务声明</a>&nbsp;&nbsp;
162                 <a href="#">广告声明</a>
163                 <p>
164                     Copyright © 2005-2016 传智商城 版权所有
165                 </p>
166             </td>
167         </tr>
168         </table>
169     </body>
170 </html>
使用JS进行表单检验

以上是关于记账本开发记录——第三天(2020.1.20)的主要内容,如果未能解决你的问题,请参考以下文章

记账本开发记录——第十三天(2020.1.31)

第二阶段冲刺第三天

Android实战项目——家庭记账本

记账本开发记录——第四天(2020.1.21)

记账本开发记录——第十天(2020.1.28)

记账本开发记录——第五天(2020.1.22)