1. 程式人生 > >vue寫法,抽獎訊息跑馬燈動畫(每N秒出現一次)

vue寫法,抽獎訊息跑馬燈動畫(每N秒出現一次)

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