手机端巧用input[date]

应用场景:生命计算器,允许用户输入自己的出生年月,根据用的数据计算出相关的过去和未来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()

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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。