vue寫法,抽獎訊息跑馬燈動畫(每N秒出現一次)
阿新 • • 發佈:2018-12-14
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(); })();