您的位置:首页 > Web前端

[前端] 有效期

2015-07-17 15:47 513 查看
仿淘宝的有效期计算,主要的实现原理,通过设置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>


谢谢关注!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: