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();
})();

 

你可能感兴趣的:(VUE全家桶)