Mikel
网页上的常用的倒计时
来源： jQuery倒计时
实现代码
引用
<script type<span class="litelighterstyle">=</span><span class="litelighterstyle">"text/javascript"</span> src<span class="litelighterstyle">=</span><span class="litelighterstyle">"js/jquery.min.js"</span>><<span class="litelighterstyle">/</span>script> |
js
<script type<span class="litelighterstyle">=</span><span class="litelighterstyle">"text/javascript"</span>><span class="litelighterstyle">var</span> intDiff <span class="litelighterstyle">=</span> parseInt(<span class="litelighterstyle">60</span>);<span class="litelighterstyle">//倒计时总秒数量</span><span class="litelighterstyle">function</span> timer(intDiff){ window<span class="litelighterstyle">.</span>setInterval(<span class="litelighterstyle">function</span>(){ <span class="litelighterstyle">var</span> day<span class="litelighterstyle">=</span><span class="litelighterstyle">0</span>, hour<span class="litelighterstyle">=</span><span class="litelighterstyle">0</span>, minute<span class="litelighterstyle">=</span><span class="litelighterstyle">0</span>, second<span class="litelighterstyle">=</span><span class="litelighterstyle">0</span>;<span class="litelighterstyle">//时间默认值 </span> <span class="litelighterstyle">if</span>(intDiff > <span class="litelighterstyle">0</span>){ day <span class="litelighterstyle">=</span> Math<span class="litelighterstyle">.</span>floor(intDiff <span class="litelighterstyle">/</span> (<span class="litelighterstyle">60</span> <span class="litelighterstyle">*</span> <span class="litelighterstyle">60</span> <span class="litelighterstyle">*</span> <span class="litelighterstyle">24</span>)); hour <span class="litelighterstyle">=</span> Math<span class="litelighterstyle">.</span>floor(intDiff <span class="litelighterstyle">/</span> (<span class="litelighterstyle">60</span> <span class="litelighterstyle">*</span> <span class="litelighterstyle">60</span>)) <span class="litelighterstyle">-</span> (day <span class="litelighterstyle">*</span> <span class="litelighterstyle">24</span>); minute <span class="litelighterstyle">=</span> Math<span class="litelighterstyle">.</span>floor(intDiff <span class="litelighterstyle">/</span> <span class="litelighterstyle">60</span>) <span class="litelighterstyle">-</span> (day <span class="litelighterstyle">*</span> <span class="litelighterstyle">24</span> <span class="litelighterstyle">*</span> <span class="litelighterstyle">60</span>) <span class="litelighterstyle">-</span> (hour <span class="litelighterstyle">*</span> <span class="litelighterstyle">60</span>); second <span class="litelighterstyle">=</span> Math<span class="litelighterstyle">.</span>floor(intDiff) <span class="litelighterstyle">-</span> (day <span class="litelighterstyle">*</span> <span class="litelighterstyle">24</span> <span class="litelighterstyle">*</span> <span class="litelighterstyle">60</span> <span class="litelighterstyle">*</span> <span class="litelighterstyle">60</span>) <span class="litelighterstyle">-</span> (hour <span class="litelighterstyle">*</span> <span class="litelighterstyle">60</span> <span class="litelighterstyle">*</span> <span class="litelighterstyle">60</span>) <span class="litelighterstyle">-</span> (minute <span class="litelighterstyle">*</span> <span class="litelighterstyle">60</span>); } <span class="litelighterstyle">if</span> (minute <<span class="litelighterstyle">=</span> <span class="litelighterstyle">9</span>) minute <span class="litelighterstyle">=</span> <span class="litelighterstyle">'0'</span> <span class="litelighterstyle">+</span> minute; <span class="litelighterstyle">if</span> (second <<span class="litelighterstyle">=</span> <span class="litelighterstyle">9</span>) second <span class="litelighterstyle">=</span> <span class="litelighterstyle">'0'</span> <span class="litelighterstyle">+</span> second; $(<span class="litelighterstyle">'#day_show'</span>)<span class="litelighterstyle">.</span>html(day<span class="litelighterstyle">+</span><span class="litelighterstyle">"天"</span>); $(<span class="litelighterstyle">'#hour_show'</span>)<span class="litelighterstyle">.</span>html(<span class="litelighterstyle">'<s id="h"></s>'</span><span class="litelighterstyle">+</span>hour<span class="litelighterstyle">+</span><span class="litelighterstyle">'时'</span>); $(<span class="litelighterstyle">'#minute_show'</span>)<span class="litelighterstyle">.</span>html(<span class="litelighterstyle">'<s></s>'</span><span class="litelighterstyle">+</span>minute<span class="litelighterstyle">+</span><span class="litelighterstyle">'分'</span>); $(<span class="litelighterstyle">'#second_show'</span>)<span class="litelighterstyle">.</span>html(<span class="litelighterstyle">'<s></s>'</span><span class="litelighterstyle">+</span>second<span class="litelighterstyle">+</span><span class="litelighterstyle">'秒'</span>); intDiff<span class="litelighterstyle">-</span><span class="litelighterstyle">-</span>; }, <span class="litelighterstyle">1000</span>);} $(<span class="litelighterstyle">function</span>(){ timer(intDiff);}); <<span class="litelighterstyle">/</span>script> |
html
<h<span class="litelighterstyle">1</span>>网页上的倒计时<<span class="litelighterstyle">/</span>h<span class="litelighterstyle">1</span>><div <span class="litelighterstyle">class</span><span class="litelighterstyle">=</span><span class="litelighterstyle">"time-item"</span>> <span id<span class="litelighterstyle">=</span><span class="litelighterstyle">"day_show"</span>><span class="litelighterstyle">0</span>天<<span class="litelighterstyle">/</span>span> <strong id<span class="litelighterstyle">=</span><span class="litelighterstyle">"hour_show"</span>><span class="litelighterstyle">0</span>时<<span class="litelighterstyle">/</span>strong> <strong id<span class="litelighterstyle">=</span><span class="litelighterstyle">"minute_show"</span>><span class="litelighterstyle">0</span>分<<span class="litelighterstyle">/</span>strong> <strong id<span class="litelighterstyle">=</span><span class="litelighterstyle">"second_show"</span>><span class="litelighterstyle">0</span>秒<<span class="litelighterstyle">/</span>strong><<span class="litelighterstyle">/</span>div> |
css
h<span class="litelighterstyle">1</span> { font<span class="litelighterstyle">-</span>family:<span class="litelighterstyle">"微软雅黑"</span>; font<span class="litelighterstyle">-</span>size:<span class="litelighterstyle">40</span>px; margin:<span class="litelighterstyle">20</span>px <span class="litelighterstyle">0</span>; border<span class="litelighterstyle">-</span>bottom:solid <span class="litelighterstyle">1</span>px #ccc; padding<span class="litelighterstyle">-</span>bottom:<span class="litelighterstyle">20</span>px; letter<span class="litelighterstyle">-</span>spacing:<span class="litelighterstyle">2</span>px;}<span class="litelighterstyle">.</span>time<span class="litelighterstyle">-</span>item strong { background:#C<span class="litelighterstyle">71</span>C<span class="litelighterstyle">60</span>; color:#fff; line<span class="litelighterstyle">-</span>height:<span class="litelighterstyle">49</span>px; font<span class="litelighterstyle">-</span>size:<span class="litelighterstyle">36</span>px; font<span class="litelighterstyle">-</span>family:Arial; padding:<span class="litelighterstyle">0</span> <span class="litelighterstyle">10</span>px; margin<span class="litelighterstyle">-</span>right:<span class="litelighterstyle">10</span>px; border<span class="litelighterstyle">-</span>radius:<span class="litelighterstyle">5</span>px; box<span class="litelighterstyle">-</span>shadow:<span class="litelighterstyle">1</span>px <span class="litelighterstyle">1</span>px <span class="litelighterstyle">3</span>px rgba(<span class="litelighterstyle">0</span>,<span class="litelighterstyle">0</span>,<span class="litelighterstyle">0</span>,<span class="litelighterstyle">0</span><span class="litelighterstyle">.2</span>);}#day_show { float:left; line<span class="litelighterstyle">-</span>height:<span class="litelighterstyle">49</span>px; color:#c<span class="litelighterstyle">71</span>c<span class="litelighterstyle">60</span>; font<span class="litelighterstyle">-</span>size:<span class="litelighterstyle">32</span>px; margin:<span class="litelighterstyle">0</span> <span class="litelighterstyle">10</span>px; font<span class="litelighterstyle">-</span>family:Arial,Helvetica,sans<span class="litelighterstyle">-</span>serif;}<span class="litelighterstyle">.</span>item<span class="litelighterstyle">-</span>title <span class="litelighterstyle">.</span>unit { background:none; line<span class="litelighterstyle">-</span>height:<span class="litelighterstyle">49</span>px; font<span class="litelighterstyle">-</span>size:<span class="litelighterstyle">24</span>px; padding:<span class="litelighterstyle">0</span> <span class="litelighterstyle">10</span>px; float:left;} |
