跑马灯抽奖js php,vue写法，抽奖消息跑马灯动画（每N秒出现一次）

HTML代码：

恭喜YP:2000**{{lottery_news.uid}}于{{lottery_news.add_time}}抽奖获得{{lottery_news.prize_name}}{{lottery_news.prize_num}}个

vue代码：

提醒：addZero和timeTransfer方法用于将时间戳转为"月-日 小时:分钟 "格式

(function() {

function addZero(number) {

return Number(number) < 10 ? '0' + number : number;

};

function timeTransfer(time, hasTime, spite) {

spite = spite || '-';

return addZero((time.getMonth() + 1)) + spite + addZero(time.getDate()) + (hasTime ? (' ' + addZero(time.getHours()) + ':' + addZero(time.getMinutes())) : '');

};

var lamp = {

uid: localStorage.replace_uid,

lottery_news: [], //消息

animate: false,

show: false,

};

var m = {

init: function() {

m.buildVue();

m.ready();

m.created();

},

//消息特效

created: function() {

//setInterval(m.showMarquee, 5000);

setInterval(function(){//出现

if(!lamp.show){

m.showMarquee();

setTimeout(function(){

$(".lamp-count").animate({left: "0%"});

},500);

lamp.show = true;

}

},5000);

setInterval(function(){//隐藏

if(lamp.show){

$(".lamp-count").animate({left: "-96%"});

lamp.show = false;

}

},15000);

},

//消息特效

showMarquee: function() {

lamp.animate = true;

setTimeout(function(){

lamp.lottery_news.push(lamp.lottery_news[0]);

lamp.lottery_news.shift();

lamp.animate = false;

},500);

},

ready: function() {

$.ajax({

type: "post",

url: DOMAIN_NAME + "/index.php/api/lottery/getLotteryPrize",

dataType: 'jsonp',

data: {

uid: lamp.uid

},

success: function(data) {

if(data.error_code == 0) {

lamp.lottery_news = data.lottery_news;

$(lamp.lottery_news).each(function(index, value) {

lamp.lottery_news[index].uid = lamp.lottery_news[index].uid.toString().substring(6, 9);

lamp.lottery_news[index].prize_num = lamp.lottery_news[index].prize_num.split(".")[0];

//处理时间戳

var time = new Date(value.add_time * 1000);

lamp.lottery_news[index].add_time = timeTransfer(time, true);

});

lamp.lottery_count = data.lottery_count;

} else {

console.log("error:" + data.error_msg);

}

}

});

},

buildVue: function() {

lamp = new Vue({

el: "#lamp",

data: lamp,

methods: {

}

})

}

};

m.init();

})();