vue1.0写法,抽奖消息跑马灯动画(每N秒出现一次)
HTML代码:<!--跑马灯--><div class="lamp-count" id="lamp" v-cloak><div class="lamp"><ul :class="{marquee_left:animate}"
·
HTML代码:
<!--跑马灯-->
<div class="lamp-count" id="lamp" v-cloak>
<div class="lamp">
<ul :class="{marquee_left:animate}">
<li v-for="(lottery_news,index) in lottery_news" if="lottery_news.length > 0">
<img src="images/index-horn.png" />
<p><span>恭喜YP:2000**{{lottery_news.uid}}于</span><span style="color: #E24333;">{{lottery_news.add_time}}</span><span> 抽奖获得</span><span style="color: #E24333;">{{lottery_news.prize_name}}{{lottery_news.prize_num}}个</span></p>
</li>
<!--<li>
<img src="images/index-horn.png" />
<p><span>恭喜YP:2000**88于</span><span style="color: #E24333;">08-22 22:00</span><span> 抽奖获得</span><span style="color: #E24333;">换币90个</span></p>
</li>-->
</ul>
</div>
</div>
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();
})();
更多推荐
已为社区贡献3条内容
所有评论(0)