零碎 jQuery控制倒计时
每篇一语:与其用泪水悔恨今天,不如用汗水拼搏今天。
1.jQuery控制倒计时
====================== 华丽丽的分割线 ======================
1.jQuery控制倒计时
1.1 秒杀的倒计时
做秒杀网页总免不了倒计时,但没有很好的服务器,啥资源都没有,只能将部分任务交给浏览器去处理,比如秒杀首页的倒计时,因为真正秒杀是在具体页面,首页只是展示而已,所以误差一点是允许的。
而在具体商品页,时间要求比较严谨,可以通过每秒向服务器提交信息核实,也可以通过隔时间段提交,核对并确保时间无误(误差较小)。
1.2 jQuery控制倒计时示例
1 $(document).ready(function() {
2 onTimer("#time",12000);
3 });
4
5 // 该函数用于执行倒计时
6 function onTimer(id, time) {
7 // 将传进来的long型转换成秒
8 var remainingTime = time / 1000;
9 var hour = 0;
10 var minute = 0;
11 var second = 0;
12
13 // 需要将其句柄赋予一个变量,方便清除该事件
14 var stopCountDown = setInterval(countDown, 1000);
15
16 function countDown() {
17 if(remainingTime > 0) {
18 // 如果倒计时大于0,则继续倒计时
19 hour = Math.floor(remainingTime / 3600);
20 minute = Math.floor(Math.floor(remainingTime % 3600) / 60);
21 second = Math.floor(remainingTime % 60);
22 var formatTime = numToDate(hour, minute, second);
23 changeShowTime(id, formatTime);
24 remainingTime--;
25
26 /* 这里可用Ajax提交到服务器的 */
27
28 }else {
29 // 若倒计时为0,则清除事件
30 clearInterval(stopCountDown);
31
32 /* 这里可用Ajax提交到服务器的 */
33 }
34 }
35 }
36
37 // 将数字转换成时间格式,如: 09:30:45
38 function numToDate(hour, minute, second) {
39 var tohour = hour < 10 ? ("0" + hour) : hour;
40 var tominute = minute < 10 ? ("0" + minute) : minute;
41 var tosecond = second < 10 ? ("0" + second) : second;
42 return tohour + ":" + tominute + ":" + tosecond;
43 }
44
45 // 该函数用于显示倒计时
46 function changeShowTime(id,time) {
47 /* 该函数内编写显示倒计时的语句 */
48 ///////////////////////////////////////////////////////
49
50 $(id).html(time);
51 }
1.3 关于多个商品倒计时
一般往往不止一个商品需要倒计时,而商品的信息又是从服务端迭代出来的,我们需要一个可以识别的标志,所以可在迭代时加入其ID,如下:
1 <!-- 以上,略 -->
2
3 <s:iterator value="M_list" status="boxes">
4 <div id="goods_<s:property value="sid"/>" class="show_box float_left">
5
6 <!-- 略 -->
7
8 </div>
9 </s:iterator>
这时的问题便是如何拿到每个ID并为其加上之前写好的方法,可以通过each(callback)方法,该方法以每一个匹配的元素作为上下文来执行一个函数。
1 $(document).ready(function) {
2 /* 以上,略 */
3
4 $("div[class *= show_box]").each(function(){
5 var id = $(this).attr("id");
6
7 /* 这里编写要绑定的事件,略 */
8 }
9 }