Andy Zhao's Blog

  • 首页
  • web开发
  • 互联网
  • 技术分享
  • 网站运营
  • 交互设计
  • 资源分享
    • 工具
    • 欣赏
    • 素材
  • 生活杂语
Welcome
记录一些点点滴滴
  1. 首页
  2. 网站运营
  3. 网站建设
  4. 正文

在ECSHOP增加限时抢购(促销商品)倒计时效果

2012/12/13 3674点热度 1人点赞 0条评论

看到不少朋友在找限时抢购(促销商品)倒计时效果,如下图类似京东的那种效果:

1、首先修改程序部分

打开includes/lib_goods.php

找到get_promote_goods()函数部分

在

$goods[$idx]['url'] = build_uri('goods', array('gid' => $row['goods_id']), $row['goods_name']);

(注:这里一定要谨慎,一定要找准位置,很多同志都是绊倒在这里的,如果你没修改过这个文件的话,大概是在396行的位置,找错了就出不来了)

下面增加代码

/* 促销时间倒计时 */

 

$time = gmtime();
if ($time >= $row['promote_start_date'] && $time <= $row['promote_end_date'])
{
$goods[$idx]['gmt_end_time'] = local_date('M d, Y H:i:s',$row['promote_end_date']);
}
else
{
$goods[$idx]['gmt_end_time'] = 0;
}

 

2、然后可以新建一个 library/xianshi.lbi,将下面的代码粘贴进去:

 

<!-- {if $promotion_goods} -->
<script >
var Tday = new Array();
var daysms = 24 * 60 * 60 * 1000
var hoursms = 60 * 60 * 1000
var Secondms = 60 * 1000
var microsecond = 1000
var DifferHour = -1
var DifferMinute = -1
var DifferSecond = -1
function clock(key)
{
var time = new Date()
var hour = time.getHours()
var minute = time.getMinutes()
var second = time.getSeconds()
var timevalue = ""+((hour > 12) ? hour-12:hour)
timevalue +=((minute < 10) ? ":0":":")+minute
timevalue +=((second < 10) ? ":0":":")+second
timevalue +=((hour >12 ) ? " PM":" AM")
var convertHour = DifferHour
var convertMinute = DifferMinute
var convertSecond = DifferSecond
var Diffms = Tday[key].getTime() - time.getTime()
DifferHour = Math.floor(Diffms / daysms)
Diffms -= DifferHour * daysms
DifferMinute = Math.floor(Diffms / hoursms)
Diffms -= DifferMinute * hoursms
DifferSecond = Math.floor(Diffms / Secondms)
Diffms -= DifferSecond * Secondms
var dSecs = Math.floor(Diffms / microsecond)

if(convertHour != DifferHour) a="<b><font color=red>"+DifferHour+"</font></b>天";
if(convertMinute != DifferMinute) b="<b><font color=red>"+DifferMinute+"</font></b>时";
if(convertSecond != DifferSecond) c="<b><font color=red>"+DifferSecond+"</font></b>分"
d="<b><font color=red>"+dSecs+"</font></b>秒"
if (DifferHour>0) {a=a}
else {a=''}
document.getElementById("leftTime"+key).innerHTML = a + b + c + d; //显示倒计时信息

}
</script>
<div class="m m2" id="timed">
<div class="mt">
<h2>限时抢购</h2>
<div class="extra"></div>
</div>
<div class="mc">
<ul class="lh">
<!--{foreach from=$promotion_goods key=key item=goods name=name}-->
<!--{if $smarty.foreach.name.index <= 4}-->
<li id="timed1" class="fore1"><div id="leftTime{$key}" class="countdown">剩余<b>00</b>小时<b>00</b>分<b>00</b>秒</div><div class="p-img ld"><a title="{$goods.name|escape:html}" target="_blank" href="{$goods.url}"><img width="130" height="130" alt="{$goods.name|escape:html}" data-img="1" src="{$goods.thumb}"/></a></div><div class="p-name"><a target="_blank" title="{$goods.name|escape:html}" href="{$goods.url}">{$goods.name|escape:html}</a><br>原价:<font style="text-decoration:line-through; color:#CCCCCC; font-size:12px;">{$goods.shop_price}</font></div><div class="p-price"><span>抢购价:</span><strong><!-- {if $goods.promote_price neq ""} -->
{$goods.promote_price}
<!-- {else}-->
{$goods.shop_price}
<!--{/if}--></strong></div> </li>
<script>
Tday[{$key}] = new Date("{$goods.gmt_end_time}");
window.setInterval(function()
{clock({$key});}, 1000);
</script>
<!--{/if}-->
<!--{/foreach}-->
</ul>
</div>
</div>
<!-- {/if} -->

然后在需要用到的地方调用一下就可以了:

<!-- #BeginLibraryItem "/library/xianshi.lbi" --><!-- #EndLibraryItem -->

以上代码可以应用在仿京东模板中,你也可以根据自己的需要替换相应的<div id="timed"></div>中的内容即可

标签: ecshop 开源 模板 网站建设
最后更新:2012/12/13

zhaoan

一个不起眼的IT工作者,从事过的行业较多,医疗保健、医院、月子会所、机电、重卡、软件,涉及的岗位也较多,零售、市场、平面设计、网站设计、UI设计、前端开发、后端开发、网络布线、设备维护、服务器维护、网络推广、网站运营、新媒体运营、部门管理等等,每个岗位工作基本都能独立完成,但是涉及面广导致都不精通,学习还在继续中。。。

点赞
< 上一篇

文章评论

取消回复

搜索
分类
  • asp / 2篇
  • css / 27篇
  • html / 9篇
  • javascript / 15篇
  • php / 6篇
  • web开发 / 8篇
  • wordpress / 7篇
  • 互联网 / 16篇
  • 交互设计 / 30篇
  • 其他 / 3篇
  • 工具 / 3篇
  • 欣赏 / 11篇
  • 生活杂语 / 6篇
  • 用户体验 / 1篇
  • 素材 / 3篇
  • 网站建设 / 3篇
  • 网站推广 / 4篇
  • 网站运营 / 5篇
  • 网络技术 / 1篇
最新 热点 随机
最新 热点 随机
宝塔的FTP存储空间,API资料校验失败,请核实! 移动端APP下拉刷新与轮播图冲突的解决方法 头条号怎么运营?怎么涨粉? 转载:移动前端开发之viewport的深入理解 判断来访是搜索引擎蜘蛛还是普通用户,蜘蛛正常抓取,用户跳转指定页面 为什么我们需要构图?构图有哪些原则?
ie6和ie7中z-index的解决方法 别让用户发呆—设计中的防呆策略 CSS命名规范和写法整理 ie6,ie7,ie8 css bug兼容解决方法 国内网站数据统计选Google Analytics还是百度统计 php网站301定向跳转方法

COPYRIGHT © 2022 zhaoan.org. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

陕ICP备09022954号