遍历倒计时（时间各不同） 

  1 加载个jquery即可
  2 <!doctype html>
  3 <html>
  4 
  5 <head>
  6 
  7 <meta charset="utf-8">
  8 
  9 <title>JS实现简单的全选反选</title>
 10 
 11 <script src="__PUBLIC__/Manage/index/js/jquery-1.11.2.min.js"></script>
 12 
 13 <style>
 14 
 15 * {
 16 
 17     padding:0;
 18 
 19     margin:0;
 20 
 21 }
 22 
 23 .wrap {
 24 
 25     width:600px;
 26 
 27     margin:20px auto 0;
 28 
 29 }
 30 
 31 table {
 32 
 33     border-collapse:collapse;
 34 
 35     border-spacing:0;
 36 
 37     border:1px solid #c0c0c0;
 38 
 39     width:600px;
 40 
 41 }
 42 
 43 th,td {
 44 
 45     border:1px solid #d0d0d0;
 46 
 47     color:#404060;
 48 
 49     padding:10px;
 50 
 51 }
 52 
 53 th {
 54 
 55     background-color:#09c;
 56 
 57     font:bold 16px "微软雅黑";
 58 
 59     color:#fff;
 60 
 61 }
 62 
 63 td {
 64 
 65     font:14px "微软雅黑";
 66 
 67 }
 68 
 69 tbody tr {
 70 
 71     background-color:#f0f0f0;
 72 
 73 }
 74 
 75 tbody tr:hover {
 76 
 77     cursor:pointer;
 78 
 79     background-color:#fafafa;
 80 
 81 }
 82 
 83 </style>
 84 
 85 </head>
 86 
 87 <body>
 88 
 89 <div class="wrap">
 90 
 91     <table>
 92 
 93         <thead>
 94 
 95             <tr>
 96 
 97                 <th>商品名</th>
 98 
 99                 <th>截止时间</th>
100 
101                 <th>倒计时</th>
102 
103                 <th>购买</th>
104 
105             </tr>
106 
107         </thead>
108 
109         <tbody id="j_tb">
110 
111             <!-- <volist name="allgoods" id="val" >
112 
113             <tr>
114 
115                 <td class="name"><{$val['name']}></td>
116 
117                 <td class="time" ><{$val['time']}></td>
118 
119                 <td class="ending" >
120 
121                     00天00时00分00秒
122 
123                 </td>
124 
125                 <td class="mai" >买买买</td>
126 
127             </tr>
128 
129             </volist> -->
130 
131 
132             <tr>
133 
134                 <td class="name">第一件</td>
135 
136                 <td class="time" >1499321267</td>
137 
138                 <td class="ending" >
139 
140                     00天00时00分00秒
141 
142                 </td>
143 
144                 <td class="mai" >买买买</td>
145 
146             </tr>
147 
148             <tr>
149 
150                 <td class="name">第二件</td>
151 
152                 <td class="time" >1498913268</td>
153 
154                 <td class="ending" >
155 
156                     00天00时00分00秒
157 
158                 </td>
159 
160                 <td class="mai" >买买买</td>
161 
162             </tr>
163 
164             <tr>
165 
166                 <td class="name">第三件</td>
167 
168                 <td class="time" >1497923169</td>
169 
170                 <td class="ending" >
171 
172                     00天00时00分00秒
173 
174                 </td>
175 
176                 <td class="mai" >买买买</td>
177 
178             </tr>
179 
180 
181         </tbody>
182 
183     </table>
184 
185 </div>
186 
187 
188 <script type="text/javascript">
189 
190 
191     $(".name").click(function(){
192 
193         alert($(this).html());
194 
195     })
196 
197 
198 
199 
200     function xun(){
201 
202 
203         jQuery(".time").each(function(key,value){    
204 
205 
206             EndTime = ($(this).html())*1000;
207 
208             var NowTime = new Date();
209 
210             var t = EndTime - NowTime.getTime();
211 
212             var d=Math.floor(t/1000/60/60/24);
213 
214             var h=Math.floor(t/1000/60/60%24);
215 
216             var m=Math.floor(t/1000/60%60);
217 
218             var s=Math.floor(t/1000%60);
219 
220             var str = (d+"天"+h+"时"+m+"分"+s+"秒");
221 
222 
223             $(this).siblings(".ending").html(str);
224 
225 
226         });
227 
228 
229     }
230 
231 
232     setInterval(xun,1000);
233 
234 
235 </script>
236 
237 <div style="text-align:center;">
238 
239 </div>
240 
241 </body>
242 
243 </html>
244 
245 
246 </body>

 

posted @ 2017-12-06 15:38  无语凝噎6666  阅读(356)  评论(0)    收藏  举报