当前位置:首页 > 日记 > 正文

实现商品活动倒计时

实现商品活动倒计时
倒计时通常用来表示未来某个时刻的剩余时间,倒计时在网上被广泛使用,如考试系统的倒计时、团购网站的优惠活动倒计时等,今天我们用jQuery实现了一个简单的倒计时功能。
基于团购网站的倒计时,我们知道网站将为每个优惠活动(商品)设定一个结束时间,即到期时间,但是系统的时间到达结束时间,这意味着活动的结束,因此,我们必须用HTML定义活动的结束时间。

HTML
一个简单的时尚皮带男士手表,69元

值1354365003>
高强度无毒树脂材料榨汁机24元

值1350748800>
茶番茄青梅杨梅0.48元

值1346487780>
沙滩鞋男士户外凉鞋69元

值1367380800>

HTML代码,我们建立了一个名单,进行倒计时显示的图片和活动,最关键的是,我们定义的值的每个活动的结束时间:。结果属性值,该值是一个表示秒数自1970年1月1日号(PHP)产生的时代背景的。例如,结束时间2013-05-01可以通过PHP在12:00时转换为1367380800秒,和转换后的秒数可用于倒计时倒计时下jQuery。

CSS

我们实际上需要在页面列表中稍微看得更清楚一些。

。结果{字体大小:20px;font-family:微软雅黑;颜色:# 000 }
。prolist {保证金:10px汽车}
。prolist李{浮动:左;宽度:320px;身高:240px;保证金:10px;字体大小:14px;
位置:相对}
。prolist李IMG {宽度:320px;身高:198px;}
。欣欣{位置:绝对;顶部:174px;身高:24px;线高度:24px;
背景:# 333;颜色:# FFF;不透明度:6;显示:无}。
为了保存和预览页面效果,可以看到按顺序排列的活动列表。

jQuery

VaR *获取服务器时间= 1000; / /服务器时间的毫秒数
$(函数(){())
VaR DateTime =新的日期();
datetime.gettime VaR差异=(-获取服务器时间); / /客户端和服务器的时间偏移

setInterval(){()函数(
$(。结果),每个(函数(){)
var obj = $(this);
VaR结果=新的日期(parseInt(obj.attr(币值'))* 1000);
VaR带=新的日期();
VaR NMS = endtime.gettime()-()+差nowtime.gettime;
VaR MYD = math.floor(NMS /(1000×60×60×24); / /天)
VaR MYH = math.floor(NMS /(1000×60×60))% 24; / /小时
VaR MYM = math.floor(NMS /(1000×60))% 60 /分钟;
VaR MYS = math.floor(NMS / 1000)60 /秒%;
无功myms = math.floor(NMS / 100)% 10; / /瞬间
如果(MYD > = 0){
var str = MYD +日+小时MYH ++子MYM + +声音++ myms +二;
其他{ }
var结束!;
}
Obj.html(STR);
});
},100); / 0。每秒钟表演一次
});
我们先把服务器的时间,我们将倒计时时间与服务器时间一致,让每个客户都能看到倒计时是一样的,我们计算在客户端和服务器之间的时间偏移量,避免由于客户机与服务器时间不一致的倒计时同步的麻烦。当然,服务器需要的时间使用服务器的语言获得。在本文中,我们使用PHP获得的时间()函数获得秒数,并记住将其乘以1000毫秒。

我们设置一个定时器通过setInterval和执行代码里面setInterval每100毫秒。

然后在计时器中,我们使用jQuery的每个()方法遍历页面中的列表,并计算天数、小时、分钟和秒。

因为时间()函数的Javascript获取的毫秒数,它是 / 1000的计算过程。

我们不想在页面上显示所有倒计时,但我们需要用户在列表中滑动图片以显示相应的倒计时。因此,我们需要添加以下辅助代码。

$(函数(){())
$(。prolist李IMG)。每个(函数(){(){)
VaR img =美元(这);
Img.hover(function(){()
Img.next()表示();
}函数(){()
Img.next()()。隐藏;
});
});
});
最后的结果:
以上都是关于倒计时的,希望能帮助大家学习。

相关文章

解密苹果ios9系统新的字体

解密苹果ios9系统新的字体

系统,字体,解密,电脑软件,今天(9月17日)上午,苹果公司向全球用户推送iOS 9正式版系统,很多用户一直在等待在第一时间升级,虽然ios9是果粉的一个非常重要的升级,但有很多新的字体设计的朋友,在下面的小份额的苹果新ios9字体系统的秘密更感兴趣,让我…

PS图象处理软件酷金锈315字教程

PS图象处理软件酷金锈315字教程

教程,图象,处理软件,电脑软件,PS,3月15日是一个节日,今天萧边带来的小凉金锈315字的教程,效果图主要是由两部分组成:表面和三维表面。表面由多层叠加。每层由不同的图层样式组成,加上纹理、颜色和浮雕。 效果图主要由两部分组成:表面和三维表面…

钢笔工具是如何绘制圆弧线AI钢笔工

钢笔工具是如何绘制圆弧线AI钢笔工

工具,绘制,圆弧,电脑软件,AI,有很多种电弧的方式。最常见的方法是使用钢笔工具绘制弧线。那么如何钢笔工具在绘制圆弧,萧边是你了解AI钢笔工具的使用。 钢笔工具在AI是我们经常需要用到的,也是一个重要而困难的,特别是对新手来说,但不知道怎么…

一个简单的步骤,让天使的PS皮肤自制

一个简单的步骤,让天使的PS皮肤自制

教程,步骤,简单,天使,电脑软件,PS新手或朋友谁想提高他们的操作能力或在线教程看 软件版本:PS图象处理软件CS 5 适用人群:PS新手或想提高操作熟练程度或看在线教程的朋友不懂。第六步是要强调很多网上类似的去角质教程都没有写出来,所以完全…

如何打印多页的素材在一张纸上ppt2

如何打印多页的素材在一张纸上ppt2

教程,纸上,素材,多页,电脑软件,有很多的照片,打开一个PPT模板和相关的文本信息,当领导要求你在一张纸上打印的照片,没有文字注释。什么是做正确的事,只是普通的没有积累,每天都在玩,到关键时刻不会,下面的小编辑详细解释。一起学习的具体步骤。 打…

如何在QQ空间上传照片QQ

如何在QQ空间上传照片QQ

上传照片,空间,如何在,电脑软件,QQ,举一张从未在QQ空间里通过的照片的例子。 1,先打开QQ空间,点相册,然后点击下一步上传照片: 2,上传照片的点会弹出一个相框来创建一个相册,填充相册的名字,即相册的描述: 3,创建相册,确定要点,以下是上传照片界面的开…

图PS滤镜效果如波尔卡打造强烈复古

图PS滤镜效果如波尔卡打造强烈复古

滤镜效果,波尔卡,风格,电脑软件,PS,本教程是用一点法来绘制波尔卡效果的朋友PS滤镜,创建强烈的复古风格,制作教程效果非常漂亮,很复古的气氛,而且课程也不是很难,初学者可以学习的过程,很好,大家一起学习。 本教程是用效果图法来点波尔卡朋友的PS…

超级伤心分手经典个性签名经典签名

超级伤心分手经典个性签名经典签名

经典,个性签名,伤心,电脑软件,以下是超级情感分手经典签名的全部内容 分手后,我依然爱你。 他说:从今天起,我们只能是陌生人。 分手以来,不要在一起,既然分手了,就不要在一起了。 分手后,这个组合永远不会忘记他已经输了。 我希望分手和和平可以发…

失超伤感签名伤感个性签名

失超伤感签名伤感个性签名

伤感,个性签名,电脑软件,时间可以摧毁一段爱情,也可以见证爱情。选择你的QQ签名,让自己与众不同不同。小编辑在这里推荐一些伤感签名的家庭。 1。如果明天没有太阳,我愿意给你所有的温暖。 2。也许我们不适合,也许这是个错误。 3,这样的朋友数,暧…

PS鼠标绘制精致和逼真的旧汽车图标

PS鼠标绘制精致和逼真的旧汽车图标

鼠标,图标,绘制,逼真,精致,今天萧边教你如何使用PS图象处理软件鼠标画出一个逼真的老爷车图标效果非常漂亮,喜欢的朋友可以一起学习 像这种复杂的形式,一般的想法是把所有的部分从轮廓中抽取出来,然后在每一个剪影上画出光影的关系,逐渐地塑造…

其实黑色的身体很好,所有iOS9字体都

其实黑色的身体很好,所有iOS9字体都

字体,都是,很好,流氓,身体,今天,我想分享一篇与你有关的话题ios9字体。我相信对于一个字体设计的朋友来说,这是第一次体验到Ping Fang blackbody的丑陋。事实上,平芳的黑色一面很好,但你不能适应它。现在让我们看一看。 9月17日,在iOS 9正式版发…

QQ非主流快乐签名推荐快乐个性签名

QQ非主流快乐签名推荐快乐个性签名

推荐,快乐,个性签名,非主流,电脑软件,每个人都有自己的签名。你必须绞尽脑汁才能使你的签名与众不同。现在没有必要纠结了。这里有一些非主流QQ幸福签名推荐萧边。你看到了吗 1。爱是力量,心中的爱并不害怕。 2。年轻的爱像闪电的中年人的爱…