Das WeChat-Applet zeigt den Projekt-Countdown-Effekt dynamisch an

不言
Freigeben: 2018-06-23 17:10:13
Original
4223 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Countdown des WeChat-Applet-Dynamikanzeigeprojekts vorgestellt. Das Format beträgt beispielsweise 4 Tage, 7 Stunden, 58 Minuten und 39 Sekunden. Interessierte Freunde können sich darauf beziehen >

Das Beispiel in diesem Artikel teilt den spezifischen Code für die dynamische Anzeige des Countdowns des Projekts im WeChat-Applet als Referenz. Der spezifische Inhalt ist wie folgt

1 Flash-Verkäufe beziehen sich auf ein einzelnes Datenelement. Ich habe keine Schleife.

Effekt:

2. WXML-Code:

<p>
<block wx:if="{{total_micro_second<=0}}">剩余时间:已经截止</block>
<block wx:if="{{clock!=&#39;已经截止&#39;}}">剩余时间:{{clock}}</block>
</p>
Nach dem Login kopieren

3 Dateicode:

function countdown(that) {
 var EndTime = that.data.end_time || [];
 var NowTime = new Date().getTime();
 var total_micro_second = EndTime - NowTime || [];
 console.log(&#39;剩余时间:&#39; + total_micro_second);
  // 渲染倒计时时钟
  that.setData({
  clock: dateformat(total_micro_second)
  });
  if (total_micro_second <= 0) {
  that.setData({
   clock: "已经截止"
  });
  //return;
  }
  setTimeout(function () {
  total_micro_second -= 1000;
  countdown(that);
  }
  , 1000)
 }

 // 时间格式化输出,如11:03 25:19 每1s都会调用一次
 function dateformat(micro_second) {
  // 总秒数
  var second = Math.floor(micro_second / 1000);
  // 天数
  var day = Math.floor(second/3600/24);
  // 小时
  var hr = Math.floor(second/3600%24);
  // 分钟
  var min = Math.floor(second/60%60);
  // 秒
  var sec = Math.floor(second%60);
  return day + "天" + hr + "小时" + min + "分钟" + sec+"秒";
 }

Page({

 /**
 * 页面的初始数据
 */
 data: {
 id:&#39;&#39;,
 result:[],
 end_time:&#39;&#39;,
 clock:&#39;&#39;
 },/**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 var that = this;
 wx.request({
  url: &#39;https://m.******.com/index.php/Home/Xiaoxxf/activity_detail?a_id=&#39;+options.id,//不含富文本html
  data: {},
  method: &#39;GET&#39;, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
  header: {
  &#39;Content-Type&#39;: &#39;application/json&#39;
  },
  success: function (res) {
  that.setData({
   common: res.data, //一维数组,全部数据
   end_time: res.data.end_time //项目截止时间,时间戳,单位毫秒
  })
  console.log(that.data.common);
  console.log(&#39;结束时间:&#39; + that.data.end_time);
  },
  fail: function (res) { },
  complete: function (res) { },
 }), 
//调用上面定义的递归函数,一秒一刷新时间
 countdown(that);
},
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist zur chinesischen PHP-Website!

Verwandte Empfehlungen:

WeChat-Miniprogramm So verwenden Sie setData

So verwenden Sie die Datums- und Zeitauswahl des WeChat-Applets

WeChat-Applet-Internetanfragekarussell

Das obige ist der detaillierte Inhalt vonDas WeChat-Applet zeigt den Projekt-Countdown-Effekt dynamisch an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage