手机端巧用input[date]
来源:互联网 发布:旺旺淘宝网店铺激活 编辑:程序博客网 时间:2024/06/05 01:51
应用场景:生命计算器,允许用户输入自己的出生年月,根据用的数据计算出相关的过去和未来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()
然后,好像没了,不说了吧。
- 手机端巧用input[date]
- 手机端时间选择器慢input type="date"
- html5 input date
- html5中input的date
- jQuery日期选择器插件date-input
- jquery的date input日期组件使用
- html5 input type date default value
- JQuery日期选择器插件date-input
- jQuery日期选择器插件date-input
- 使input date支持placeholder方法
- type=‘date’的input标签
- 为input中的date设置日期
- input[type="date"]默认样式修改
- input[type=date]默认样式修改
- input[type="date"]默认样式修改
- 【HTML5】<input>的日期类型Date
- android ios手机new Date兼容问题
- Unity3D手机中Input类touch详解
- 判断ip地址
- windows环境下wampserver的配置教程——超级详细
- Quartz2D矩阵操作和官方demo下载学习 和 裁剪 和 重绘(刷帧) 动画
- ceph的CRUSH数据分布算法介绍
- 寒風的Cocos2dx之旅之剪刀、石头、布系列专题(2 )
- 手机端巧用input[date]
- 合并多个jar包的两种方法
- HDU3234Exclusive-OR(并查集)与HDU3038相似
- 第三次CCF计算器软件能力认证题目--Z字形扫描
- GIT 用法
- Android 模仿新浪微博“@”功能
- Golang+Android(使用HttpURLConnection)实现文件上传
- Eclipse技术博客--地址
- 奔跑吧,魔力膜法!广州市安煊国际企业3月26日首届微商邀您共同起航