首页 > 代码库 > 项目积累(二)细节问题，提高用户体验

项目积累(二)细节问题，提高用户体验

2024-07-12 23:06:32   213人阅读

　　前两天和同事讨论公司系统一个身份证录入文本框，发现还有一个要录入年龄的文本框，都感觉挺麻烦的。其实当录入身份证号后，年龄就是固定的，想到这就动手写jQuery来改进系统，提高用户体验。

　　首先，身份证从第七位开始时年龄段，如：410223199910210000，这样，就获取身份证的从第七位开始和接下来的八位。在获取当前时间，相减获取年龄。这样 做还是不是准确的，还要考虑月份和具体每天。代码如下：

1     var nowDate = new Date();2     var month = nowDate.getMonth() + 1;3     var day = nowDate.getDate();4     var age = nowDate.getFullYear() - userCard.substring(6, 10) - 1;5      if (userCard.substring(10, 12) < month || userCard.substring(10, 12) == month && userCard.substring(12, 14) <= day){6                     age++;7       }

　　考虑到如果用户输入身份证号后，年龄计算出来就不让用户再填写（容易填错），还要将年龄文本框undisabled.

　　接下来考虑什么时候计算，这里在身份证号失去焦点时，进行年龄的计算。

　　另外，另一个提高用户体验的地方是，当用户想输入年龄时，只让输入数字，不让输入其他的字符。实现这个功能，代码如下：

 1      $("#age").keypress(function (event) { 2                 var keyCode = event.which; 3                 if (keyCode >= 48 && keyCode <= 57) { 4                     return true; 5                 } 6                 else { 7                     return false; 8                 } 9             }).focus(function () {10                 this.style.imeMode = ‘disabled‘;11       });

　　当所有完成后，页面的全部代码就如下：

 1 <head runat="server"> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3     <title>项目积累</title> 4     <style type="text/css"> 5         span{ 6             width:111px; 7             background-color:#f2f0f0; 8             display:block; 9         }10     </style>11     <script src="Scripts/jquery-1.7.1.js"></script>12     <script type="text/javascript">13         $(function () {14             // 身份证号文本框失去焦点15             $("#idCard").blur(function () {16                 // 获取身份证号17                 var userCard = $("#idCard").val();18                 if (userCard == "") {19                     // 输入为空，返回不计算20                     return;21                 }22                 //获取年龄 23                 var nowDate = new Date();24                 var month = nowDate.getMonth() + 1;25                 var day = nowDate.getDate();26                 var age = nowDate.getFullYear() - userCard.substring(6, 10);27                 if (userCard.substring(10, 12) < month || userCard.substring(10, 12) == month && userCard.substring(12, 14) <= day){28                     // 按我们平时所谓的"虚岁"计算29                     age++;30                 }31                 $("#age").val(age);32                 $("#age").attr(‘readonly‘, true);33             });34             // 值输入数字35             $("#age").keypress(function (event) {36                 var keyCode = event.which;37                 if (keyCode >= 48 && keyCode <= 57) {38                     return true;39                 }40                 else {41                     return false;42                 }43             }).focus(function () {44                 // return false,输入法关闭45                 this.style.imeMode = ‘disabled‘;46             });47         })48         //获取输入身份证号码 49         var UUserCard = $("#UUserCard").val();50         //获取出生日期 51         //UUserCard.substring(6, 10) + "-" + UUserCard.substring(10, 12) + "-" + UUserCard.substring(12, 14);52         //获取性别 53         if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {54             //男 55         } else {56             //女 57         }58         //获取年龄 59         var myDate = new Date();60         var month = myDate.getMonth() + 1;61         var day = myDate.getDate();62         var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;63         if (UUserCard.substring(10, 12) < month || UUserCard.substring(10, 12) == month && UUserCard.substring(12, 14) <= day) {64             age++;65         }66         //年龄 age67     </script>68 </head>69 <body>70     <form id="form" runat="server">71     <div>72         <span>姓 名</span>73    <input id="name" type="text"/>74     </div>75         <div>76             <span>身份证号码</span>77     <input id="idCard" type="text"/>78     </div>79          <div>80              <span>年龄</span>81     <input id="age" type="text"/>82     </div>83     </form>84 </body>


联系
我们