• 抚州市12名处级干部正式任职 2019-10-17
  • 数读舆情:2017年中国人阅读了多少文字? 2019-10-17
  • [大笑]肯定要付钱啊!你个人占有属于大家的资源,就是一根针都得付钱,更何况是不可再生的土地? 2019-10-14
  • 【理上网来·喜迎十九大】人民军队的制胜之本力量之源 2019-10-07
  • [大笑]当然要付钱,你占用属于大家的资源,那怕是一根针都要付钱! 2019-10-05
  • 而另外发达国家都做不到,垃圾只能往中国出口。前两年我们才禁止了洋垃圾的进口,我们生产的垃圾要销往哪里 2019-10-02
  • 难民救援船将抵达西班牙 2019-09-03
  • 凸显“海丝”特色 第二十届投洽会在穗举行推介会 2019-08-31
  • 看看这些政协委员说了哪些亮点? 2019-08-31
  • 4月17日上市配置丰富 起亚新智跑消息 2019-08-22
  • 夏天吃雪糕怕伤胃拉肚子 如何健康吃冷饮——食品安全频道——黄河新闻网 2019-08-20
  • 人民网驻日本记者报道集 2019-08-14
  • 中国中小企业协会“一带一路”工委会秋季行动计划——走进加拿大 2019-08-06
  • 古镇镇商会组织会员参观第十届香港国际春季灯饰展 2019-08-01
  • 中欧智库联手,推进中亚一带一路合作 2019-07-23
  • 金葵设计—云南网站建设\网络推广\网络营销\品牌传输\软件开发知名设计!
    您当前的位置:云南11选5前三和值走势图 > 新闻资讯 > 开发技术

    团购类网站倒计时的实现方法

    云南11选5前三和值走势图 www.tri99.com 文章概述:

    如火如荼的团购网站根据易观国际提供的统计数据,截至2010年6月,中国市场团购网站数量已经突破400家。国内团购潮从今年2月份开始出现,在4~6月出现高峰,尤其是今年5月,一些大的网站如爱帮网、开心网都加入到团购中来,F团、团宝、酷团、515团购、1288团购、拉手、24券…

    文章内容涵盖:倒计时代码,JS技术,团购网站

    如火如荼的团购网站

    根据易观国际提供的统计数据,截至2010年6月,中国市场团购网站数量已经突破400家。国内团购潮从今年2月份开始出现,在4~6月出现高峰,尤其是今年5月,一些大的网站如爱帮网、开心网都加入到团购中来,F团、团宝、酷团、515团购、1288团购、拉手、24券、满座、窝窝、满堂网、糯米网、第一团购等也纷纷上线。预计年底,我国团购类网站的数量将达到1000多家,甚至有业内人士称“一天之内会有三到五家新的团购网站诞生”。俗称“千团大战”。

    据说王兴的美团网上线4个月就盈亏平衡了,还有,貌似企鹅、点评也来插足了。

    不过这类团购网站是死是活、孰好孰坏不管我鸟事,我所关心的是一些让我感兴趣的前端内容,比如说,这类团购网站的倒计时。
    美团网倒计时 张鑫旭-鑫空间-鑫生活企鹅团倒计时张鑫旭-鑫空间-鑫生活点评团倒计时 张鑫旭-鑫空间-鑫生活

    虽然有的横着睡觉,有的竖着休息,本质上都是一样的,一样的阿拉伯数字,一样的一秒一变化。本文内容就是展示如何在前端使用js实现倒计时的UI效果。


    本文来自云南网站建设-金葵设计,请记住我们的官方网站:云南11选5前三和值走势图

    转载请注明出处。

    二、demo与效果展示

    为节约时间,我就直接套用了企鹅团的界面作为demo的背景。因为是倒计时,所以需要一个固定的时间,为了n年后,某位仁兄打开demo页面依然在倒计时,所以我把倒计时时间设成了2050年7月30日中午12点整,还有40年才到,因为年代较长,所以有必要显示剩余年份与月份。所以,最后demo页面的效果如下图所示:
    demo页面关键部位截图 张鑫旭-鑫空间-鑫生活

    本文来自云南网站建设-金葵设计,请记住我们的官方网站:云南11选5前三和值走势图

    转载请注明出处。

    三、使用

    倒计时其实就是Date类的一些计算与处理,主要是些繁琐的工作。为了省掉他人的功夫以及方便后来的使用,我已经将倒计时主要处理方法封装起来了。方法名为:fnTimeCountDown(参数1, 参数2)。

    具体使用如下,首先,调用倒计时js脚本,您可以在页面的任何位置嵌入这段脚本:


    <script type="text/javascript" src="//www.zhangxinxu.com/study/js/timeCountDown.js"></script>

    然后,调用方法fnTimeCountDown(参数1, 参数2)即可,于是就可以实现倒计时效果了,很简单吧。

    下面是重点了,就是关于这里的参数。参数1指的是截止的时间。我个人建议使用UTC()方法创建Date对象传递给Date构造函数。例如,Date.UTC(2030, 6, 27, 16, 34),表示的就是2030年7月27日161时34分0秒(月份需要加1),然后将这个参数替换“参数1”就可以了。具体来说就是:


    var d = Date.UTC(2030, 6, 27, 16, 34);
    fnTimeCountDown(d, 参数2)
    

    关于参数2,有点小复杂。参数2是个对象,同时也是个对象集,是显示秒、分、时数值标签的DOM对象集合,里面的对象名是固定的,不可自己定义,否则没有效果的??悸堑嚼┱剐?,对象名从秒一直到年,具体如下:


    {
         sec: 显示秒数值的标签对象,
         mini: 显示分钟数值的标签对象,
         hour: 显示小时数值的标签对象,
         day: 显示天数数值的标签对象,
         month: 显示月份数值的标签对象,
         year: 显示年数数值的标签对象
    }
    

    以上所有的参数都是可选的,如果哪个参数没有,则不显示时间变化,如果参数对应的DOM对象不存在,自然也没有数值变化的。如果是上面部分展示的团购倒计时的话,只要下面三个子对象就足够了:


    {
         sec: 显示秒数值的标签对象,
         mini: 显示分钟数值的标签对象,
         hour: 显示小时数值的标签对象
    }
    

    举个例子吧,有三个标签,分别用来显示剩余的小时数,分钟数以及秒数的,其id分别是hour,mini,sec,如下所示:


    <span id="hour"></span>时 <span id="mini"></span>分 <span id="sec"></span>秒
    

    则第二个参数应该这么写:


    var obj = {
         sec: document.getElementById("sec"),
         mini: document.getElementById("mini"),
         hour: document.getElementById("hour")
    }
    

    所以两个参数合起来就是:


    var d = Date.UTC(2030, 6, 27, 16, 34);
    var obj = {
         sec: document.getElementById("sec"),
         mini: document.getElementById("mini"),
         hour: document.getElementById("hour")
    }
    fnTimeCountDown(d, obj);
    

    这段实例代码所产生的效果如下所示:
    05时 41分 28


    如果现在还没有到2030年,则您应该可以看到上面秒前面的数值在不停的倒计时。

    需要注意的是,参数2的对象集不支持jQuery对象,只能是DOM对象,如果您需要支持jQuery对象,需要修改原js方法中的innerHTML为jQuery的html()或是text()方法。

    本文来自云南网站建设-金葵设计,请记住我们的官方网站:云南11选5前三和值走势图

    转载请注明出处。

    四、简短的结语

    此脚本只是个人简单测试了下,且js功力尚浅,难免还存有bug或是不准确之处。如果您发现了,欢迎指正,不甚感谢。也欢迎各种形式的讨论与交流。

    本文来自云南网站建设-金葵设计,请记住我们的官方网站:云南11选5前三和值走势图

    转载请注明出处。

    四、另类实现

    居观察,很多淘宝网店也有这样的倒计时效果,虽然并不具备真正的倒计时功能,但的确如果您不仔细研究是无法发现其中的猫腻的,本人有幸观察了几个淘宝店铺的团购代码,实现方式让人吐血,尽然仅仅是3个GIF图片,在GIF里面通过控制帧速来模拟倒计时代码,的确另辟蹊径,有兴趣的朋友可以自己研究一下,对于仅仅最求展示效果的朋友们,这才是最简单的办法,果然,高手在民间??!

    本文来自云南网站建设-金葵设计,请记住我们的官方网站:云南11选5前三和值走势图

    转载请注明出处。

    原创文章请注明转载自云南11选5前三和值走势图-云南11选5前三和值走势图, 本文地址://www.tri99.com/article/show/96.aspx

    关键字:倒计时代码,JS技术,团购网站

    <上一篇

    任选三奖金多少:您可以直接点击下方按钮开始咨询,我们很高兴为您服务。
    (无QQ用户也可以直接对话)

    您好,请问需要设计服务吗!
  • 抚州市12名处级干部正式任职 2019-10-17
  • 数读舆情:2017年中国人阅读了多少文字? 2019-10-17
  • [大笑]肯定要付钱啊!你个人占有属于大家的资源,就是一根针都得付钱,更何况是不可再生的土地? 2019-10-14
  • 【理上网来·喜迎十九大】人民军队的制胜之本力量之源 2019-10-07
  • [大笑]当然要付钱,你占用属于大家的资源,那怕是一根针都要付钱! 2019-10-05
  • 而另外发达国家都做不到,垃圾只能往中国出口。前两年我们才禁止了洋垃圾的进口,我们生产的垃圾要销往哪里 2019-10-02
  • 难民救援船将抵达西班牙 2019-09-03
  • 凸显“海丝”特色 第二十届投洽会在穗举行推介会 2019-08-31
  • 看看这些政协委员说了哪些亮点? 2019-08-31
  • 4月17日上市配置丰富 起亚新智跑消息 2019-08-22
  • 夏天吃雪糕怕伤胃拉肚子 如何健康吃冷饮——食品安全频道——黄河新闻网 2019-08-20
  • 人民网驻日本记者报道集 2019-08-14
  • 中国中小企业协会“一带一路”工委会秋季行动计划——走进加拿大 2019-08-06
  • 古镇镇商会组织会员参观第十届香港国际春季灯饰展 2019-08-01
  • 中欧智库联手,推进中亚一带一路合作 2019-07-23
  • 快三大小单双技巧揭秘 湖北省30选5开奖号码 029期令人着迷两码中特 123彩票网站福彩3 广东36选7好彩1走势图 白小姐傳白小姐传密 快乐彩怎么玩才赚钱 重庆市彩时彩结果记录 排列3走势图彩宝 德克萨斯扑克历史 网上能买足球彩票吗 互联网到底怎么赚钱 合乐888 ag平台炸金花赢钱图 腾讯欢乐斗牛官方下载