wmzy1067111110的专栏

应用场景:生命计算器,允许用户输入自己的出生年月,根据用的数据计算出相关的过去和未来100岁的数据。

分析:这个应用主要两个点。1,用户的输入是自由的;2,浮点数和整数的处理。技术点不多,也不难,算是巩固一下javascript的Date,Math两个对象。

一、用户的输入

允许用户输入,必然会有数据的准确性验证。可以有两个选择。1,用户的手动输入;2,提供日期选择器。

对于用户的手动输入,首先需要限制一下输入格式,比如:”19890102“,”1989-01-20“,‘1989/01/22’,”1989 08 22“等各种的格式说明。

即便我们为了提示用户非常的显眼的告诉用户了输入格式,但是还是会有用户不按常理出牌,只能进行验证。

既然打算验证,那肯定不能随意为之,除了日期格式正确之外还有日期的有效性,比如:我们可以限定一下出生日期要在1900之后或者再晚点比如1940,毕竟用户群都比较年轻,这个数据可以讨论一下。然后是月份和日期的有效性,要符合自然月的规则。说多了,这样验证下去的话,还要找闰年,心好累。这么复杂的正则我一时半会也想不出来,去觉得可能只依靠正则可能不能实现。

为了更快的出成品,选择第二种方案,而第二种方案的日期选择器的实现曾经也是一个大老难,也不想说了,无非就是什么j*的插件。

综合产品需求,这是个只在手机端使用并且要轻量级的一个页面,所以前面一大串废话只是想体现以下,,做技术的不容易,在决定用什么方案之前,都其实不知道烧死了多少脑细胞了。

进入正题,input[date],这个H5新兴家族成员之一,也不乏会有支持缺陷。

1、属性max手机端并没有实现,

2、属性min同理,

3、属性value实现的并不完善,手机的智能处理导致的,选择日期时无论ios还是Android都是弹出对话框,而对话框的默认值是当前日期,这个控制不了,导致如果不操作的话,日期值就默认为当前,手动设置是不生效的。

以上三个问题不能通过H5直接解决。

只能在最后检测一下是否超出边界值了,这个验证还是很简单的。

还好input[date]的日期值在各个平台上都是统一的,”1989-01-20“,用‘-’连接。所以判断就直接转换成数组了.

var userDate = document.getElementById('date').value.split('-'),userDateObj = {year : userDate[0],month : userDate[1],date : userDate[2]},nowDate = new Date(),nowDateObj = {year : nowDate.getFullYear(),month : nowDate.getMonth() + 1,date : nowDate.getDate()};function dateIsOk(){if(userDateObj.year <= nowDateObj.year && userDateObj.month <= nowDateObj.month && userDateObj.date <= nowDateObj.date){return true;}else{return false;}}做了一下日期只要不超过今天即可的限制。

二、浮点数和整数的处理

主要应用点在于,1,你活了几岁;2,如果能够活到100岁,你还有多少天可活;3,活了这么久你吃了几吨食物。

以上三点有一个共同点就是他们的单位导致了数字会是小数,这就涉及到了javascript中浮点数的位数以及怎么取舍了.

parseFloat() // 函数可解析一个字符串,并返回一个浮点数。如下方法:/** num : 第一个操作数* num2 : 第二个操作数* operator : 运算符* n : 小数需要保留的位数*/function fixFloat(num, operator, num2, n){var regNum = /\d/,regOper = /(\*|\/){1}/;if((regNum.test(num) && regNum.test(num2) && regOper.test(operator) && regNum.test(n)){if(operator === '*'){return parseFloat(num * num2).toFixed(n);}else{return parseFloat(num / num2).toFixed(n);}}else{console.log('err')}}整数处理就不多说了,参见 parseInt()

然后,好像没了,不说了吧。

对于旅行,从来都记忆模糊。记不得都去了哪些地方,

wmzy1067111110的专栏

相关文章:

你感兴趣的文章:

标签云: