幻蓝博客 – 孤月蓝风

追寻互联网科技、Unity开发、AR/VR开发、游戏开发、Web前后端开发等技术。

jquery抽奖程序


var runTime;//定时器
var runStart=0;//色块位置
var runSpeed=60;//速度
var tt=1;//曲线运动当前时间
var chouLength=10;//奖品数量
var is_stop = 0;
var run_stop;//定时器2
$(function(){
    $("#chou-btn").click(function(){
        {if $_userid}
        suiji=$.ajax({url:"...",async:false,cache:false});
        suiji=suiji.responseText;
        $("#iframebg").show();
        runRotate(runStart);
        window.setTimeout(stopRotate(suiji),1000);
        check();
        {else}
        alert("您还未登录,请登录后再进行抽奖。");
        {/if}
    })
})

//检查
function check() {
    window.clearInterval(run_stop);
    if (is_stop == 1) {
        check_stop();
    } else {
        run_stop = setInterval(function(){check();},500);
    }
}

//开始旋转
function runRotate(i){
    clearInterval(runTime);
    $("#chou-lumps li").eq(i).addClass("current").siblings().removeClass("current");
    if(runStart<chouLength){
        runStart++;
    }else{
        runStart=0;
    }
    runTime=setInterval(function(){
        runRotate(runStart);
    },runSpeed);
}
//停止旋转
function stopRotate(i){
    clearInterval(runTime);
    var cur=$("#chou-lumps li").index($("#chou-lumps li.current")[0]);
    var index=i-cur+33;
    var next=cur;
    if(next==chouLength){next=0;}
    easeOutQuad(index,next);
}
//减速旋转
function easeOutQuad(index,cur) {
    clearInterval(runTime);
    $("#chou-lumps li").eq(cur).addClass("current").siblings().removeClass("current");
    if(runStart<10){
        runStart++;
    }else{
        runStart=0;
    }
    index--;
    if(index!=0){
        tt++;
        runTime=setInterval(function(){
            easeOutQuad(index,runStart);
        },easeOut(tt,60,120,25));
    }else{
        runSpeed=60;
        tt=1;
        $("#iframebg").hide();
        is_stop=1;
    }
}
//曲线算法,减速值
function easeOut(t,b,c,d){
    return c*(t/=d)*t*t + b;
}
//判断是否停止
function check_stop() {
    var jiangpin = parseInt(suiji) + 1 ;
    alert("您抽到了第" + jiangpin + "个奖品!");
    window.location.href="..."+suiji;
}

javascript动画返回页面顶部


一个返回顶部代码是很有用的,下面代码实现该功能。

<script type="text/javascript">
$(document).ready(function() { 
    $('#active_backtop').click(function(){ 
        $('html').animate({scrollTop:0}, 'slow');          <!--兼容除IE6和Webkit内核浏览器-->
        $(document).scrollTop(0);                          <!--兼容Webkit内核浏览器-->
    })
});
</script>

clear:both 有高度的问题


.clear {clear: both;height: 0;width: 0;margin: 0;padding: 0;border: none;font-size: 0;}