预热页的总结 技术栈JQ （邀请好友，抽奖，swiper事件运用）

邀请好友

（逻辑：点击按钮复制活动链接，链接 拼上 用户ID参数），好友登录（逻辑：获取链接上的用户ID参数，好友登录时，该用户ID参数，作为被邀请码invite，发给接口，好友被邀请完成）

dialog.js 全局弹窗组件

一键复制到剪贴版

clipboard.min.js  一键复制插件 ，可兼容移动端IOS

<img src="./images/copy.png" alt="" class="copy_url" data-clipboard-action="copy"   data-clipboard-text="111111111"/>

	var clipboard = new Clipboard('.copy');
		clipboard.on( 'success', function( e ) {
		alert( '复制成功' );
		e.clearSelection();
	} );
	clipboard.on('error', function(e) {
		alert('请选择“拷贝”进行复制!')
	}); 

split()从把字符串  从指定的字符串开始截取，生成新的数组，再获取需要的字符串

var url = window.location.href;
		console.log(url) // http://svn.gmyr.com/?invite=332

		var str = url.split('?')
        console.log(str) //["http://svn.gmyr.com/","invite=332"]

		for(var i=0;i<str.length;i++){
				var share_url = str[0] //http://svn.gmyr.com/
		}

// 分享链接拼接上邀请码invite,即当前用户ID
$('.share-alert p').text('赶紧复制链接给你的好友吧！'+share_url+'?invite='+cookie_user_id)
$('.share-alert img').attr('data-clipboard-text',share_url+'?invite='+cookie_user_id)

抽奖   

条件：轮询3次，跳出轮询

防止重复点击

Rotate.js  旋转抽奖插件   

API文档

http://www.jq22.com/yanshi13940

https://www.cnblogs.com/yyanga/p/4101550.html

var click_session = 0;
$('.turning-word').click(function(){
if (!cookie_user_id) {
    alert('请先完成预约');
    $('.login-wrapper').show();
} else {
    //防止重复
    if (click_session == 0) {
        click_session = 1;
        $.ajax({
            url: "http:/xxxxxxx/drawing",
            data: {
                "user_id": cookie_user_id
            },
            success: function(res) {
                console.log(res) if (res.status == true) {
                    console.log('发送抽奖行为')
                    // 开始轮询 返回指针位置
                    var timesRun = 0;
                    var interval = setInterval(function() {
                        timesRun += 1;
                        // 轮询3次后显示超时 跳出
                        if (timesRun === 3) {
                            clearInterval(interval);
                            alert('网络超时');
                            click_session = 0;
                        }
                        $.ajax({
                            url: 'http://xxxxxxxcheckPrize',
                            data: {
                                "user_id": cookie_user_id
                            },
                            success: function(res) {
                                if (res.status == true) {
                                    //转盘持续转动
                                    $(".needle").rotate({
                                        duration: 6000,
                                        //转动时间
                                        angle: 0,
                                        //默认角度
                                        animateTo: 360 * 3 + res.data.rotate,
                                        //转动角度
                                        easing: $.easing.easeInOutExpo,
                                        callback: function() {
                                            var prize_name = res.data.prize;
                                            if (prize_name == '谢谢参与') {
                                                $('.share-alert p').text('感谢您的参加！' + prize_name);
                                                $('.share-alert-wrapper').show();
                                                $('.share-alert img').hide();
                                            } else {
                                                $('.suc-gotgift-wrapper .suc-gotgift p').text(res.data.prize);
                                                $('.suc-gotgift-wrapper').show();
                                                $('.more-wrapper').show();
                                            }
                                        }
                                    });
                                    clearInterval(interval);
                                    click_session = 0;
                                } else {
                                    alert(res.msg)
                                    // clearInterval(interval);
                                }
                            },
                            error: function() {
                                alert('网络繁忙') clearInterval(interval);
                                click_session = 0;
                            }
                        })
                    },
                    1000);
                } else {
                    alert(res.msg) click_session = 0;
                }
            },
            error: function() {
                alert('网络繁忙') click_session = 0;
            }
        })
    } else {
        alert('请勿重复点击！') return false;
    }
   }
})

liMarquee 轮播插件

http://www.dowebok.com/demo/188/index5.html API文档

// 中奖名单 跑马灯
	$('.Marquee').liMarquee({
		direction: 'up'	, //垂直跑马灯
		scrollamount: 20 // 速度
    });

.Marquee{
		font-size: 0.2rem;
    height: 0.56rem;
    line-height: 0.56rem;
    color: #fff;
    background: none
		}

<div class="Marquee">
	<ul>
        <li>aaaaaaaaaa</li>
        <li>aaaaaaaaaa</li>
        <li>aaaaaaaaaa</li>
	</ul>
</div>

swiper轮播 事件运用

 var swiper = new Swiper('.gift-swiper', {
					  	effect: 'coverflow',
					  	spaceBetween : -10,// 模块之间的间隔
				        centeredSlides: true, //居中
				        slidesPerView: 'auto', // slider能显示的slides数量
				        initialSlide: 0, //默认显示第几个slider
				        navigation: { //切换按钮
				        	nextEl: '.swiper-button-next',
				        	prevEl: '.swiper-button-prev',
				        },
				        observer:true, //显示隐藏等，需要事件执行时需要true它
				        on: {
							    transitionEnd: function(){
                            //transitionEnd 为 slider滑动结束后执行
                            // this.activeIndex 当前slider的索引
							      var activeIndex = this.activeIndex+1
                                }
                        }
                        })

// 轮播图定位 swiper.slideTo方法，显示第N个slider
	swiper.slideTo(1（第N个slider）, 1000(速度), false);