[前端] 有效期
2015-07-17 15:47
513 查看
仿淘宝的有效期计算,主要的实现原理,通过设置setMonth()来实现的,可输入计算
效果图:
CSS样式:
HTML布局:
JS脚本:
谢谢关注!
效果图:
CSS样式:
<style> * { padding: 0; margin: 0; } div { width: 250px; margin: 100px auto 0; } input { width: 40px; padding: 0 5px; height: 32px; border: 1px solid #ccc; } span { display: inline-block; width: 32px; height: 32px; border: 1px solid #ccc; text-align: center; line-height: 32px; vertical-align: middle; cursor: pointer; } </style>
HTML布局:
<div> <span>-</span><input type="text" value="1"><span>+</span> <br>有效期(最少一个月,最多24个月): <p></p> <p></p> </div>
JS脚本:
<script> $(function() { // 获取当前的年月日 var oDate = new Date(); var date = oDate.getDate(); var month = oDate.getMonth() + 1; var year = oDate.getFullYear(); // 赋初值 $('p:first').text(year+'-'+month+'-'+date); $('p:last').text(year+'-'+(month+1)+'-'+date); // 减 $('span:first').click(function() { var originVal = $('input').val(); originVal--; if(originVal < 1) { // 最少是一个月 originVal = 1; return false; } $('input').val(originVal); // 结束日期 var iDate = new Date(); iDate.setMonth(iDate.getMonth()+originVal); $('p:last').text(iDate.getFullYear()+'-'+(iDate.getMonth()+1)+'-'+iDate.getDate()); }); // 加 $('span:last').click(function() { var originVal = $('input').val(); originVal++; if(originVal > 24) { // 最多24个月 originVal=24; return false; } $('input').val(originVal); // 结束日期 var iDate = new Date(); iDate.setMonth(iDate.getMonth()+originVal); $('p:last').text(iDate.getFullYear()+'-'+(iDate.getMonth()+1)+'-'+iDate.getDate()); }); // 输入 $('input').on('input',function() { if($(this).val() == '') { return false; } else if($(this).val() > 24) { $(this).val(24); } // 结束日期 var iDate = new Date(); iDate.setMonth(iDate.getMonth()+parseInt($(this).val())); $('p:last').text(iDate.getFullYear()+'-'+(iDate.getMonth()+1)+'-'+iDate.getDate()); }).blur(function() { if($(this).val() == '') { $(this).val(1); } // 结束日期 var iDate = new Date(); iDate.setMonth(iDate.getMonth()+parseInt($(this).val())); $('p:last').text(iDate.getFullYear()+'-'+(iDate.getMonth()+1)+'-'+iDate.getDate()); }); }); </script>
谢谢关注!
相关文章推荐
- bsh规则调用(bsh-1.3.0.jar),相当于javascript里面的eval
- win7下,安装node-inspector调试Node.js
- jquery判断元素是否可见隐藏
- CSS3 改变空格作用 -webkit-nbsp-mode 去掉点击框 -webkit-tap-highlight-color
- ExtJS(7)- Form技巧
- HTML5 QQ登录背景动态图片
- javascript字符串循环匹配实例分析
- js 写一个table
- css在360浏览器的兼容问题
- 动态加载jQuery的两种方法实例分析
- QTreeWidget样式设置大全(一)
- javascript中对变量类型的判断
- 响应客户端请求(servlet与jsp)
- javascript父子页面通讯实例详解
- jquery.validate运用和扩展
- CSS3实现小黄人动画
- LeetCode Delete Node in a Linked List (删除链表中的元素)
- 关于CSS的布局:position属性
- javascript操作DOM元素
- js获取select标签选中的值