美文网首页
项目中优秀js代码

项目中优秀js代码

作者: qqqc | 来源:发表于2016-11-05 19:56 被阅读0次

1、导航条跳转到相对应高度

html

//跳到对应的div
<div class="register"></div>
<div class="declaration"></div>
<div class="case"></div>

//导航条
<div class="nav flex-box">
            <a href="javascript:;" class="flex-item" data-anchor="register">测算保费</a>
            <a href="javascript:;" class="flex-item" data-anchor="declaration">产品特点</a>
            <a href="javascript:;" class="flex-item" data-anchor="case">投保案例</a>
</div>

css fex布局

.flex-box {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    .flex-item {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }
}

js代码

//导航定位
    $('.nav').on('click', 'a', function(event) {
        var $this = $(this);
        var anchor = $this.data('anchor');
        var y = $body.find('.'+anchor).offset().top - 10;

        $this.addClass('current').siblings().removeClass('current');
        $('html, body').animate({
            scrollTop: y
        }, 300);
    });

2、限定手机在对应的区域才能注册

//函数,前提是引入iui
//全局变量
    var isregister = true;
    var isget = true;
// 手机归属地
    $('#mobile').on('keyup',function(event){
        var $this = $(this);
        var keycode = event.keyCode;
        var val = $this.val();
        console.log(val);

        if(val && isget && val.length === 11){
            isregister = false;
            isget = false;
            $.ownership({
                mobile: val,
                success: function(res){
                    $.each(jsonData,function(item,cval){
                        $.each(cval.city,function(item,ct){
                            var cid = parseInt(ct.value);
                        if (cid === res.region.cityId) {
                            isregister = true;
                            isget = false;
                        }
                        })
                        
                    });
                },
                error: function(res){
                    console.log('sb');
                    isregister = false;
                    isget =true;
                }
            });
        }
        // 判断是否按下了删除
        if (keycode == 8) {
            isregister = false;
            isget = true;
        }
    })
//在提交表单的before前验证
if (!isregister) {
                $.tip({
                    text: '抱歉,您所在的城市暂时不在活动范围内',
                    status: false
                });
                return false;
            }

三、快速删除后台数据

for(var i=105;i<122;i++){
    $.post('/activity-analysis/delete?puid='+i+'&activityId=246', function(res) {});
}

四、pc端模拟点击组件化

调用

//性别选择
    $.icheck({
        obj: '.form-sex',
        child: '.sex-radio'
    });

    //缴费方式选择
    $.icheck({
        obj: '.form-way',
        child: '.way-radio'
    });

    //同意致电选择
    $.icheck({
        type: 'checkbox',
        obj: '.form-agreed',
        child: '.checkbox'
    });

组件

$.extend({
  icheck: function(options) {
        var param = $.extend({
            event: 'change',
            type: 'radio',
            obj: null,      //调用的组件的元素
            node: null,     //每项的父节点
            child: null,    //要添加选中的节点
            success: function(event) {}
        }, options);

        var isnode = param.node ? param.node : param.obj;

        $(param.obj).on(param.event, 'input[type="radio"], input[type="checkbox"]', function(event) {
            var $this = $(this);
            var $parents = $this.parents(param.child);

            //radio否则checkbox
            if(param.type === 'radio') {
                $(param.obj).find('input').prop('checked', false);
                $parents.addClass('current').siblings().removeClass('current');
                $this.prop('checked', true);
            }else {
                $this.prop('checked') ? $parents.addClass('current') : $parents.removeClass('current');
            }
        });
    }
})

五、短信发送

//发送端
【阳光保险】感谢您对阳光保险的信任,近期客服会通过专线95510给您致电,确认意外保障生效事宜。如需了解更多,欢迎点击 <?=Yii::$app->params['campaignAppUrl']?>index/click-field?activityId=<?=$user['activityId']?>&field=clickCount&value=触发短信-查看指南&uniqueId=<?= $user['puid']; ?>&append=1&url=<?=urlencode(Yii::$app->params['campaignAppUrl'].'257?a_id='.$user['activityId'].'&p_id='.$user['puid'])?> 退订回T

//发送端
<?php
$name = $user['name'];
$sex = $user['sex'] === '1' ? '先生' : '女士';
?>
【百年人寿】尊敬的<?=mb_substr($name, 0, 1, 'utf-8')?><?=$sex?>,您的百年人寿免费赠险激活短信将在近期发送到您手机,敬请查收。如需提前了解具体赠险详情,可点击<?=Yii::$app->params['campaignAppUrl']?>index/click-field?activityId=<?=$user['activityId']?>&field=clickCount&value=短链-赠险告知页&uniqueId=<?= $user['puid']; ?>&append=1&url=<?=urlencode(Yii::$app->params['campaignAppUrl'].'262?a_id='.$user['activityId'].'&p_id='.$user['puid'])?> 。退订请回T

//接收端
<a class="check-btn" href="/index/click-field?activityId=<?= $get['a_id']; ?>&field=clickCount&value=查看阳光成长关爱保障计划&append=1&uniqueId=<?= $get['p_id']; ?>&url=http://sinosig.vrm.cn/product/view/154.html">查看详情</a>


六、把生日转化为年龄

//用于生日转化为周岁,精确到日
    function convertAge(value){
        var now = new Date(),
            date = new Date(value),
            age,
            o1 = {
                Y: now.getFullYear(),
                M: now.getMonth() + 1,
                D: now.getDate()
            },
            o2 = {
                Y: date.getFullYear(),
                M: date.getMonth() + 1,
                D: date.getDate()
            };

        age = o1.Y - o2.Y - ((o1.M < o2.M || o1.M === o2.M && o1.D < o2.D) ? 1 : 0);
        return age;
    }

相关文章

网友评论

      本文标题:项目中优秀js代码

      本文链接:https://www.haomeiwen.com/subject/xtqwuttx.html