转盘抽奖HTML及js实现源码(h5)

HTML:

<body>
<div class="h5_bg"></div>
<div class="h5_Integral">
    <i class="jf_rule_btn"></i>
    <div class="jf_detail">
        <div style="padding: 0 1rem">
            <span>我的积分:<b id="toll">{$data.score}</b></span>
            <span class="float-right">每抽奖一次消耗{:abs($data.over)}积分</span>
        </div>
        <div class="jf_boxs">
            <ul>
                <li class="cur"><img src="{$staticHost}{$data['jp'][0]['image']}"> </li>
                <li><img src="{$staticHost}{$data['jp'][1]['image']}"> </li>
                <li><img src="{$staticHost}{$data['jp'][2]['image']}"> </li>
                <li><img src="{$staticHost}{$data['jp'][7]['image']}"> </li>
                <li class="jf_start" onclick="Start()" >
                    <img src="{$staticHost}/images/H5/home/start.png" width="100%">
                </li>
                <li><img src="{$staticHost}{$data['jp'][3]['image']}"> </li>
                <li><img src="{$staticHost}{$data['jp'][6]['image']}"> </li>
                <li><img src="{$staticHost}{$data['jp'][5]['image']}"> </li>
                <li><img src="{$staticHost}{$data['jp'][4]['image']}"> </li>
                <div style="clear: both"></div>
            </ul>
        </div>
    </div>
    <!--积分不足-->
    <div class="msg_index">
        <div class="jf_msg"></div>
        <div class="jf_indexs" id="msg">{$data.message}</div>
    </div>
</div>
<!--中奖及未中奖弹框-->
<div class="jf_success" style="display: none">
    <div class="jf_bg"></div>
    <div class="success_info">
        <i></i>
        <p></p>
        <ss>推荐卡已放入您账户,快去查看吧</ss>
        <div class="jf_btn" onclick="next()">继续抽奖</div>
    </div>
</div>

<!--积分规则-->
<div class="jf_rule" style="display: none">
    <div class="jf_bg"></div>
    <div class="rule_index">
        <p class="title_img"></p>
        <b class="title1"></b>
        <p>每次抽奖需<ss>消耗200积分</ss>,抽奖用户的个人积分达到抽奖所需的数值即可参与抽奖。参与抽奖的用户、同一手机号、邮箱、账号等均视为同一用户条件;</p>

        <b class="title2"></b>
        <p>各奖品的使用规则依据各奖品的说明为准;</p>

        <b class="title3"></b>
        <p>抽奖所获得的红包/卡券将自动发送至个人中心处,可在<ss>“会员中心-个人中心-红包/卡券”</ss>处查看;</p>

        <b class="title4"></b>
        <p>积分抽奖属于概率性事件,不能保证每个用户均能中奖;</p>

        <b class="title5"></b>
        <p>各奖品的有效期依据各奖品的说明为准,重要提醒!!!请用户留意有效期和过期时间,逾期无效。</p>
        <div class="jf_btns"></div>
    </div>
</div>

</body>
<script type="text/javascript" src="/js/jquery.js?v={$version}"></script>
<script type="text/javascript" src="{$staticHost}/js/member/account/h5_Integral.js?v={$version}"></script>
<script>
    var score = tmpScore  = {$data.score},over={:abs($data['over'])},product={:json_encode($ps)};
</script>
</html>


JS:

var productName = '';
function getDraw(){
    var url = '/index/integral/toDraw';
    var msg='';
    $.ajax(
        {
            url:url,
            dateType:"JSON",
            type:"GET",
            success:function(data){
                if(data.statusCode==200){
                    score = data.data.toll;
                    console.log(score)
                    $('#toll').html(score)
                    stopPosition = data.data.idKey-1;
                    productName = product[data.data.id];
                }else if(data.statusCode==500){
                    isMsg(data.data.message)
                }
            }
        }
    );
}


/*开奖动画*/
var curPosition;
var time
var stopPosition;
var re;
var lottery_start = [];
function init(){
    curPosition=0;//当前位置
    stopPosition =  -1;//停止位置
    time = 80 //动画时间
    re = 3; //开奖后再走三圈
    lottery_start = [0,1,2,5,8,7,6,3]; //定义开奖行走的轨迹
    clickBtn=true
}
init();

/*积分不足提示消息*/
function isMsg(msg){
    $('.msg_index').show();
    $('#msg').html(msg);
}


var Start=function($a){
    clearTimeout(sutoMoveTime);
    if(!clickBtn && !$a)return;
    clickBtn = false;
    if(tmpScore<over){
        isMsg('积分不足,快去做任务领积分吧')
        setTimeout(function(){
            window.location.href="/member/account/h5_Integral.htm";
        },3000)
        return;
    }
    if(!$a){
        getDraw();
    }
    setTimeout(function(){
        clearClass();
        if(curPosition<lottery_start.length-1){
            curPosition++;
        }else{
            curPosition=0;
            if(stopPosition!=-1){
                re--;
                switch (re){
                    case 2:
                        time = 100;
                        break;
                    case 1:
                        time = 200;
                        break;
                    case 0:
                        time = 300;
                        break
                }
            }
        }
    },time)
}
var clearClass=function(){
    var li = $('.jf_boxs li');
    //console.log(lottery_start[curPosition]);
    li.removeClass('cur')
    li.eq(lottery_start[curPosition]).addClass('cur');
    if((stopPosition*1) == (curPosition*1) && re==0 && stopPosition!=-1 ){
        tmpScore = score;
        $('.jf_success').show();
        if(productName=="谢谢参与"){
            productName="再接再厉";
            $('.success_info').css("backgroundImage","url(/images/H5/home/cry.png)")
            $('.success_info p').html('很遗憾,奖品溜走了!')
            $('.success_info ss').html('手气不好换个姿势再来一次')
        }else{
            $('.success_info p').html('获得'+productName)
            $('.success_info').css("backgroundImage","url(/images/H5/home/card.png)")
            $('.success_info p').css("color","#ff3333")
            $('.success_info ss').html('推荐卡已放入您账户,快去查看吧')
        }
        init();
        autoMove();
        return;
    }
    Start(true);
}


$(document).on('touchend','.success_info i',function(){
    $('.jf_success').hide()
})

/*积分规则显示隐藏*/
$(document).on('touchend','.jf_rule_btn',function(){
    $('.jf_rule').show()
})

$(document).on('touchend','.jf_btns',function(){
    $('.jf_rule').hide()
})



//继续抽奖
var next=function(){
    $('.jf_success').hide()
    Start();
}

var sutoMoveTime;

//自动移动
var autoMove=function(){
    sutoMoveTime = setTimeout(function(){
        var li = $('.jf_boxs li');
        li.removeClass('cur')
        li.eq(lottery_start[curPosition]).addClass('cur');
        autoMove();
        if(curPosition<lottery_start.length-1){
            curPosition++;
        }else{
            curPosition=0;
        }
    },1000)
}
autoMove();


转盘抽奖HTML及js实现源码(pc端)

HTML:

<body style="margin: 0">
<div class="lottery_jf">
    <div class="lottery_index container">
        <a href="{:Url('/index/integral/index')}" >
            <div class="back_home">返回首页</div>
        </a>
        <div class="lottery_left">
            <a href="{:Url('/member/account/redcard')}" target="_blank">
                <span class="my_lott">我的奖品</span>
            </a>
            <!--顶部彩灯-->
            <div class="top_light">
                <ul>
                    <li class="y_light"></li>
                    <li></li>
                    <li class="y_light"></li>
                    <li></li>
                    <li class="y_light"></li>
                    <li></li>
                    <li class="y_light"></li>
                    <li></li>
                </ul>
            </div>

            <!--底部彩灯-->
            <div class="top_light bottom">
                <ul>
                    <li class="y_light"></li>
                    <li></li>
                    <li class="y_light"></li>
                    <li></li>
                    <li class="y_light"></li>
                    <li></li>
                    <li class="y_light"></li>
                    <li></li>
                </ul>
            </div>

            <!--奖项滚动-->
            <div class="lottery_box">
                <ul>
                    <li>
                        <span></span>
                        <b><img src="{$staticHost}{$data['jp'][0]['image']}" width="117" height="95px"></b>
                    </li>
                    <li>
                        <span></span>
                        <b><img src="{$staticHost}{$data['jp'][1]['image']}" width="117" height="95px"></b>
                    </li>
                    <li>
                        <span></span>
                        <b><img src="{$staticHost}{$data['jp'][2]['image']}" width="117" height="95px"></b>
                    </li>
                    <li>
                        <span></span>
                        <b><img src="{$staticHost}{$data['jp'][7]['image']}" width="117" height="95px"></b>
                    </li>
                    <li onclick="Start()">
                        <span></span>
                        <div class="msg_erro" style="display: none">
                            <i></i>
                            <b></b>
                            <div id="msg">{$data.message}</div>
                            <a href="{:Url('/index/integral/index')}#jf">赚积分</a>
                        </div>
                    </li>
                    <li>
                        <span></span>
                        <b><img src="{$staticHost}{$data['jp'][3]['image']}" width="117" height="95px"></b>
                    </li>
                    <li>
                        <span></span>
                        <b><img src="{$staticHost}{$data['jp'][6]['image']}" width="117" height="95px"></b>
                    </li>
                    <li>
                        <span></span>
                        <b><img src="{$staticHost}{$data['jp'][5]['image']}" width="117" height="95px"></b>
                    </li>
                    <li>
                        <span></span>
                        <b><img src="{$staticHost}{$data['jp'][4]['image']}" width="117" height="95px"></b>
                    </li>
                </ul>
            </div>

            <!--左侧彩灯-->
            <div class="top_light left">
                <ul>
                    <li class="y_light"></li>
                    <li></li>
                    <li class="y_light"></li>
                    <li></li>
                    <li class="y_light"></li>
                </ul>
            </div>

            <!--右侧彩灯-->
            <div class="top_light right">
                <ul>
                    <li class="y_light"></li>
                    <li></li>
                    <li class="y_light"></li>
                    <li></li>
                    <li class="y_light"></li>
                </ul>
            </div>
            <div style="clear: both"></div>
            <p class="rule">注:每次抽奖将消耗<b>{:abs($data.over)}积分</b> </p>
        </div>
        <div class="lottery_right">
            <h3>当前积分:<span id="toll">{$data.score}</span></h3>
            <span class="lottery_bg"></span>
            <!--奖品信息-->
            <div class="lottery_info">
                <b>抽奖说明 :</b>
                <ul>
                    <li>
                        <span>友链买卖商品推荐</span>
                        <p title="可以在友链买卖商品页推荐自己的1个商品">可以在友链买卖商品页推荐自己的1个商品</p>
                    </li>
                    <li>
                        <span>网站首页商品推荐</span>
                        <p title="可以在友链买卖商品页推荐自己的1个商品">可以在友链买卖商品页推荐自己的1个商品</p>
                    </li>
                    <li>
                        <span>免费换链商品推荐</span>
                        <p title="可以在友链买卖商品页推荐自己的1个商品">可以在免费换链商品页推荐自己的1个商品</p>
                    </li>
                    <li>
                        <span>站长工具页推荐</span>
                        <p title="可以在站长工具页推荐自己的1个商品">可以在站长工具页推荐自己的1个商品</p>
                    </li>
                </ul>
            </div>
            <span class="vip_bg"></span>
            <div class="lottery_vip ">
                <span>会员中奖榜</span>
                <ul class="jqjm_scrolls">
                    {volist name="data.jl" id="vo"}
                    <li>{$vo.account} 抽中了 {$vo.rname}</li>
                    {/volist}
                </ul>
            </div>
        </div>
    </div>
    <div style="clear: both"></div>
</div>

<div class="lottery__rule">
    <div class="container">
        <b style="padding-top: 77px;display: block">抽奖规则</b>
        <p>1、抽奖条件:每次抽奖需消耗200积分,抽奖用户的个人积分达到抽奖所需的数值即可参与抽奖。参与抽奖的用户、同一手机号、邮箱、账号等均视为同一用户条件;</p>
        <p>2、抽奖奖品:各奖品的使用规则依据各奖品的说明为准;</p>
        <p>3、奖品发放:抽奖所获得的红包/卡券将自动发送至个人中心处,可在<a href="{:Url('member/account/redcard')}">“会员中心-个人中心-红包/卡券”</a>处查看;</p>
        <p>4、抽奖概率:积分抽奖属于概率性事件,不能保证每个用户均能中奖;</p>
        <p>5、奖品有效期:各奖品的有效期依据各奖品的说明为准,重要提醒!!!请用户留意有效期和过期时间,逾期无效。</p>
    </div>
</div>
</div>
<!--<div class="lottery_bottom"></div>-->
<!--中奖和未中奖弹框-->
<div class="win_box" style="display: none">
    <div class="win_box1"></div>
    <div class="win_index">
        <i></i>
        <h3 id="info"></h3>
        <h3 id="product"></h3>
    </div>
</div>

</body>
<script type="text/javascript" src="/js/jquery.js?v={$version}"></script>
<script type="text/javascript" src="{$staticHost}/js/index/integral/integral_lottery.js?v={$version}"></script>
<script>
    var jqjm_scrolls = {go: 'top', obj: $('.jqjm_scrolls'), cons: 2, goTime: 1000, stopTime: 4000}
    scrollFun(jqjm_scrolls);
    var score = tmpScore  = {$data.score},over={:abs($data['over'])},product={:json_encode($ps)};
</script>
</html>
JS:

var productName = '';
function getDraw(){
 var url = '/index/integral/toDraw';
 var msg='';
 $.ajax(
 {
 url:url,
 dateType:"JSON",
 type:"GET",
 success:function(data){
 if(data.statusCode==200){
 score = data.data.toll;
 $('#toll').html(score)
 stopPosition = data.data.idKey-1;
 productName = product[data.data.id];
 }else if(data.statusCode==500){
 isMsg(data.data.message)
 }
 }
 }
 );
}


/*开奖动画*/
var curPosition;
var time
var stopPosition;
var re;
var lottery_start = [];
function init(){
 curPosition=0;//当前位置
 stopPosition = -1;//停止位置
 time = 80 //动画时间
 re = 3; //开奖后再走三圈
 lottery_start = [0,1,2,5,8,7,6,3]; //定义开奖行走的轨迹
 clickBtn=true
}
init();

/*积分不足提示消息*/
function isMsg(msg){
 $('.msg_erro').show();
 $('#msg').html(msg);
}

/*关闭刷新*/
$(document).on('click','.msg_erro b',function(){
 window.location.href="/index/integral/integral_lottery.htm";
})

var Start=function($a){
 if(!clickBtn && !$a)return;
 clickBtn = false;
 if(tmpScore<over){
 isMsg('积分不足')
 return;
 }
 if(!$a){
 getDraw();
 }
 setTimeout(function(){
 clearClass();
 if(curPosition<lottery_start.length-1){
 curPosition++;
 }else{
 curPosition=0;
 if(stopPosition!=-1){
 re--;
 switch (re){
 case 2:
 time = 100;
 break;
 case 1:
 time = 200;
 break;
 case 0:
 time = 300;
 break
 }
 }
 }
 },time)
}
var clearClass=function(){
 var li = $('.lottery_box li span');
 //console.log(lottery_start[curPosition]);
 li.removeClass('cur')
 li.eq(lottery_start[curPosition]).addClass('cur');
 if((stopPosition*1) == (curPosition*1) && re==0 && stopPosition!=-1 ){
 tmpScore = score;
 if(productName=="谢谢参与"){
 productName="再接再厉";
 $('#info').html('本次未中奖!')
 }else{
 $('#info').html('恭喜您,获得')
 }
 $('#product').html(productName)
 $('.win_box').show()
 init();
 return;
 }
 Start(true);
}
/*弹框关闭*/
$(document).on('click','.win_index i',function(){
    $('.win_box').hide();
})




我狂奔的以为

青涩的年华,我以为我能找到那片专属的海

 

为此

我一路狂奔、一路欢喜

我以为我的眼里装满了爱、幸福和责任

我以为我的心里沉淀了厚厚的感动、沉甸甸的感情

 

 

为此

我不畏一路的质疑

不惧一路的嘲讽

只想拥抱无畏无惧的青春

只想回望青春留下灿烂的笑脸

 

直到

我无力狂奔的那一刻

双脚无力的麻木

双肩疲惫的疼痛

 

辗转反侧的夜里

思绪总不愿停下脚步

让每个无眠的夜晚变得面目可憎

却让每个清晨的铃声变得不在慵懒

 

我狂奔的以为……

那只不过是奢望的“倒退的时光”

只不过是走丢了的青春

 

MOOD:

My hands are holding the broken hope

 

 

 

 

Because a person, fell in love with a city

那座城里没有我期待的惊喜,没有我渴望的阳光

然而

梦里总会走进

那一道道深邃的古道

那一座座如诗的雪山

那一条条深情的河流

cropped-12.jpg

夜幕来临了

回头再看看那些你曾走过的路

你的身影依然还在

依然如从前的“smile at life”般温暖

只是如今

我……

把自己弄丢了

5955207_233545064000_2

 

 

使用substr对字符的提取,并实现输入文字自动倒序显示

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>输入文字自动倒序显示</title>
<script>
function hehe(){
var a = document.getElementById(“fang”).value;
var b = [];
for( var i=1;i<=a.length;i++){   //因为从-1开始倒序,所以i需要从1开始
b.push(a.substr(-i,1));               //因为是倒序所以用负数,并且每次截取一个字符放入数组中
}
document.write(b.join(”))       //将数组转化成字符串
}
</script>
</head>
<body>
<div class=”hha”>
<input type=”text” value=”请输入内容” id=”fang”>
<input type=”button” value=”倒序显示”  onclick=”hehe()”>
</div>
</body>
</html>

felling:

Back to have in the past, returned to the original.
回得了过去,回不了当初。

你有崇拜的人吗?我有……

每个人的心中都住着个人

因为他(她)

你愿意仰望45度

只为一个侧脸或一个暖心的smile

22

无数的擦肩而过

或许欣喜或许心痛

但上天告诉我们这就是缘分

滴答滴

还有人为你牵挂……

I’m  always  keeping my eyes on you ,by the means you know or not!!

e144aa8bce4342609e2fb49e