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

看到不少朋友在找限时抢购（促销商品）倒计时效果，如下图类似京东的那种效果：

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，将下面的代码粘贴进去：

<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">


<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>
{$goods.promote_price}

{$goods.shop_price}
</strong></div> </li>
<script>
Tday[{$key}] = new Date("{$goods.gmt_end_time}");
window.setInterval(function()
{clock({$key});}, 1000);
</script>


</ul>
</div>
</div>

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

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

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

文章评论