<div class="blogpost-body" id="cnblogs_post_body">
<p>本文是对类似于拼团，多个商品每个都有各自的<span style="color:#000000;"><a href="http://www.100sucai.com/tag/22/"><span style="color:#000000;">js倒计时</span></a></span>，一开始接到接到这个需求也是头疼了一阵子，如果是在商品列表少的时候完全就可以写成死的，固定的变量，写几个定时器就ok了，</p>
<p>但是这次数据是活的，看一些拼团app都可以实现，既然能实现就搞起来，有了以下的想法 使用环境 vue</p>
<p>写一个准备渲染的死数据</p>
<div class="jb51code">
<div>
<div class="syntaxhighlighter js" id="highlighter_878228">
<div class="toolbar">
?
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter">
<div class="line number1 index0 alt2">
1
</div>
<div class="line number2 index1 alt1">
2
</div>
<div class="line number3 index2 alt2">
3
</div>
<div class="line number4 index3 alt1">
4
</div>
<div class="line number5 index4 alt2">
5
</div>
<div class="line number6 index5 alt1">
6
</div>
<div class="line number7 index6 alt2">
7
</div>
<div class="line number8 index7 alt1">
8
</div>
<div class="line number9 index8 alt2">
9
</div>
<div class="line number10 index9 alt1">
10
</div>
<div class="line number11 index10 alt2">
11
</div>
<div class="line number12 index11 alt1">
12
</div>
<div class="line number13 index12 alt2">
13
</div>
<div class="line number14 index13 alt1">
14
</div>
<div class="line number15 index14 alt2">
15
</div>
<div class="line number16 index15 alt1">
16
</div>
<div class="line number17 index16 alt2">
17
</div>
<div class="line number18 index17 alt1">
18
</div> </td><td class="code">
<div>
<div class="line number1 index0 alt2">
<code class="js plain">data () {<!-- --></code>
</div>
<div class="line number2 index1 alt1">
<code class="js spaces"> </code>
<code class="js keyword">return</code>
<code class="js plain">{<!-- --></code>
</div>
<div class="line number3 index2 alt2">
<code class="js spaces"> </code>
<code class="js plain">list: [ </code>
<code class="js comments">// 准备渲染的数据</code>
</div>
<div class="line number4 index3 alt1">
<code class="js spaces"> </code>
<code class="js plain">{<!-- --></code>
</div>
<div class="line number5 index4 alt2">
<code class="js spaces"> </code>
<code class="js plain">remainTime: 900000, </code>
<code class="js comments">// 距离结束还有多久</code>
</div>
<div class="line number6 index5 alt1">
<code class="js spaces"> </code>
<code class="js plain">remainTimeStr: </code>
<code class="js string">''</code>
<code class="js comments">// 展示文案</code>
</div>
<div class="line number7 index6 alt2">
<code class="js spaces"> </code>
<code class="js plain">},</code>
</div>
<div class="line number8 index7 alt1">
<code class="js spaces"> </code>
<code class="js plain">{<!-- --></code>
</div>
<div class="line number9 index8 alt2">
<code class="js spaces"> </code>
<code class="js plain">remainTime: 400000,</code>
</div>
<div class="line number10 index9 alt1">
<code class="js spaces"> </code>
<code class="js plain">remainTimeStr: </code>
<code class="js string">''</code>
</div>
<div class="line number11 index10 alt2">
<code class="js spaces"> </code>
<code class="js plain">},</code>
</div>
<div class="line number12 index11 alt1">
<code class="js spaces"> </code>
<code class="js plain">{<!-- --></code>
</div>
<div class="line number13 index12 alt2">
<code class="js spaces"> </code>
<code class="js plain">remainTime: 60500,</code>
</div>
<div class="line number14 index13 alt1">
<code class="js spaces"> </code>
<code class="js plain">remainTimeStr: </code>
<code class="js string">''</code>
</div>
<div class="line number15 index14 alt2">
<code class="js spaces"> </code>
<code class="js plain">},</code>
</div>
<div class="line number16 index15 alt1">
<code class="js spaces"> </code>
<code class="js plain">]</code>
</div>
<div class="line number17 index16 alt2">
<code class="js spaces"> </code>
<code class="js plain">}</code>
</div>
<div class="line number18 index17 alt1">
<code class="js plain">} |
|
转播
