365体育备用网址报道24.4.1前端设计与实现_365体育备用网址官网资讯

预约订单开拓主要在于两个部分,一个是用户填写表单,另一个是信息的确认页面。
用户填写表单的页面是第一个Web页面,在该Web页面上方能够放置久赢国际手机版下载的Logo或者宣传利高国际娱乐网站,相关代码实现如下:

1     <div class="banner">
2       <div id="wrapper">
3         <div id="scroller" style="float:none">
4           <ul id="thelist"><img src="img/logo.png" alt="预约口腔医生" style="width:100%">
5           </ul>
6         </div>
7       </div>
8       <div class="clr"></div>
9     </div>

下方放置页面功能介绍及订单填写表单,其中页面介绍相关代码如下:

1       <ul class="round">
2         <li>
3           <h2>预约口腔医生</h2>
4           <div class="text">
5             长沙市XX口腔竭诚为您服务<br/>
6           联系电话:0731-7654321</div>
7         </li>
8       </ul>

最后,需要让用户填写表单,并将表单信息通过POST提交给submit.PHP文件。相关代码实现如下:

 1   <form method="post" action="submit.php" id="form" onsubmit="return tgSubmit()">
 2     <ul class="round">
 3       <li class="title mb"><span class="/">请填写以下信息</span></li>
 4       <li class="nob">
 5         <table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
 6           <tbody>
 7             <tr>
 8               <th>姓名</th>
 9               <td><input type="text" class="px" placeholder="请输入姓名" id="name" name="name" value="">
10               </td>
11             </tr>
12           </tbody>
13         </table>
14       </li>
15       <li class="nob">
16         <table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
17           <tbody>
18             <tr>
19               <th>性别</th>
20               <td><select style="line-height:35px;" id="sex" name="sex" class="dropdown-select"><option value="" selected="">请选择性别</option><option value="男"></option><option value="女"></option></select>
21               </td>
22             </tr>
23           </tbody>
24         </table>
25       </li>
26       <li class="nob">
27         <table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
28           <tbody>
29             <tr>
30               <th>年龄</th>
31               <td><input type="text" class="px" placeholder="请输入年龄" id="age" name="age" value="">
32               </td>
33             </tr>
34           </tbody>
35         </table>
36       </li>
37       <li class="nob">
38         <table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
39           <tbody>
40             <tr>
41               <th>久赢国际手机版下载</th>
42               <td><input type="text" class="px" placeholder="请输入久赢国际手机版下载" id="mobile" name="mobile" value="">
43               </td>
44             </tr>
45           </tbody>
46         </table>
47       </li>
48       <li class="nob">
49         <table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
50           <tbody>
51             <tr>
52               <th>预约日期</th>
53               <td>
54                 <select style="line-height:35px;" id="bookdate" name="bookdate" class="dropdown-select">
55                   <option value="" selected="">请选择预约日期</option>
56                   <?php
57                   for ($i = 1; $i <= 6; $i++) {
58                     $offset = strtotime("+".($i-1)." day");
59                     $bDate = date("m月d日",$offset);
60                     $optionString .= '<option value="'.$bDate.'">'.$bDate.'</option>';
61                   }
62                   echo $optionString;
63                   ?>
64                 </select>
65               </td>
66             </tr>
67           </tbody>
68         </table>
69       </li>
70       <li class="nob">
71         <table width="100%" border="0" cellspacing="0" cellpadding="0" class="kuang">
72           <tbody>
73             <tr>
74               <th>预约专家</th>
75               <td><select style="line-height:35px;" id="bookexpert" name="bookexpert" class="dropdown-select"><option value="" selected="">请选择预约专家</option><option value="陈艳">陈艳</option><option value="杨广胜">杨广胜</option><option value="周平">周平</option></select>
76               </td>
77             </tr>
78           </tbody>
79         </table>
80       </li>
81     </ul>
82 
83     <div class="footReturn" style="text-align:center">
84       <input type="hidden" name="openid" value="<?php echo $openid;?>">
85       <input type="submit" style="margin:0 auto 20px auto;width:90%" class="submit" value="提交信息">
86     </div>
87   </form>

在上述代码中,定义了一个form表单,设置了“姓名”,“性别”,“年龄”,“久赢国际手机版下载”,“预约日期”,“预约专家”等选项,其中“姓名”、“年龄”、“久赢国际手机版下载”由用户自己填写,“性别”、“预约专家”由程序指定选择列表供用户选择,“预约日期”项则由PHP程序生成未来6天的日期,在提交的表单信息中,还将用户的微信ID隐藏起来一起提交(第84行)。
对这些表单选项还需要使用JavaScript来校验用户是否正确输入,并在失误输入的时刻显示提示语,相关代码如下所示:

1   <script>
 2     function showTip(tipTxt) {
 3       var div = document.createElement('div');
 4       div.innerHTML = '<div class="deploy_ctype_tip"><p>' + tipTxt + '</p></div>';
 5       var tipNode = div.firstChild;
 6       $("#wrap").after(tipNode);
 7       setTimeout(function () {
 8         $(tipNode).remove();
 9       }, 1500);
10     }
11     function tgSubmit(){
12       var name=$("#name").val();
13       if($.trim(name) == ""){
14         showTip('请输入姓名')
15         return false;
16       }
17       var sex=$("#sex").val();
18       var age=$("#age").val();
19       var patrn = /^[0-9]{1,2}$/;
20       if (!patrn.exec($.trim(age))) {
21         showTip('请输入年龄')
22         return false;
23       }
24       var mobile=$("#mobile").val();
25       if($.trim(mobile) == ""){
26         showTip('请正确填写久赢国际手机版下载号码')
27         return false;
28       }
29       var patrn = /^13[0-9]{9}$|^15[0-9]{9}$|^18[0-9]{9}$/;
30       if (!patrn.exec($.trim(mobile))) {
31         showTip('请正确填写久赢国际手机版下载号码')
32         return false;
33       }
34       var bookdate=$("#bookdate").val();
35       if($.trim(bookdate) == ""){
36         showTip('请输入预约日期')
37         return false;
38       }
39       var bookexpert=$("#bookexpert").val();
40       if($.trim(bookexpert) == ""){
41         showTip('请输入预约专家')
42         return false;
43       }
44       return true;
45     }
46   </script>

上述页面的实现如图24-9所示:

图24-9订单预约页面

------分隔线----------------------------

公布评论 (184人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁公布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换利高国际娱乐网站
最新评论