[前端] 活动有效期计算

仿淘宝的有效期计算，主要的实现原理，通过设置setMonth()来实现的，可输入计算

效果图：

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>

谢谢关注！